Модульная шкала типографики — Математика за каждым размером шрифта в системе дизайна

Вы смотрите на макет. Размеры шрифтов следующие 14px, 16px, 18px, 24px, 32px, 48px. Ничего не выглядит не так, точно — но что-то чувствуется немного не так. Переходы между размерами не кажутся равномерными. Заголовок слишком близок к подзаголовку. Маленький метка кажется оторванной от основного текста. Вы выбирали числа, которые выглядят круглыми и разумными, и задавались вопросом, почему результат кажется немного произвольным. Он действительно произвольный. Это и есть проблема.

Оказалось, что человеческое восприятие различий в размерах приблизительно логарифмическое. Мы не воспринимаем разницу между 16px и 32px как «вдвое» — мы воспринимаем это как один шаг. Чтобы создать типографику, которая кажется пропорционально согласованной, расстояния между вашими размерами должны следовать соотношению, а не арифметической прогрессии. Это и есть идея модульной шкалы.

Что такое модульная шкала на самом деле

Модульная шкала — это последовательность чисел, получаемых путём умножения базового значения на фиксированное соотношение. Формула следующая:

size = base × ratio^n

Где n n — номер шага (0 для базового значения, положительное для больших, отрицательное для меньших). С базовым значением 16px и соотношением 1.25 (мажорная третья), вы получаете:

• 16 × 1.25^-2 = 10.24px
• 16 × 1.25^-1 = 12.8px
• 16 × 1.25^0 = 16px (базовое значение)
• 16 × 1.25^1 = 20px
• 16 × 1.25^2 = 25px
• 16 × 1.25^3 = 31.25px
• 16 × 1.25^4 = 39.06px

Каждый шаг вверх в точности на 25% больше предыдущего. Визуальные скачки кажутся согласованными, потому что они являются согласованными — геометрически. Сравните это с 14, 16, 18, 24, 32, 48, где скачки +2, +2, +6, +8, +16. Несогласованное расстояние, упакованное в круглые числа.

Именованные соотношения (и в каких случаях они подходят)

Названия взяты из интервалов западной музыки, которые следуют тем же математическим отношениям. Вот практическая линейка:

• 1.067 — Минорная вторая: Очень тесная. Шаги практически не различимы. Подходит для мелких интервалов в тексте внутри одного компонента, не подходит для иерархии заголовков.
• 1.125 — Мажорная вторая: Незаметная. Подходит для плотных интерфейсов, где нужно различия без резкости — например, таблицы данных, дашборды.
• 1.25 — Мажорная третья: Идеальное решение для большинства веб-интерфейсов. Достаточный контраст между уровнями, чтобы ясно прочитать иерархию, без того, чтобы заголовки выглядели слишком большими. Наиболее популярно в системах дизайна.
• 1.333 — Полная четвёртая: Чистое и широко используемое. Дает заголовкам немного большего веса. Подходит, когда нужно четкое типографическое иерархическое расположение с меньшим количеством шагов.
• 1.414 — Усиленная четвёртая (√2): Также соотношение сторон листа A4. Более драматичное, чем полная четвёртая, подходит для редакционного контента.
• 1.5 — Полная пятая: Сильный контраст между уровнями. Заголовки кажутся большими и выразительными. Подходит для редакционных размещений, страниц привлечения внимания, любых случаев, где отображаемый текст должен сделать заявление.
• 1.618 — Золотое соотношение: Теоретически красиво, на практике агрессивно. Два шага вверх от основного текста и ваш заголовок уже огромен. Используйте его только для элементов отображения, а не для полной иерархии интерфейса.

Для разработчика фронтенда, создающего интерфейс продукта, мажорная третья (1.25) или полная четвёртая (1.333) покрывают почти все случаи. Если вы не уверены, начните с 1.25. Вы можете увеличить соотношение, если иерархия кажется слишком плоской.

Практическое применение шкалы: мажорная третья от 16px

Вот как выглядит полная шкала мажорной трети (соотношение = 1.25, база = 16px) на семи шагах:

Шаг	Умножитель	значение в пикселях	значение в rem
xs	1.25^-2	10.24px	0.64rem
sm	1.25^-1	12.8px	0.8rem
base	1.25^0	16px	1rem
lg	1.25^1	20px	1.25rem
xl	1.25^2	25px	1.5625rem
2xl	1.25^3	31.25px	1.953rem
3xl	1.25^4	39.06px	2.441rem

Примечание по десятичным значениям: 12.8px и 31.25px полностью допустимо сохранять точные значения в rem — браузеры правильно обрабатывают подпиксельное отображение. Вам не нужно округлять до 13px или 31px и нарушать математическую согласованность. Оставляйте математику чистой — пусть браузер сделает свою работу.

CSS Custom Properties: Ваша система дизайна

Прямое преобразование шкалы в CSS custom properties. Это даёт вам систему дизайна, легко используемую в любом месте вашего кода — и легко изменяемую позже, если вы измените соотношение:

:root {
  --font-size-xs:   0.64rem;    /* 16 × 1.25^-2 = 10.24px */
  --font-size-sm:   0.8rem;     /* 16 × 1.25^-1 = 12.8px  */
  --font-size-base: 1rem;       /* base = 16px             */
  --font-size-lg:   1.25rem;    /* 16 × 1.25^1  = 20px     */
  --font-size-xl:   1.5625rem;  /* 16 × 1.25^2  = 25px     */
  --font-size-2xl:  1.953rem;   /* 16 × 1.25^3  = 31.25px  */
  --font-size-3xl:  2.441rem;   /* 16 × 1.25^4  = 39.06px  */
}

Затем используйте их так же, как любые дизайн-токены:

body        { font-size: var(--font-size-base); }
small       { font-size: var(--font-size-sm);   }
h3          { font-size: var(--font-size-xl);   }
h2          { font-size: var(--font-size-2xl);  }
h1          { font-size: var(--font-size-3xl);  }
.label      { font-size: var(--font-size-xs);   }

Преимущество перед жёсткими значениями: когда дизайнер решает, что соотношение должно быть 1.333 вместо 1.25, вы обновляете семь значений в одном месте. Каждый компонент обновляется автоматически. Системы дизайна, которые пропускают этот шаг, заканчиваются пятьюдесятью разными значениями шрифта, рассеянными по файлам компонентов — и каждый разработчик в команде добавляет свои собственные. Разработчики и дизайн-токены имеют сложную связь, но именно эта версия работает.

Если вы не хотите вычислять значения вручную, то Генератор модульной шкалы шрифтов позволяет выбрать базовое значение и соотношение и мгновенно вывести полную шкалу с готовыми CSS custom properties для копирования.

Когда следует нарушать шкалу

Шкалы — это инструменты, а не законы. Вот когда следует намеренно отклоняться от них:

Заголовки отображения требуют отдельного подхода

Большинство систем дизайна используют две шкалы: более тонкую (1.25 или 1.333) для основного текста и компонентов интерфейса, и более драматичную (1.5 или 1.618) для заголовков отображения. Заголовок на маркетинговой странице не должен следовать той же прогрессии, что и метка внутри формы. Tailwind по умолчанию делает именно это — более тонкие шаги на малых размерах, большие скачки на отображаемых размерах.

Жидкая типографика плавно регулирует переходы

На мобильном экране соотношение 1.5, которое выглядело отлично на ПК, может привести к заголовкам, которые слишком малы или слишком велики. Современное решение — clamp():

h1 {
  font-size: clamp(1.953rem, 4vw + 1rem, 2.441rem);
}

Это сохраняет значения модульной шкалы как базовые и максимальные точки, но позволяет размерам плавно изменяться в зависимости от ширины экрана. Модульная шкала определяет диапазон; clamp() обрабатывает переходы. Математика остаётся согласованной, результат остаётся читаемым на разных размерах экрана.

Контекстные переключения допустимы

Если ваш h2 внутри панели чувствуется слишком большим при 1.953rem, уменьшение его до 1.5625rem в этом контексте — законное решение. Шкала даёт вам согласованную базу, а не неизменное правило. Цель — визуальная гармония, а не математическая чистота. Нарушайте шкалу тогда, когда контекст требует этого — но делайте это осознанно, а не потому, что вы взяли круглое число.

Сборка всей системы

Выберите базовый размер (обычно 16px), выберите соотношение, соответствующее нужному визуальному весу (1.25 для UI, 1.333 для чего-то с чуть большим весом, 1.5 для редакционного контента), сгенерируйте шкалу и запишите её в виде CSS custom properties. Завершено. Теперь ваши размеры шрифтов имеют математическую связь вместо произвольной, и любой дизайнер, который посмотрит на ваш код, сразу поймёт систему.

The Генератор модульной шкалы шрифтов on IO Tools позволяет настроить базовый размер, соотношение и количество шагов — и даёт готовую CSS-сущность для копирования. Попробуйте изменить соотношение от 1.25 до 1.333 и посмотрите, насколько быстро меняются размеры заголовков. Это интуиция, которую стоит развивать: понимание того, как каждый соотношение чувствуется до того, как его включить в систему дизайна.

Вам также может понравиться