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

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

Генератор типографической шкалы превращает базовый размер и модульное соотношение в полную, математически согласованную типографическую шкалу с любым числом более крупных шагов заголовков и более мелких шагов подписей. Помимо самих размеров шрифта он выводит подходящий межстрочный интервал и трекинг для каждого шага, а также необязательное плавное выражение clamp(), интерполирующее между мобильным и десктопным вьюпортом при помощи отдельного мобильного соотношения. Дизайнеры и фронтенд-разработчики используют его для создания типографических токенов дизайн-системы, сохранения согласованных размеров и вставки готового CSS, Sass, Tailwind или JSON. Введите любое своё соотношение или выберите классическое, задайте базовый размер и единицу (px или rem), посмотрите предпросмотр в своём font-family и скопируйте нужный формат.

Как пользоваться Генератор типографической шкалы

1. Введите любое своё соотношение в поле соотношения или выберите классическое, например чистую кварту (1.333), из выпадающего списка пресетов в настройках.
2. Задайте базовый размер; он становится размером основного текста и опорной точкой шкалы.
3. В настройках выберите, сколько более крупных и более мелких шагов создать; более мелкие шаги расположены ниже базы для подписей и мелкого текста.
4. Настройте базовый и плотный межстрочный интервал и трекинг при крупных размерах, и введите font-family, чтобы посмотреть шкалу в своём шрифте.
5. Для адаптивной типографики задайте минимальную и максимальную ширину вьюпорта и мобильное соотношение, чтобы построить плавную шкалу clamp().
6. Переключайте формат вывода между переменными CSS, плавным clamp(), Sass, конфигом Tailwind и JSON, затем копируйте код или размер отдельного шага.

Примеры

соотношение 1.333, база 16px, 5 вверх / 1 вниз

--font-size-2xl: 37.897px; --line-height-2xl: 1.27; --letter-spacing-2xl: -0.017em;

база 16px, соотношение 1.333, мобильное соотношение 1.2, 320-1240px

--font-size-2xl: clamp(27.648px, 24.083px + 1.114vw, 37.897px);

любая шкала, экспорт Tailwind

fontSize: { base: ['16px', { lineHeight: '1.5', letterSpacing: '0em' }] }

Часто задаваемые вопросы

Можно ли использовать своё соотношение, а не только пресеты?

Да. Введите любое число в поле соотношения, например 1.2, 1.5, 1.618 или нестандартное значение вроде 1.45. Выпадающий список пресетов в настройках — лишь ярлык, заполняющий то же поле, и выбор значения, не совпадающего с пресетом, просто показывает «Своё».

Как работают более мелкие (отрицательные) шаги?

Шкала закреплена на базовом размере (шаг 0). Более крупные шаги умножают базу на соотношение, а более мелкие делят, создавая ниже базы размеры подписей и мелкого текста, такие как sm и xs. Укажите в настройках, сколько более крупных и более мелких шагов вам нужно.

Как вычисляются межстрочный интервал и трекинг?

Межстрочный интервал переходит от вашего базового значения при размере текста к более плотному по мере роста текста, а трекинг переходит от нуля у базы к вашему значению для крупных размеров, поэтому крупный акцидентный текст немного плотнее, а мелкий немного свободнее. Обе кривые настраиваются в настройках.

Что такое плавная шкала clamp()?

Она строит для каждого шага font-size: clamp(), который плавно растёт между минимальной и максимальной шириной вьюпорта, используя ваше основное соотношение на максимальной ширине и отдельное мобильное соотношение на минимальной. Чтобы экспортировать, выберите формат вывода CSS clamp().

Отправляются ли какие-либо мои данные на сервер?

Нет. Вся шкала, включая размеры, межстрочный интервал, трекинг и плавные значения clamp(), вычисляется локально в вашем браузере простой арифметикой. Ничего не загружается, поэтому инструмент работает офлайн и сохраняет ваши настройки конфиденциальными.