Что это такое
Модульная шкала в типографике — это математически выверенная последовательность размеров шрифта, где каждый следующий шаг получается умножением предыдущего на фиксированный коэффициент. Вместо того чтобы подбирать размеры «на глаз» или брать случайные значения вроде 14, 16, 21, 32, вы строите стройную иерархию заголовков и текста, которая выглядит гармонично в любом контексте. Онлайн-калькулятор автоматизирует этот процесс: вы задаёте базовый размер и выбираете коэффициент — от золотого сечения до музыкальных интервалов — и получаете готовую шкалу для вёрстки.
Как пользоваться
- Укажите базовый размер — обычно это основной размер текста (например, 16px для веб-страниц). В калькуляторе можно ввести значение в пикселях или других единицах.
- Выберите коэффициент — из 12 вариантов: золотое сечение (1.618), кварта (1.333), терция (1.25), квинта (1.5) и другие. Если не уверены, начните с «Major Third» — это беспроигрышный вариант для большинства сайтов.
- Настройте диапазон шкалы — определите, сколько шагов вверх (для заголовков) и вниз (для мелкого текста) вам нужно.
- Изучите визуальное превью — калькулятор покажет, как будет выглядеть иерархия текста. Если заголовки кажутся слишком крупными или мелкими, скорректируйте базовый размер.
- Скопируйте результат — выберите формат вывода: px, rem, em или pt. Калькулятор сгенерирует чистый CSS, SCSS, Tailwind-конфигурацию или JSON — готово для вставки в проект.
Кому и когда пригодится
Инструмент незаменим для веб-дизайнеров и разработчиков, которые создают дизайн-системы или просто хотят навести порядок в типографике. Если вы верстаете landing page, блог или интернет-магазин — модульная шкала избавит от хаоса в размерах шрифтов и сделает страницу визуально сбалансированной.
Калькулятор также полезен на старте проекта, когда нужно быстро определиться с базовым размером и пропорциями. Фрилансеры оценят скорость: вместо ручного подбора — пара кликов и готовый код. Верстальщики, работающие с CSS-препроцессорами, получат SCSS-переменные, а команды, использующие Tailwind, — готовую конфигурацию для типографической системы.
Плюсы и ограничения
Плюсы:
- Экономит часы ручного подбора размеров — всё считается мгновенно.
- 12 проверенных коэффициентов, включая золотое сечение и музыкальные пропорции.
- Мгновенная генерация кода для разных стеков: CSS, SCSS, Tailwind, JSON.
- Визуальное превью помогает оценить результат до внедрения.
- Поддержка rem и em упрощает адаптивную вёрстку.
Ограничения:
- Математическая гармония не гарантирует идеальную читаемость — всегда проверяйте на реальном контенте.
- Для сложных интерфейсов с множеством уровней иерархии может понадобиться ручная подстройка.
- Русская типографика требует проверки: кириллица часто выглядит крупнее латиницы при том же размере.
Частые вопросы
Какой коэффициент выбрать для новичка?
Начните с терции (1.25) или кварты (1.333). Они дают умеренный контраст между уровнями — заголовки заметно выделяются, но не выглядят кричаще. Золотое сечение (1.618) создаёт более драматичную разницу и лучше подходит для акцентных заголовков или лендингов.
Можно ли использовать модульную шкалу для адаптивной вёрстки?
Да, и это одна из сильных сторон подхода. Выведите размеры в rem — тогда при изменении базового размера на разных устройствах вся иерархия масштабируется пропорционально. Достаточно поменять значение на корневом элементе.
Чем modular scale отличается от простого увеличения шрифта?
При линейном увеличении (например, +4px на каждом уровне) шкала быстро ломается: на больших размерах шаг становится незаметным, на маленьких — слишком резким. Модульная шкала использует умножение, поэтому пропорции сохраняются на любом уровне — от 10px до 100px.
Что делать, если стандартные коэффициенты не подходят?
Можно использовать нестандартный множитель — например, 1.414 (квадратный корень из двух) или 1.2. Главное — соблюдать регулярность: все размеры должны получаться умножением на одно и то же число.
Как связать модульную шкалу с сеткой и отступами?
Используйте один и тот же базовый размер для шрифта и для интервалов. Если текст набран с базовым размером 16px, задавайте отступы и поля кратными 8px или 16px. Тогда вертикальный ритм страницы будет единым, и типографика станет частью общей дизайн-системы.