Калькулятор модульной шкалы
Рассчитайте пропорциональные размеры шрифтов по модульной шкале
Инструмент справился с вашей задачей?
Одно нажатие, без регистрации. По ответам мы решаем, какие инструменты дорабатывать первыми.
Ваш ответ здесь будет первым.
Этот инструмент ещё ждёт первого комментария
Нашли приём, остался вопрос или чего-то не хватило — напишите, пригодится следующим. Без почты и пароля · публикуем после проверки, обычно за 1–2 дня
Что такое модульная шкала
Модульная шкала — это математическая прогрессия размеров, которая создаёт визуально согласованную типографику и интерфейс. Каждый размер получается умножением базового на коэффициент (например, 1.25 — major third, 1.618 — golden ratio).
Идею предложил Тим Браун в 2011 году и популяризовал на сайте modularscale.com. Сейчас это стандарт в Material Design, Apple HIG и большинстве дизайн-систем.
Зачем нужна
Произвольные размеры (12, 13, 14, 16, 18 px) часто выглядят «грязно». Модульная шкала даёт гармоничные сочетания, основанные на музыкальных и пропорциональных соотношениях.
Калькулятор генерирует ряд значений для шрифтов, отступов, размеров иконок и любой другой единицы интерфейса.
Дизайн-система SaaS
Команда дизайнеров в SaaS-стартапе создавала свою дизайн-систему. Размеры шрифтов выглядели несогласованно. Они применили модульную шкалу с коэффициентом 1.25 (major third) и базой 16 px — типографика стала визуально стройной.
Выбрали базовый размер 16 px
Применили коэффициент 1.25 для генерации ряда
Получили: 10, 13, 16, 20, 25, 31, 39, 49 px
Дизайн-система стала консистентной, скорость работы выросла.
Факты о модульных шкалах
Идея пришла из музыки: коэффициенты называются как интервалы (perfect fourth, major third, octave).
Золотое сечение (1.618) — самая известная пропорция, встречающаяся в природе и искусстве.
Тим Браун — автор modularscale.com и популяризатор этого подхода в вебе.
Material Design использует модульную шкалу с коэффициентом 1.25 для типографики.
Коэффициент 1.5 (perfect fifth) — самый «спокойный» вариант для контентных сайтов.
Можно использовать две шкалы: одну для шрифтов, другую для отступов.
Таблица соотношений модульной шкалы
| Название | Значение | Применение |
|---|---|---|
| Малая секунда | 1.067 | Минимальные различия. Таблицы данных, формы, списки с плотной информацией. |
| Большая секунда | 1.125 | Мягкая шкала. Документация, технические тексты, интерфейсы с большим объёмом текста. |
| Малая терция | 1.200 | Умеренная шкала. Блоги, новостные сайты, мобильные приложения. |
| Большая терция | 1.250 | Классический выбор. Корпоративные сайты, портфолио, контентные проекты. |
| Чистая кварта | 1.333 | Уверенный контраст. Универсальный вариант для большинства веб-проектов. |
| Увеличенная кварта (√2) | 1.414 | Математическая пропорция. Печатная типографика, ISO-форматы бумаги. |
| Чистая квинта | 1.500 | Выразительный контраст. Лендинги, маркетинговые страницы, презентации. |
| Золотое сечение (φ) | 1.618 | Природная гармония. Премиальные проекты, арт-направление, журнальная вёрстка. |
| Октава | 2.000 | Максимальный контраст. Плакаты, постеры, крупноформатная типографика. |
Совет
Для контентного сайта попробуйте коэффициент 1.25–1.333. Для лендингов с большими заголовками — 1.5–1.618. Для дашбордов — 1.2.
Как рассчитать модульную шкалу — пошаговая инструкция
Задайте базовый размер шрифта
Введите базовый размер шрифта в пикселях. Стандартное значение для веб-страниц — 16px (размер по умолчанию в браузерах). Для мобильных приложений обычно используют 14-16px, для презентаций и печати — 10-12pt. Базовый размер определяет основной текст (body), от которого рассчитываются все остальные размеры.
Выберите соотношение (ratio)
Выберите одно из 12 предустановленных соотношений или введите своё. Для контентных сайтов и приложений рекомендуется малая терция (1.2) или большая терция (1.25) — они дают мягкую, читабельную шкалу. Для посадочных страниц и маркетинговых материалов подойдут чистая кварта (1.333) или чистая квинта (1.5). Золотое сечение (1.618) — универсальный выбор для большинства задач.
Настройте параметры вывода
Выберите единицы измерения (px, rem, em или pt) в зависимости от вашего проекта. Для веб-разработки рекомендуется rem — это обеспечит масштабируемость и доступность. Задайте нужное количество ступеней: обычно 2-3 вниз от базы (для мелкого текста, подписей) и 5-8 вверх (для заголовков разных уровней).
Скопируйте код и используйте в проекте
Просмотрите результат на вкладках: визуальная диаграмма поможет оценить пропорции, таблица покажет превью текста, а секция с кодом даст готовые CSS-переменные, SCSS-переменные, конфигурацию Tailwind CSS или JSON. Скопируйте нужный формат или скачайте файл для интеграции в ваш рабочий процесс.
Примеры использования модульной шкалы
🌐 Дизайн-система для веб-проекта
При создании корпоративного сайта дизайнер выбирает базу 16px и чистую кварту (1.333). Калькулятор генерирует: 9px для мета-текста, 12px для подписей, 16px для основного текста, 21px для подзаголовков, 28px для H3, 38px для H2, 51px для H1. Все размеры математически связаны и создают визуально стройную иерархию заголовков.
📱 Типографика мобильного приложения
Для мобильного приложения разработчик выбирает базу 14px и малую терцию (1.2). Шкала получается компактной: 10px, 12px, 14px, 17px, 20px, 24px, 29px. Небольшое соотношение обеспечивает плавный переход между размерами на маленьком экране, а конвертация в rem упрощает масштабирование под разные устройства.
🎨 Макет лендинга с акцентной типографикой
Для продающего лендинга маркетолог выбирает базу 18px и золотое сечение (1.618). Это даёт выразительный контраст: 7px, 11px, 18px, 29px, 47px, 76px. Крупные заголовки привлекают внимание, а базовый текст остаётся комфортным для чтения. Готовый CSS-код с переменными вставляется в проект за минуту.
📐 Система отступов и пропорций
Модульную шкалу можно использовать не только для шрифтов. Дизайнер задаёт базу 8px (стандартная единица сетки) и большую секунду (1.125). Результат — система отступов: 6px, 7px, 8px, 9px, 10px, 11px, 13px, 14px, 16px, 18px. Пропорциональные отступы создают визуальный ритм и улучшают читабельность макета.
Частые вопросы о модульной шкале
Что такое модульная шкала в типографике?
Какое соотношение выбрать для своего проекта?
Какой базовый размер шрифта использовать?
Какие единицы измерения лучше — px, rem, em или pt?
Можно ли использовать модульную шкалу не только для шрифтов?
Что такое золотое сечение и почему оно есть в калькуляторе?
Сколько ступеней шкалы нужно для проекта?
Полезная информация
Для мобильных экранов выбирайте малое соотношение (1.125–1.25), чтобы текст не становился слишком мелким или крупным.
Для десктопов и широких экранов подойдут более контрастные соотношения (1.333–1.618).
Используйте rem вместо px для лучшей масштабируемости и доступности (accessibility).
Начинайте с 2-3 ступеней вниз от базы и 6-8 вверх — обычно этого достаточно для полноценной системы.
Значения шкалы можно применять не только к шрифтам, но и к отступам, размерам иконок и компонентов.
При сомнениях выбирайте чистую кварту (1.333) — это самый универсальный вариант для веб-проектов.
Проверяйте шкалу визуально: откройте вкладку "Таблица" и оцените, как размеры выглядят в реальном масштабе.
Калькулятор модульной шкалы работает полностью в браузере — все расчёты выполняются на вашем устройстве без отправки данных на сервер сайта.
Инструмент вдохновлён работами Тима Брауна (Tim Brown), Роберта Брингхёрста и концепцией Modular Scale, основанной на музыкальных интервалах. Если вы хотите глубже изучить тему типографических пропорций, рекомендуем книгу Роберта Брингхёрста "Основы стиля в типографике".
Если у вас есть предложения по улучшению калькулятора или вопросы о модульной шкале, напишите в комментариях внизу страницы или нам напрямую: почта и Telegram есть на странице «Контакты».
Комментарии
Этот инструмент ещё ждёт первого комментария
Без почты и пароля · публикуем после проверки, обычно за 1–2 дня
Комментарии — мнения посетителей, прошедшие проверку по правилам сайта.