Калькулятор модульной шкалы
Размеры типографики по базе и отношению шкалы с таблицей ступеней.
Заполните поля — результат появится здесь автоматически.
Модульная шкала задаёт размеры шрифта умножением, а не подбором на глаз: каждая ступень — это предыдущая, умноженная на постоянное отношение, поэтому заголовки, основной текст и подписи остаются в одном отношении, сколько бы размеров ни понадобилось макету. Нулевая ступень — база, обычно основной текст; положительные поднимаются к заголовкам, отрицательные опускаются к подписям и мелкому шрифту. Главную роль играет отношение: 1,2 даёт спокойную шкалу с близкими размерами, а 1,618 разводит их так, что заголовок через две ступени превышает основной текст более чем вдвое.
Как считается
Формула и логика
Размер на ступени k = B·q^k. База B положительная, q>1 задаёт возрастающую шкалу. Поля вверх/вниз — целые количества от 0 до 20, а не знак индекса. Нулевая ступень включена, поэтому всего 1+вверх+вниз значений. При отрицательном k используется деление на q^|k|. Таблица показывает первые 12 ступеней; минимум и максимум относятся ко всей заданной шкале. Все длины остаются в одной единице базы.
Пример
База 16 с отношением 1,25 через пять ступеней вверх даёт 48,828, а через две вниз — 10,24.
Поля и единицы
- Базовый размер — ед. длины
- Отношение шкалы — 1
- Ступеней вверх от базы — ступеней
- Ступеней вниз от базы — ступеней
Как пользоваться
- — Введите базовый размер — обычно это размер основного текста.
- — Выберите отношение: 1,2 для плотной шкалы, 1,618 для контрастной.
- — Укажите, сколько ступеней нужно вверх, к заголовкам.
- — Укажите, сколько ступеней нужно вниз, к подписям и мелкому шрифту.
Методика и ограничения
- Методика расчёта
- Формула и логика
- Ограничение
- Геометрическая шкала размеров без автоматического выбора типографики. Ограничение 20 ступеней в каждую сторону — граница этого инструмента; единицы не переводятся между px и rem.
FAQ
Какое отношение выбрать для шкалы?
Отношения от 1,125 до 1,25 держат размеры близко и подходят плотным интерфейсам. Большие — 1,414, 1,5, 1,618 — дают сильный контраст и лучше работают в вёрстке с малым числом уровней.
Нужно ли округлять полученные размеры?
Для CSS не нужно: браузеры спокойно работают с дробными пикселями и rem. Округляйте, только если этого требует дизайн-система, и тогда округляйте всю шкалу одинаково.
Обязательно ли базой брать размер основного текста?
Не обязательно, но почти всегда стоит. Привязка шкалы к тому размеру, который читают чаще всего, и удерживает остальные размеры в понятном отношении к нему.
Почему вверху шкала растёт так быстро?
Потому что она геометрическая: каждая ступень умножает, а не прибавляет, поэтому расстояния расширяются по мере подъёма. Именно это свойство и позволяет мелкому концу шкалы оставаться дробным, не сжимая крупный.