Шкала шрифтов

Инструмент строит модульную шкалу размеров шрифта: от базового размера основного текста каждая следующая ступень больше предыдущей в одно и то же число раз. Из шкалы получаются согласованные размеры заголовков h1–h6 и мелкого текста, а результат — CSS-переменные в rem. Плавная шкала меняет размеры между узким и широким экраном через clamp(): на телефоне заголовки компактнее, на мониторе — крупнее.

Как пользоваться

Задайте базовый размер (обычно 16–18 px) и коэффициент — его можно выбрать из списка или ввести свой. Таблица и предпросмотр обновляются сразу; любую ступень статичной шкалы можно поправить вручную в столбце «Своё значение».

Для плавной шкалы включите переключатель и задайте базу и коэффициент для широкого экрана, а также ширины окна, между которыми идёт переход. Ползунок показывает, как шкала выглядит при выбранной ширине.

Строим шкалу…

Ступени шкалы
ПеременнаяЗаголовокРазмер, pxCSSСвоё значение, px

Предпросмотр

CSS

Для настройки шкалы включите JavaScript. Пример шкалы 16px × 1.25:
/* Шкала: 16px × 1.25; размеры в rem от 16px */
:root {
  --step-5: 3.0518rem;
  --step-4: 2.4414rem;
  --step-3: 1.9531rem;
  --step-2: 1.5625rem;
  --step-1: 1.25rem;
  --step-0: 1rem;
  --step--1: 0.8rem;
  --step--2: 0.64rem;
}

body {
  font-size: var(--step-0);
}

h1 {
  font-size: var(--step-5);
}

h2 {
  font-size: var(--step-4);
}

h3 {
  font-size: var(--step-3);
}

h4 {
  font-size: var(--step-2);
}

h5 {
  font-size: var(--step-1);
}

h6 {
  font-size: var(--step-0);
}



Как выбрать коэффициент


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


    
    
  • 1.125–1.2 — интерфейсы, документация, мобильные экраны: заголовки ненамного крупнее текста, страница не «расползается».
    • 
    
  • 1.25–1.333 — универсальный выбор для статей и сайтов.
    • 
    
  • 1.5–1.618 — лендинги и промо: крупные выразительные заголовки, но мало ступеней помещается на экране.
    • 



Чем больше ступеней вверх, тем быстрее растут верхние: при коэффициенте 1.333 пятая ступень уже в 4.2 раза больше базы. Если h1 получился слишком крупным, уменьшите коэффициент или используйте плавную шкалу с меньшим коэффициентом для узкого экрана.


Почему rem и переменные


Размеры в rem масштабируются вместе с размером шрифта, который читатель выбрал в настройках браузера, — это важно для доступности. CSS-переменные --step-0, --step-1… позволяют использовать шкалу не только для заголовков, но и для подписей, кнопок и карточек: font-size: var(--step-1). Отрицательные ступени --step--1 подходят для примечаний и мелкого текста.




Вопросы и ответы


Что выбрать: статичную или плавную шкалу?


Статичная проще и предсказуемее — достаточно одной-двух медиа-запросов, если размеры нужно поменять. Плавная обходится без медиа-запросов: каждая ступень сама меняется между двумя ширинами окна.


Почему мелкая ступень на широком экране меньше, чем на узком?


Отрицательные ступени делятся на коэффициент: если на широком экране коэффициент больше, мелкий текст становится мельче. Если это нежелательно, используйте близкие коэффициенты или не применяйте нижние ступени к основному тексту.


Можно ли использовать шкалу для отступов?


Да, тот же подход работает для margin, padding и gap: отступы, согласованные с размерами шрифта, делают вёрстку ритмичнее.




Связанные материалы


Плавный размер одного элемента между двумя ширинами строит инструмент «Размер текста», а перевести px в rem поможет «Единицы CSS». Об единицах измерения — в статье «Единицы измерения CSS».