Генератор модульной шкалы шрифтов
Создайте гармоничную типографическую модульную шкалу по базовому размеру шрифта и соотношению (major third, золотое сечение, perfect fifth или свое значение). Получите полную таблицу шагов и готовый код: пользовательские свойства CSS, переменные SCSS, конфигурацию fontSize для Tailwind или JSON.
Ввод
Основа
Эталонный размер для 1rem. Большинство браузеров по умолчанию использует 16px.
Каждый шаг равен предыдущему, умноженному на это соотношение.
Результат
Количество знаков после запятой в выводимых значениях.
Вывод
| Шаг | Размер | Пиксели |
|---|---|---|
| No data yet | ||
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/font-modular-scale-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"baseSize": "16",
"ratio": "1.25",
"customRatio": "1.25",
"unit": "rem",
"decimals": "3",
"exportFormat": "css"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `font-modular-scale-generator` tool (Font Modular Scale Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/font-modular-scale-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор модульной шкалы шрифтов — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Модульная шкала — это последовательность размеров шрифта, в которой каждый шаг равен предыдущему, умноженному на фиксированное соотношение. Вместо того чтобы подбирать размеры текста вручную и надеяться, что они будут смотреться гармонично, вы выбираете один базовый размер и одно соотношение в духе музыкальных интервалов, и каждый заголовок, подзаголовок и подпись попадает в пропорциональный и гармоничный ритм. Этот генератор строит такую шкалу и выдаёт готовый код для CSS, SCSS, Tailwind или JSON.
Как пользоваться
- Задайте базовый размер в пикселях — эталон для
1rem, обычно 16px. - Выберите соотношение. Предустановки — это классические типографические интервалы: от малой секунды (1.067) для плотного интерфейса до золотого сечения (1.618) и октавы (2.0) для ярких editorial-контрастов. Выберите Пользовательское, чтобы задать любое значение от 1,01 до 3.
- Выберите единицу вывода (
rem,emилиpx) и количество знаков после запятой для округления. - Выберите формат экспорта. Таблица шкалы обновляется сразу, а в поле с кодом появляется блок, готовый для вставки в таблицу стилей или конфигурацию.
Шаги называются по привычной схеме Tailwind — xs, sm, base, lg, xl, 2xl … до 6xl — где base это выбранный вами размер, а каждый шаг выше или ниже умножает (или делит) его на соотношение.
Какое соотношение выбрать?
Меньшие соотношения (1.067–1.2) делают размеры близкими друг к другу, что подходит для насыщенных данными дашбордов и страниц с большим объёмом текста. Большие соотношения (1.333–1.618) создают выразительную и явную иерархию, которая хорошо работает на маркетинговых сайтах и в длинных статьях. Если сомневаетесь, большая терция (1.25) — надёжный и универсальный вариант по умолчанию.
Что использовать: rem, em или px?
rem — самый безопасный выбор для доступности: размеры масштабируются вместе с предпочтительным размером шрифта пользователя. em вычисляется относительно родительского элемента, что удобно для самостоятельных компонентов. px фиксирован и предсказуем, но не учитывает настройки масштабирования пользователя, поэтому используйте его только тогда, когда действительно нужен точный размер.
Почему базовый размер всегда 1rem/1em?
Потому что относительные единицы выражаются как кратное базовому значению. На шаге base значение в точности равно 1rem (или 1em); колонка пикселей показывает конкретный размер, в который оно переходит. Переключите единицу на px, чтобы увидеть каждый шаг как абсолютное значение в пикселях.
Можно ли использовать это в проекте Tailwind?
Да. Выберите формат Конфигурация Tailwind (fontSize) и вставьте сгенерированный блок fontSize в theme.extend вашего tailwind.config.js. Ключи совпадают со стандартными именами размеров Tailwind, поэтому существующие утилиты text-lg, text-2xl и подобные начнут использовать новую шкалу.
Конфиденциальность
Всё работает полностью в вашем браузере. Базовый размер, соотношение и сгенерированный код никогда не покидают ваше устройство и не отправляются на сервер.