Генератор типографической шкалы
Создайте модульную шкалу шрифтов из базового размера и коэффициента, с меньшим коэффициентом для мобильных. Предпросмотр с вашим шрифтом и экспорт в CSS, SCSS или Tailwind.
Загрузка: Генератор типографической шкалы…
Ваши файлы не покидают устройство
Как пользоваться: Генератор типографической шкалы
- 1
Откройте «Генератор типографической шкалы» на этой странице. Инструмент загружается прямо в браузере.
- 2
Добавьте файл, текст или значения и настройте параметры.
- 3
Скопируйте или скачайте результат. Ничего не загружается и не хранится.
Об инструменте
Типографическая шкала это набор размеров шрифта, которые растут с одним и тем же коэффициентом, поэтому заголовки, основной текст и подписи выглядят связанными, а не случайными. Этот генератор типографической шкалы рассчитывает шкалу по базовому размеру и коэффициенту, показывает её на реальном тексте в выбранном шрифте и экспортирует размеры в виде кода.
Как создать типографическую шкалу
- Задайте базовый размер, обычно 16px для основного текста.
- Выберите коэффициент: от малой секунды (1.067) до чистой квинты (1.5), золотого сечения (1.618) и больше.
- Задайте число шагов вверх (заголовки) и шагов вниз (мелкий текст).
- Задайте меньший мобильный коэффициент, чтобы заголовки не перегружали маленькие экраны.
- Выберите шрифт и введите пример текста для предпросмотра, затем скопируйте код CSS, SCSS или Tailwind.
Как выбрать коэффициент
| Коэффициент | Название | Ощущение |
|---|---|---|
| 1.125 | Большая секунда | Сдержанно, подходит для плотных приложений |
| 1.2 | Малая терция | Сбалансированно, часто для сайтов |
| 1.25 | Большая терция | Чёткая иерархия для блогов |
| 1.333 | Чистая кварта | Выразительные заголовки |
| от 1.5 до 1.618 | Чистая квинта, золотое сечение | Драматично, для лендингов |
Пример для 16px и 1.25
12.8px, 16px, 20px, 25px, 31.25px, 39.06px, 48.83px. Каждый размер равен предыдущему, умноженному на 1.25.
Советы
- Используйте более мягкий коэффициент на мобильных, например 1.2 на телефонах и 1.333 на десктопе.
- Округляйте размеры до целых или половинных пикселей в итоговых дизайн-токенах.
- Сочетайте размеры с межстрочным интервалом: около 1.5 для основного текста и от 1.1 до 1.25 для крупных заголовков.
- Используйте единицы rem в CSS, чтобы текст учитывал настройку шрифта в браузере пользователя.
Дополните дизайн-систему сеткой из генератора сеток и цветами из генератора цветовых палитр.
Частые вопросы
Что такое модульная типографическая шкала?
Набор размеров шрифта, где каждый размер равен предыдущему, умноженному на один и тот же коэффициент, что даёт единый визуальный ритм.
Какой базовый размер шрифта выбрать?
16px это значение браузера по умолчанию и хорошая база для основного текста на большинстве сайтов.
Какой коэффициент лучше?
Единственно лучшего нет. 1.2 или 1.25 подходят большинству сайтов; 1.125 хорош для плотных интерфейсов; 1.333 и выше дают драматичные заголовки.
Зачем другой коэффициент на мобильных?
Большие коэффициенты делают заголовки огромными на маленьких экранах. Меньший мобильный коэффициент сохраняет иерархию и помещается на экран.
Можно ли экспортировать в Tailwind?
Да. Выберите формат Tailwind, чтобы получить конфигурацию fontSize с вашей шкалой.
Размеры шрифта задавать в px или rem?
В CSS рекомендуется rem, потому что он масштабируется вместе с настройками браузера пользователя. Инструмент может дать значения для использования в rem.