Дизайн / Типографика
Генератор типографической шкалы (модульная шкала для CSS и Tailwind)
Создайте модульную типографическую шкалу на основе базового размера и коэффициента, например 1.25 или золотого сечения, просмотрите каждый шаг со своим текстом и скопируйте размеры в виде пользовательских свойств CSS или конфигурации fontSize для Tailwind в rem или px.
Генератор типографической шкалы (модульная шкала для CSS и Tailwind): Каждый размер равен базовому размеру, умноженному на коэффициент один раз для каждого шага: при 16 px и большой терции 1.25 размеры выше базового составляют 20, 25, 31.25, 39.06 и 48.83 px, а размеры ниже — 12.8 и 10.24 px. Размеры указаны в px и rem и названы по аналогии с размерами текста Tailwind — от xs до 4xl. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.
- Категория
- Инструменты для разработчиков
- Запуски
- В вашем браузере
- Стоимость
- Бесплатно · без регистрации
- Доступность
- Готово к использованию
Полностью работает в браузере
:root {
--step-5: 3.0518rem;
--step-4: 2.4414rem;
--step-3: 1.9531rem;
--step-2: 1.5625rem;
--step-1: 1.25rem;
--step-0: 1rem;
--step--1: 0.8rem;
--step--2: 0.64rem;
}Каждый шаг — это предыдущее значение, умноженное на соотношение: при базовом размере 16 px и соотношении 1.25 размеры выше составляют 20, 25 и 31.25 px, а ниже — 12.8 и 10.24 px. Небольшие соотношения, например 1.125, подходят для плотных интерфейсов; более крупные, например 1.5, создают больший контраст для заголовков. Значения rem предполагают размер корневого элемента браузера по умолчанию 16 px.
Откуда взялись названия соотношений
Названия происходят из музыкальных интервалов: чистая квинта — это соотношение частот 3 : 2, поэтому типографическая шкала на основе 1.5 увеличивается в той же пропорции, что и ноты, отстоящие на квинту. Модульная шкала Тима Брауна популяризировала эту идею в веб-дизайне.
Золотое сечение, 1.618, даёт очень большие скачки; оно объясняется в калькуляторе золотого сечения.
Округление
Браузеры отображают дробные размеры в пикселях, поэтому значение 31.25 px можно оставить без изменений. Если дизайн-системе нужны целые пиксели, округлите каждый шаг и оставьте значения rem с четырьмя знаками после запятой, как это делает инструмент; другие значения можно преобразовать с помощью конвертера px в rem.
Как пользоваться
- Введите базовый размер и выберите коэффициент.
- Укажите количество шагов вверх и вниз и просмотрите их со своим текстом.
- Скопируйте CSS-переменные или конфигурацию Tailwind.
Конфиденциальность и ограничения
Всё выполняется в вашем браузере.
Похожие инструменты
Часто задаваемые вопросы
Какой коэффициент выбрать?
Для интерфейсов с большим количеством текста и небольших экранов подходят мягкие коэффициенты, например 1.125 или 1.2; для редакционных страниц и лендингов можно использовать 1.333–1.618, чтобы сделать заголовки выразительнее.
Зачем использовать rem?
Размеры в rem учитывают настройку размера шрифта в браузере читателя, поэтому текст увеличивается для людей, которым нужен более крупный шрифт. При преобразовании предполагается стандартный размер корневого шрифта 16 px.
Можно ли сделать размеры адаптивными?
Да: возьмите минимальный и максимальный размеры, которые хотите использовать для шага, и преобразуйте их в выражение clamp() с помощью генератора CSS clamp.
Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен