Типографическая шкала
Создайте модульную типографическую шкалу для вашего дизайна. Выберите базовый размер и соотношение для идеально пропорциональных заголовков.
Что такое модульная типографическая шкала?
Модульная типографическая шкала - это набор размеров шрифта, следующих постоянному математическому соотношению, например Major Third (1,25x) или Perfect Fourth (1,333x). Каждый уровень от h1 до h6 пропорционально больше предыдущего, создавая гармоничную типографику.
Как выбрать правильное соотношение
Меньшие соотношения, как Minor Second (1,067), создают компактные шкалы для плотных интерфейсов. Большие, как Perfect Fourth (1,333) или Золотое сечение (1,618), создают выраженные контрасты для редакционных сайтов. Major Third (1,25) - безопасный стандарт.
Использование сгенерированного CSS
Панель CSS выводит пользовательские свойства в :root (например, --text-h1) и прямые селекторы для каждого уровня заголовка. Вставьте их в свою таблицу стилей. Используйте rem для масштабируемых размеров или px для фиксированных.
Типографическая шкала и доступность
Использование rem вместо px делает типографику масштабируемой с системными настройками шрифта пользователя - важный аспект доступности. WCAG рекомендует, чтобы текст можно было увеличить до 200%. Модульная шкала с rem автоматически выполняет это требование.