Калькулятор модульной шкалы
Рассчитайте пропорциональные размеры шрифтов по модульной шкале
Настройки шкалы
Стандарт для браузера — 16px
Калькулятор модульной шкалы онлайн — создайте гармоничную типографику за секунды
Модульная шкала (англ. modular scale) — это математический инструмент, который помогает дизайнерам и разработчикам создавать пропорциональные, визуально гармоничные размеры шрифтов, отступов и других элементов интерфейса. Вместо того чтобы подбирать числа вручную, вы задаёте базовый размер и соотношение, а калькулятор модульной шкалы генерирует ряд значений, связанных единой математической закономерностью. Результат — ваша типографика выглядит профессионально, согласованно и эстетически выверенно.
Онлайн-калькулятор модульной шкалы на ТулФокс позволяет быстро рассчитать типографическую шкалу для веб-проекта, мобильного приложения или печатного макета. Инструмент поддерживает 12 предустановленных музыкальных и математических соотношений — от малой секунды (1.067) до октавы (2.0), а также ввод произвольного значения. Вы можете выбрать единицы измерения: пиксели (px), rem, em или пункты (pt), задать число ступеней выше и ниже базы, а также настроить точность округления.
Принцип работы модульной шкалы прост: каждое следующее значение получается умножением предыдущего на выбранное соотношение. Например, при базовом размере 16px и соотношении 1.333 (чистая кварта) ряд будет: 12px → 16px → 21.33px → 28.43px → 37.9px. Такая прогрессия создаёт визуально приятные пропорции, напоминающие музыкальные интервалы и архитектурные каноны.
Калькулятор типографической шкалы (type scale calculator) особенно полезен при создании дизайн-систем. Если вы разрабатываете UI-кит, библиотеку компонентов или стайлгайд, модульная шкала обеспечивает единообразие во всём проекте. Калькулятор генерирует готовый код — CSS-переменные, SCSS-переменные, конфигурацию Tailwind CSS и JSON, который можно использовать в любом стеке технологий.
Зачем нужен расчёт модульной шкалы? Произвольно выбранные размеры шрифтов (14px, 18px, 24px, 36px) выглядят разрозненно. Модульная шкала создаёт единую систему пропорций, которая делает дизайн цельным. Каждый шаг — осмысленный, каждый размер — обоснованный. Дизайнеры используют модульную шкалу для определения не только размеров шрифтов, но и межстрочного интервала (line-height), отступов (margin и padding), размеров контейнеров, высоты секций и других пропорциональных величин.
Инструмент расчёта модульной шкалы на ТулФокс предоставляет три режима просмотра: визуальную диаграмму с полосами пропорций, таблицу с превью текста реальных размеров и секцию с готовым кодом. Каждое значение можно скопировать отдельным кликом. Результаты можно скачать как файл CSS, SCSS или JSON для удобной интеграции в рабочий процесс.
Соотношения в модульной шкале заимствованы из теории музыки. Малая терция (1.2), чистая кварта (1.333), чистая квинта (1.5) — эти числа описывают гармоничные интервалы, которые приятны не только слуху, но и глазу. Золотое сечение (φ = 1.618) — классическая пропорция, встречающаяся в природе, архитектуре и искусстве, — также доступна в калькуляторе. Для проектов, требующих минимального контраста между размерами, подойдут большая секунда (1.125) и малая секунда (1.067), а для выразительных, плакатных макетов — большая секста (1.667), малая септима (1.778) или октава (2.0).
Расчёт размеров шрифтов по модульной шкале может быть использован в различных ситуациях: вёрстка лендинга, разработка интерфейса SaaS-приложения, дизайн электронной книги, создание презентации, проектирование печатного каталога. Во всех этих случаях пропорциональная типографическая шкала улучшает восприятие контента и повышает профессионализм итогового результата.
Ключевые возможности калькулятора модульной шкалы:
- 12 предустановленных музыкальных и математических соотношений (от 1.067 до 2.0)
- Ввод произвольного соотношения для нестандартных задач
- Выбор единиц измерения: px, rem, em, pt
- Настройка количества ступеней вверх (до 15) и вниз (до 6) от базы
- Визуальная диаграмма пропорций и таблица с превью текста
- Генерация готового кода: CSS, SCSS, Tailwind CSS, JSON
- Скачивание файлов .css, .scss, .json для вашего проекта
- Копирование отдельных значений и полного набора в один клик
- Настройка точности округления и базового размера для rem/em
Для кого предназначен инструмент
Калькулятор модульной шкалы создан для веб-дизайнеров, UI/UX-дизайнеров, фронтенд-разработчиков, типографов, графических дизайнеров и всех, кто работает с текстовым контентом и стремится к визуальной гармонии. Независимо от вашего опыта — начинающий дизайнер или опытный арт-директор — этот инструмент ускорит процесс создания типографической системы и поможет принять обоснованные решения по размерам шрифтов, отступов и других пропорциональных величин в вашем проекте.
Как рассчитать модульную шкалу — пошаговая инструкция
Задайте базовый размер шрифта
Введите базовый размер шрифта в пикселях. Стандартное значение для веб-страниц — 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. Пропорциональные отступы создают визуальный ритм и улучшают читабельность макета.
Таблица соотношений модульной шкалы
| Название | Значение | Применение |
|---|---|---|
| Малая секунда | 1.067 | Минимальные различия. Таблицы данных, формы, списки с плотной информацией. |
| Большая секунда | 1.125 | Мягкая шкала. Документация, технические тексты, интерфейсы с большим объёмом текста. |
| Малая терция | 1.200 | Умеренная шкала. Блоги, новостные сайты, мобильные приложения. |
| Большая терция | 1.250 | Классический выбор. Корпоративные сайты, портфолио, контентные проекты. |
| Чистая кварта | 1.333 | Уверенный контраст. Универсальный вариант для большинства веб-проектов. |
| Увеличенная кварта (√2) | 1.414 | Математическая пропорция. Печатная типографика, ISO-форматы бумаги. |
| Чистая квинта | 1.500 | Выразительный контраст. Лендинги, маркетинговые страницы, презентации. |
| Золотое сечение (φ) | 1.618 | Природная гармония. Премиальные проекты, арт-направление, журнальная вёрстка. |
| Октава | 2.000 | Максимальный контраст. Плакаты, постеры, крупноформатная типографика. |
💡 Советы по выбору модульной шкалы
- Для мобильных экранов выбирайте малое соотношение (1.125–1.25), чтобы текст не становился слишком мелким или крупным.
- Для десктопов и широких экранов подойдут более контрастные соотношения (1.333–1.618).
- Используйте rem вместо px для лучшей масштабируемости и доступности (accessibility).
- Начинайте с 2-3 ступеней вниз от базы и 6-8 вверх — обычно этого достаточно для полноценной системы.
- Значения шкалы можно применять не только к шрифтам, но и к отступам, размерам иконок и компонентов.
- При сомнениях выбирайте чистую кварту (1.333) — это самый универсальный вариант для веб-проектов.
- Проверяйте шкалу визуально: откройте вкладку "Таблица" и оцените, как размеры выглядят в реальном масштабе.
Частые вопросы о модульной шкале
Модульная шкала — это система размеров, основанная на математической прогрессии. Каждое значение получается умножением предыдущего на постоянное соотношение (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. Базовый размер определяет нулевую ступень шкалы, от которой рассчитываются все остальные значения.
Для веб-разработки рекомендуется rem — единица, привязанная к размеру шрифта корневого элемента (html). Она обеспечивает масштабируемость и доступность: пользователь может увеличить шрифт в настройках браузера, и весь макет пропорционально масштабируется. Единица em зависит от родительского элемента, что делает её полезной для компонентов, но сложной для глобальной типографики. Пиксели (px) просты, но не масштабируются. Пункты (pt) используются преимущественно в печатном дизайне.
Да, модульная шкала — универсальный инструмент для любых пропорциональных величин. Помимо размеров шрифтов, её применяют для отступов (margin, padding), межстрочного интервала (line-height), размеров иконок, ширины колонок, высоты секций, радиусов скругления и даже для задержек анимаций. Единая шкала создаёт визуальный ритм и делает весь дизайн цельным.
Золотое сечение (φ ≈ 1.618) — математическая пропорция, которая встречается в природе (раковины, цветы, галактики), архитектуре (Парфенон, собор Нотр-Дам) и искусстве (работы Леонардо да Винчи). Эта пропорция воспринимается человеком как естественная и гармоничная. В модульной шкале золотое сечение создаёт выразительный контраст между размерами, оставаясь при этом визуально сбалансированным. Однако для плотных интерфейсов оно может быть слишком контрастным.
Для типичного веб-проекта достаточно 8-12 ступеней: 2-3 вниз от базы (для мелкого текста, подписей, мета-информации) и 5-8 вверх (для подзаголовков, заголовков H1-H6, акцентных блоков). Для простого лендинга может хватить 6 ступеней. Для сложной дизайн-системы с множеством компонентов может понадобиться 15 и более. Главное — использовать столько ступеней, сколько реально требуется в проекте, не создавая лишних значений.
ℹ️ Дополнительная информация
Калькулятор модульной шкалы работает полностью в браузере — все расчёты выполняются на вашем устройстве без отправки данных на сервер. Последнее обновление:
Инструмент вдохновлён работами Тима Брауна (Tim Brown), Роберта Брингхёрста и концепцией Modular Scale, основанной на музыкальных интервалах. Если вы хотите глубже изучить тему типографических пропорций, рекомендуем книгу Роберта Брингхёрста "Основы стиля в типографике".
Если у вас есть предложения по улучшению калькулятора или вопросы о модульной шкале, обращайтесь через форму обратной связи. Мы регулярно обновляем инструмент и добавляем новые возможности.
Комментарии (1)
Загрузка комментариев...
📐Похожие инструменты
Калькулятор CSS clamp()
Генератор адаптивных CSS-значений для font-size, padding, margin и других свойств
CSS Grid калькулятор
Визуальный генератор CSS Grid сеток с live-превью и готовым кодом
Генератор Flexbox CSS
Визуальный конструктор CSS Flexbox раскладок с генерацией кода
Калькулятор соотношения сторон
Рассчитайте пропорции изображения, видео или экрана и масштабируйте с сохранением соотношения сторон
Финансовые продукты
с максимальной выгодой
Подобрали лучшие условия от проверенных банков и финансовых компаний России