Типографическая шкала (система размеров шрифта)
Постройте систему размеров заголовков и текста из базового размера и коэффициента, с межстрочными интервалами, предпросмотром и CSS-переменными для копирования
Загрузка инструмента…
Строит размеры шрифта для заголовков, текста и подписей из одного базового размера и одного коэффициента, чтобы размеры на странице были связаны друг с другом. Пригодится в начале работы над сайтом, экраном приложения или шаблоном документа.
Как пользоваться
- Введите «Базовый размер» основного текста в px и выберите «Коэффициент»; «Свой» принимает любое значение от 1,05 до 2.
- В «Округление» оставьте десятичные, округлите до целых px или выровняйте размеры по «Сетка 4 px».
- Задайте «Межстрочный интервал»: «Плотнее для заголовков» уменьшает множитель для крупных размеров; «Везде одинаковый» использует одно значение.
- Введите свой «Текст предпросмотра» и переключайте «Шрифт предпросмотра», чтобы увидеть каждую ступень в реальном размере.
- Нажмите «Копировать CSS-переменные», «Копировать CSS элементов» или «Копировать JSON».
Как это работает
- Размер ступени n = база × коэффициент в степени n. Ступени идут от −2 (xs) до +6 (5xl); ступень 0 — основной текст (p), ступени 1–6 соответствуют h6–h1.
- rem — значение в px, делённое на базовый размер; pt = px × 0,75 (96 px на дюйм).
- При «Плотнее для заголовков» множитель линейно снижается от «Интервал основного текста» при базовом размере до «Интервал заголовков» при трёхкратном базовом размере. «Сетка 4 px» также округляет высоту строки до кратного 4 px.
- Настройки сохраняются в этом браузере до следующего визита.
Частые вопросы
- Какой коэффициент выбрать для сайта?
- 1,2 и 1,25 дают умеренные заголовки, подходящие для длинных статей; 1,333 и выше — крупные, плакатные заголовки. На маленьких экранах обычно лучше смотрится меньший коэффициент.
- Каким должен быть размер основного текста?
- 16 px — значение по умолчанию в браузерах и обычная отправная точка; для длинного чтения используют 17–18 px. Остальная шкала следует за введённой базой.
- Как перевести размеры в rem?
- В таблице rem показан рядом с px. Если задать html базовый размер в px, как делает скопированный CSS элементов, 1rem станет равен базе.
- Какой межстрочный интервал нужен заголовкам?
- Текст обычно около 1,5, крупные заголовки — около 1,1–1,25, чтобы перенесённые строки заголовка не оставляли больших промежутков. Автоматический режим применяет это изменение.