📐

Калькулятор модульной шкалы

Рассчитайте пропорциональные размеры шрифтов по модульной шкале

Настройки шкалы

Базовый размер (px)

Стандарт для браузера — 16px

Соотношение (ratio)

Единицы вывода

Ступени: 3 вниз / 8 вверх

Вниз от базы

Вверх от базы

Округление (знаков после запятой)

Чистая кварта: 1.33312 ступеней6.76px — 159.5pxДиапазон: ×23.61

-3

6.76px6.8px

-2

9px9.0px

-1

12px12.0px

База

16px16.0px

21.33px21.3px

28.43px28.4px

37.9px37.9px

50.52px50.5px

67.34px67.3px

89.76px89.8px

119.66px119.7px

159.5px159.5px

Что такое модульная шкала

Модульная шкала — это математическая прогрессия размеров, которая создаёт визуально согласованную типографику и интерфейс. Каждый размер получается умножением базового на коэффициент (например, 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. Пропорциональные отступы создают визуальный ритм и улучшают читабельность макета.

Частые вопросы о модульной шкале

Что такое модульная шкала в типографике?

Модульная шкала — это система размеров, основанная на математической прогрессии. Каждое значение получается умножением предыдущего на постоянное соотношение (ratio). Например, при базе 16px и соотношении 1.5 шкала будет: 16px, 24px, 36px, 54px. Этот принцип заимствован из теории музыки, где гармоничные интервалы описываются простыми числовыми соотношениями. В дизайне модульная шкала обеспечивает визуальную согласованность всех размеров в проекте.

Какое соотношение выбрать для своего проекта?

Выбор зависит от типа проекта. Для интерфейсов с большим объёмом текста (документация, панели управления) выбирайте малую терцию (1.2) или большую секунду (1.125). Для стандартных сайтов — большую терцию (1.25) или чистую кварту (1.333). Для лендингов и маркетинговых страниц — чистую квинту (1.5) или золотое сечение (1.618). Чем меньше соотношение, тем плавнее переход между размерами; чем больше — тем выразительнее контраст.

Какой базовый размер шрифта использовать?

Стандартный базовый размер для веб-страниц — 16px, который является значением по умолчанию во всех браузерах. Для мобильных приложений часто используют 14-16px. Для печатных материалов — 10-12pt. Если ваш основной текст должен быть крупнее (например, для блога), начните с 18-20px. Базовый размер определяет нулевую ступень шкалы, от которой рассчитываются все остальные значения.

Какие единицы измерения лучше — px, rem, em или pt?

Для веб-разработки рекомендуется rem — единица, привязанная к размеру шрифта корневого элемента (html). Она обеспечивает масштабируемость и доступность: пользователь может увеличить шрифт в настройках браузера, и весь макет пропорционально масштабируется. Единица em зависит от родительского элемента, что делает её полезной для компонентов, но сложной для глобальной типографики. Пиксели (px) просты, но не масштабируются. Пункты (pt) используются преимущественно в печатном дизайне.

Можно ли использовать модульную шкалу не только для шрифтов?

Да, модульная шкала — универсальный инструмент для любых пропорциональных величин. Помимо размеров шрифтов, её применяют для отступов (margin, padding), межстрочного интервала (line-height), размеров иконок, ширины колонок, высоты секций, радиусов скругления и даже для задержек анимаций. Единая шкала создаёт визуальный ритм и делает весь дизайн цельным.

Что такое золотое сечение и почему оно есть в калькуляторе?

Золотое сечение (φ ≈ 1.618) — математическая пропорция, которая встречается в природе (раковины, цветы, галактики), архитектуре (Парфенон, собор Нотр-Дам) и искусстве (работы Леонардо да Винчи). Эта пропорция воспринимается человеком как естественная и гармоничная. В модульной шкале золотое сечение создаёт выразительный контраст между размерами, оставаясь при этом визуально сбалансированным. Однако для плотных интерфейсов оно может быть слишком контрастным.

Сколько ступеней шкалы нужно для проекта?

Для типичного веб-проекта достаточно 8-12 ступеней: 2-3 вниз от базы (для мелкого текста, подписей, мета-информации) и 5-8 вверх (для подзаголовков, заголовков H1-H6, акцентных блоков). Для простого лендинга может хватить 6 ступеней. Для сложной дизайн-системы с множеством компонентов может понадобиться 15 и более. Главное — использовать столько ступеней, сколько реально требуется в проекте, не создавая лишних значений.

Полезная информация

Для мобильных экранов выбирайте малое соотношение (1.125–1.25), чтобы текст не становился слишком мелким или крупным.

Для десктопов и широких экранов подойдут более контрастные соотношения (1.333–1.618).

Используйте rem вместо px для лучшей масштабируемости и доступности (accessibility).

Начинайте с 2-3 ступеней вниз от базы и 6-8 вверх — обычно этого достаточно для полноценной системы.

Значения шкалы можно применять не только к шрифтам, но и к отступам, размерам иконок и компонентов.

При сомнениях выбирайте чистую кварту (1.333) — это самый универсальный вариант для веб-проектов.

Проверяйте шкалу визуально: откройте вкладку "Таблица" и оцените, как размеры выглядят в реальном масштабе.

Калькулятор модульной шкалы работает полностью в браузере — все расчёты выполняются на вашем устройстве без отправки данных на сервер.

Инструмент вдохновлён работами Тима Брауна (Tim Brown), Роберта Брингхёрста и концепцией Modular Scale, основанной на музыкальных интервалах. Если вы хотите глубже изучить тему типографических пропорций, рекомендуем книгу Роберта Брингхёрста "Основы стиля в типографике".

Если у вас есть предложения по улучшению калькулятора или вопросы о модульной шкале, обращайтесь через форму обратной связи. Мы регулярно обновляем инструмент и добавляем новые возможности.

Комментарии (1)

Был ли полезен этот инструмент?

Руслан Авдеев (автор проекта)• 1 янв. 2024 г., 00:00

🎉 Спасибо, что используете наши инструменты! Все инструменты на ToolFox полностью бесплатны и постоянно улучшаются. 📝 Пожалуйста, оставляйте комментарии: - Если инструмент работает некорректно - Если есть идеи по улучшению - Поделитесь своим опытом использования 👍 Ставьте лайки/дизлайки - это помогает мне понять, какие инструменты нуждаются в доработке. Я обновляю сайт каждую неделю на основе вашей обратной связи. ⭐ Если вам нравится ToolFox — буду благодарен за отзыв о сайте в Яндекс.Браузере (нажмите на ⋮ → «Оценить сайт» в панели браузера). Это помогает другим людям находить наши инструменты! 😊 Также вы можете написать мне напрямую в Telegram: @avdeevrus Все доработки и улучшения по вашим пожеланиям делаю бесплатно! Благодарю за доверие и использование ToolFox! 🚀