ПаветтаКалькулятор модульной шкалы
Модульная шкала строит размеры шрифта по одной пропорции: каждый следующий получается умножением предыдущего на постоянный коэффициент. Так заголовки и текст выглядят частями одной системы — тот же принцип, по которому строятся музыкальные интервалы.
Шкала
Как это выглядит
Значения
| Ступень | Имя | px | rem | Отношение к базе |
|---|
Переменные CSS
Коэффициент и число ступеней
Калькулятор строит шкалу размеров шрифта от базового кегля с постоянным коэффициентом. Каждый следующий размер получается умножением предыдущего, и набор выходит согласованным без подбора чисел на глаз.
Коэффициент выбирается из музыкальных интервалов: 1,125 — большая секунда, 1,2 — малая терция, 1,25 — большая терция, 1,333 — кварта, 1,5 — квинта, 1,618 — золотое сечение. Названия пришли из музыки, потому что отношения те же, что между частотами нот.
Чем больше коэффициент, тем резче разница между заголовком и текстом. Кварта и выше подходят для лендингов с крупными заголовками, терция — для статей и документации, где нужна плавная иерархия из пяти-шести ступеней.
Инструмент показывает шкалу в пикселях и в относительных единицах, а также вниз от базы — для подписей и мелких пометок. Это удобно тем, что сразу видно, не станет ли самая мелкая ступень нечитаемой.
| Коэффициент | Название | Для чего |
|---|---|---|
| 1,125 | Большая секунда | Плотные интерфейсы |
| 1,25 | Большая терция | Статьи, документация |
| 1,333 | Кварта | Сайты с крупными заголовками |
| 1,618 | Золотое сечение | Обложки, афиши |
От пифагорейцев до швейцарской сетки
Идея строить размеры по геометрической прогрессии старше типографики. Пифагорейцы обнаружили, что приятные слуху созвучия соответствуют простым отношениям длин струны: 2:1 — октава, 3:2 — квинта, 4:3 — кварта.
В типографике этот принцип применил Роберт Брингхёрст в книге «Основы стиля в типографике» 1992 года, показав, что размеры, связанные постоянным отношением, выглядят согласованно так же, как согласованно звучат ноты аккорда.
Модульная система в верстке восходит к работам Йозефа Мюллера-Брокманна и швейцарской школе пятидесятых. Там же оформилась мысль, что сетка задаёт не только колонки, но и вертикальный ритм, к которому привязаны все размеры на странице.
Похожий принцип действует и в фотографии, и в архитектуре: набор стандартных фокусных расстояний объективов и ряд предпочтительных чисел в машиностроении построены так же — геометрической прогрессией с постоянным множителем.
Золотое сечение с его отношением около 1,618 переоценено: в типографике оно даёт слишком большой скачок между соседними ступенями, и для текста применяют коэффициенты помельче. Держится его популярность скорее на культурном ореоле числа.
Как выбрать шкалу под задачу
Задайте базовый кегль и коэффициент — получите шкалу вверх и вниз. Начинайте с 16 пикселей: это размер основного текста по умолчанию в браузерах, и от него удобно отталкиваться.
Считайте шкалу от основного текста, а заголовки подбирайте уже под неё. Основной кегль — та величина, которую читают дольше всего, и подгонять её под красивый заголовок означает жертвовать главным ради второстепенного.
Не берите больше пяти-шести ступеней. Каждая ступень должна отличаться заметно; шкала из десяти размеров, различающихся на пару пикселей, только запутает верстальщика.
Округляйте значения. Шкала выдаёт дробные числа вроде 25,63 пикселя; для вёрстки их приводят к целым или к половинам, и на восприятии это не сказывается.
Проверьте нижние ступени. Размер меньше 12 пикселей на мобильном экране читается плохо, а меньше 10 — практически не читается, и такие ступени лучше вовсе не заводить.
Разводите соседние ступени по назначению. Если два размера в шкале применяются к элементам, стоящим рядом на экране, разница между ними должна читаться без сравнения — иначе иерархия не работает и оба выглядят как ошибка вёрстки.
Подобрать интервал под каждый размер поможет калькулятор межстрочного интервала, а связать размеры с шириной экрана — калькулятор CSS clamp.
| Как строится | умножением на коэффициент |
| Базовый кегль | обычно 16 px |
| Ступеней | пять-шесть |
| Мягкая шкала | 1,125–1,2 |
| Резкая | от 1,333 |
| Золотое сечение | 1,618 |
| Книга Брингхёрста | 1992 |
| Минимум для мобильных | 12 px |
Что показывает расчёт
Модульная шкала строит размеры шрифта по одной пропорции: каждый следующий получается умножением предыдущего на постоянный коэффициент. Так заголовки и текст выглядят частями одной системы — тот же принцип, по которому строятся музыкальные интервалы. Инструмент считает шкалу в обе стороны от базового размера, показывает её вживую и выдаёт готовые переменные CSS. Отдельно собирается адаптивная версия: две шкалы, для узкого и широкого экрана, сведённые через clamp — тогда на телефоне разница между заголовком и текстом остаётся умеренной, а на большом экране становится выразительной.
Как пользоваться
Инструмент считает шкалу в обе стороны от базового размера, показывает её вживую и выдаёт готовые переменные CSS. Отдельно собирается адаптивная версия: две шкалы, для узкого и широкого экрана, сведённые через clamp — тогда на телефоне разница между заголовком и текстом остаётся умеренной, а на большом экране становится выразительной.
- Обычно 16 или 17 пикселей — размер основного текста, от него считается всё остальное.
- Малая терция даёт спокойную шкалу, квинта и золотое сечение — контрастную.
- Все ступени набраны реальным текстом: контраст между ними виден сразу.
- Готовый блок с переменными CSS, обычными или адаптивными через clamp.
Частые вопросы
Что такое модульная шкала
Ряд размеров, где каждый следующий получается умножением предыдущего на постоянный коэффициент. Идея пришла из музыки: интервалы между нотами тоже задаются отношениями частот, и названия коэффициентов те же — терция, кварта, квинта. Глаз воспринимает такую последовательность как упорядоченную, даже не зная про пропорцию.
Какой коэффициент выбрать
Чем он больше, тем контрастнее шкала. Для интерфейсов с плотной информацией берут малую терцию 1,2 или большую 1,25: ступени близкие, всё помещается. Для лендингов и статей — кварту 1,333 или квинту 1,5, где заголовок явно доминирует. Золотое сечение 1,618 даёт очень крупные заголовки, на сложных интерфейсах с ним тесно.
Сколько ступеней нужно
Обычно шесть-семь: две-три вниз от базы для подписей и мелочи и три-четыре вверх для заголовков. Больше ступеней — больше соблазн использовать их все, а разница между соседними становится незаметной, и система перестаёт читаться как система.
Почему получаются некруглые числа
Потому что это результат умножения на коэффициент. Округлять до целых пикселей не обязательно и даже вредно: браузер умеет отрисовывать дробные размеры, а округление накапливает ошибку по мере роста шкалы. Записывайте в rem с двумя-тремя знаками.
Как сделать шкалу адаптивной
Построить две шкалы — для узкого и широкого экрана — и свести соответствующие ступени через clamp. Обычно на телефоне берут меньший коэффициент, чем на десктопе: там, где на широком экране заголовок в три раза больше текста, на узком он просто не поместится в строку.
Шкала обязательна для отступов тоже
Не обязательна, и часто вредна. Для отступов удобнее шкала с шагом кратно четырём или восьми: она проще в уме и лучше ложится на сетку. Пропорциональная шкала нужна там, где важна визуальная иерархия, то есть в шрифтах.
Спросите нейросети об инструменте
Похожие инструменты
Перевод line-height между множителем, px, em, % и пунктами. Рекомендация по длине строки, живой абзац и расчёт строк на А4.
ОткрытьКалькулятор CSS clamp()Адаптивный размер по двум точкам без медиазапросов. С графиком роста и проверкой требования доступности о масштабировании.
ОткрытьКроссворды онлайнГотовый кроссворд по теме: шестнадцать наборов от детских слов до городов и стран. Разгадывается прямо на странице с проверкой, подсказками и печатью, каждый раз новая сетка.
ОткрытьТрафарет букв и цифрБуквы, цифры и надписи крупно на листах А4 для вырезания: русский и английский алфавит, свой текст, высота в сантиметрах или буква на лист, автоматические перемычки, режим контура, PDF и печать.
ОткрытьЛоготип онлайнЛоготип из названия и слогана: 34 иконки, 5 раскладок, 8 шрифтов с кириллицей и 10 палитр, 12 готовых вариантов, SVG и PNG.
ОткрытьГенератор ФИОСлучайные русские фамилия, имя и отчество: пол, пять форматов, дата рождения, до 500 строк. Копирование и выгрузка в TXT и CSV.
ОткрытьЕщё генераторы
Пароли и тестовые данные, CSS-градиенты, тени и скругления, clip-path и фильтры, анимации, Flexbox и Grid — в разделе 39 генераторов.