Генератор типографічної шкали

Що таке Генератор типографічної шкали?

Генератор типографічної шкали перетворює базовий розмір і модульне співвідношення на повну, математично узгоджену типографічну шкалу з будь-якою кількістю більших кроків заголовків і менших кроків підписів. Окрім самих розмірів шрифту, він виводить відповідний міжрядковий інтервал і трекінг для кожного кроку, а також необов'язковий плавний вираз 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(), обчислюється локально у вашому браузері простою арифметикою. Нічого не завантажується, тож інструмент працює офлайн і зберігає ваші налаштування конфіденційними.