Интерфейсы и CSSРаботает в браузере

Генератор типографической шкалы

Настройте modular scale для интерфейса и скопируйте CSS variables без анализа шрифтов или внешних библиотек.

Base px + ratio
px и rem output
CSS variables

Онлайн-инструмент

Попробуйте инструмент

Добавьте данные, выберите нужные параметры и получите готовый результат.

Исходные данные

База, pxRatio

Минимальный шагМаксимальный шаг

Результат

--font-size-minus-2: 10.24px;
--font-size-minus-1: 12.8px;
--font-size-0: 16px;
--font-size-1: 20px;
--font-size-2: 25px;
--font-size-3: 31.25px;
--font-size-4: 39.063px;
--font-size-5: 48.828px;

-2: 10.24px / 0.64rem
-1: 12.8px / 0.8rem
0: 16px / 1rem
1: 20px / 1.25rem
2: 25px / 1.5625rem
3: 31.25px / 1.9531rem
4: 39.063px / 2.4414rem
5: 48.828px / 3.0518rem

Ваши данные остаются здесь

Текст и выбранные файлы обрабатываются в текущем браузере и не отправляются на сервер для получения результата.

Проверено: 2026-07-17

Как пользоваться

1
Укажите базовый размер текста в px.
2
Задайте ratio и диапазон шагов.
3
Скопируйте CSS custom properties.

Что умеет инструмент

Шаги от отрицательных размеров до крупных heading values.
Расчёт px и rem относительно выбранной базы.
Генерация custom properties для token layer.

Когда пригодится

Подготовка font-size tokens для UI kit.
Сравнение ratio перед редизайном typography scale.
Быстрая генерация px/rem значений для документации.

Что происходит внутри

Каждый шаг считается как base × ratio^step.

Диапазон ограничен, чтобы output оставался читаемым и предсказуемым.

Вопросы и ответы

Как выбрать ratio?

Начните с 1.2–1.333 для интерфейсов и проверьте результат в реальном layout.

Почему нет line-height?

Line-height зависит от шрифта, длины строк и компонента; здесь генерируются только font-size tokens.