Типографическая шкала: как выбрать размеры шрифта для заголовков и текста
Когда размеры шрифта подбирают по одному, на странице появляется десяток почти одинаковых размеров, а иерархия перестаёт читаться. Типографическая шкала решает это: вы выбираете начальный размер и шаг, а все остальные размеры получаются из них. Генератор типографической шкалы PaletteDesk строит полный набор размеров заголовков и текста от двух независимых опорных точек, показывает их списком в rem, px и pt и отображает на живой странице в вашей палитре и с вашими шрифтами.
Открыть генератор типографической шкалы
Что такое типографическая шкала?
Типографическая шкала - это последовательность размеров шрифта, в которой каждая ступень получается умножением (или делением) предыдущей на один и тот же коэффициент. Вместо того чтобы выбирать 14, 17, 22 и 29 пикселей на глаз, вы решаете, с чего шкала начинается и как быстро растёт. В итоге иерархия выглядит осознанной: заголовки, подзаголовки, основной текст и подписи связаны друг с другом так же, как ноты в музыкальной гамме.
- Ровный ритм: каждый уровень стоит на одном расстоянии от соседнего, поэтому страница выглядит спокойно, а не случайно.
- Меньше решений: вы задаёте два числа на группу, а не придумываете десять размеров.
- Понятная иерархия: ступени достаточно далеки друг от друга, чтобы различаться с первого взгляда, - так не появляются почти одинаковые 16px и 17px.
Как генератор строит шкалу
У шкалы две независимые опорные точки - для заголовков и для основного текста, у каждой свои размер и шаг:
- Заголовки начинаются с h1 - это ровно размер Title - и идут вниз: h2 равен h1, делённому на шаг, h3 - h1, делённому на шаг в квадрате, и так до h6.
- Основной текст начинается с body large - это ровно размер Body - и идёт вниз так же: body small, label и caption.
- Начертание и интерлиньяж задаются отдельно для каждой группы, поэтому заголовки могут быть плотными и жирными, а основной текст - свободным и обычным.
Поскольку опорные точки раздельные, крупный акцидентный заголовок может стоять над скромным основным текстом, и одна настройка не тянет за собой другую.
Пошагово
- Откройте генератор типографической шкалы. В панели шрифтов внизу экрана появятся контролы Size, Scale, Weight и Line height для Title и Body.
- Выберите шрифты заголовка и текста в той же панели. Шкала использует именно эти шрифты, а доступные начертания зависят от выбранного шрифта.
- Задайте Size и Scale для Title. Size - это размер h1, Scale - шаг между соседними уровнями заголовков.
- Так же задайте Size и Scale для Body. Для чтения с экрана обычный размер основного текста - 16px.
- Посмотрите на список размеров. Переключайте rem, px и pt, введите в тестовое поле свою фразу и проверьте результат в макете Blog/Editorial ниже. Кнопка сброса возвращает всё к значениям по умолчанию.
Как выбрать шаг шкалы
Контрол Scale предлагает восемь классических коэффициентов, названных по музыкальным интервалам. Малые коэффициенты держат размеры близко друг к другу, большие - разводят их сильно.
| Коэффициент | Значение | Характер |
|---|---|---|
| Малая секунда | 1.067 | Очень мягкие ступени; плотные интерфейсы, таблицы данных, мелкий текст |
| Большая секунда | 1.125 | Компактно и спокойно; частый выбор для основного текста |
| Малая терция | 1.2 | Сбалансированно; приложения, дашборды и документация |
| Большая терция | 1.25 | Чёткая иерархия; блоги и маркетинговые страницы |
| Чистая кварта | 1.333 | Уверенный контраст; редакционные макеты |
| Увеличенная кварта | 1.414 | Драматично; лендинги с сильным заголовком |
| Чистая квинта | 1.5 | Смело; крупные заголовки первого экрана и постеры |
| Золотое сечение | 1.618 | Очень драматично; практичными остаются лишь несколько ступеней |
Хорошая отправная точка - малый шаг для основного текста (1.125) и больший для заголовков (1.25 или 1.333); примерно с этого генератор и начинает.
Пример: шкала по умолчанию
С настройками по умолчанию - Title 40px с шагом 1.25 и Body 16px с шагом 1.125 - список размеров выглядит так:
| Роль | px | rem |
|---|---|---|
| h1 | 40 | 2.5 |
| h2 | 32 | 2 |
| h3 | 25.6 | 1.6 |
| h4 | 20.48 | 1.28 |
| h5 | 16.38 | 1.024 |
| h6 | 13.11 | 0.819 |
| body large | 16 | 1 |
| body small | 14.22 | 0.889 |
| label | 12.64 | 0.790 |
| caption | 11.24 | 0.702 |
Генератор показывает px, округлённые до целых; значения выше - без округления. Интерлиньяж заголовков по умолчанию 1.1 при начертании 700, основного текста - 1.6 при начертании 400.
Как использовать шкалу в CSS
Значения в rem считаются от стандартного корневого размера браузера, 16px, поэтому они следуют пользовательским настройкам шрифта. Скопируйте их в CSS-переменные и используйте в стилях:
:root {
--text-h1: 2.5rem;
--text-h2: 2rem;
--text-h3: 1.6rem;
--text-h4: 1.28rem;
--text-h5: 1.024rem;
--text-h6: 0.819rem;
--text-body: 1rem;
--text-small: 0.889rem;
--text-label: 0.79rem;
--text-caption: 0.702rem;
}
h1 { font-size: var(--text-h1); font-weight: 700; line-height: 1.1; }
body { font-size: var(--text-body); font-weight: 400; line-height: 1.6; }Для размеров шрифта на экране лучше rem; значения в pt в основном пригодятся для печатных стилей.
Советы, чтобы шкала работала
- Для длинного чтения держите основной текст на 16px или чуть крупнее; мельче - только для подписей и меток.
- Для крупных заголовков берите более плотный интерлиньяж (около 1.1-1.2), для основного текста - свободнее (1.5-1.7).
- На маленьких экранах и в плотных интерфейсах берите меньший шаг, на просторных редакционных страницах - больший.
- Проверяйте шкалу на реальных заголовках, а не на условном тексте: длинные названия переносятся по-разному на крупных размерах.
- Проверьте и цвета текста: мелкие подписи светло-серым - самая частая причина провала по контрасту.
Размер текста - лишь половина читаемости. Как проверяется контраст - в руководстве по проверке контраста
Часто задаваемые вопросы
Генератор типографической шкалы бесплатный?
Да, он бесплатный и не требует регистрации. Превью в редакционном макете и список размеров доступны всегда; превью Blog Platform реагирует на шкалу с Pro.
Чем отличаются rem, px и pt?
px - CSS-пиксель. rem считается от корневого размера шрифта, по умолчанию 16px, поэтому 1rem равен 16px, а 1.25rem - 20px. pt - типографический пункт для печати: 1px равен 0.75pt. В списке размеров можно переключаться между всеми тремя.
Почему шкалы заголовков и текста раздельные?
Заголовкам и основному тексту обычно нужен разный контраст между ступенями. Раздельные опорные точки позволяют крупному акцидентному заголовку стоять над скромным основным текстом, и одна настройка не тянет за собой другую.
Какой шаг выбрать?
Начните с 1.125 для основного текста и 1.25 для заголовков. Если иерархия кажется плоской, поднимите шаг заголовков до 1.333; если слишком громкой - опустите. Плотным интерфейсам обычно нужны меньшие шаги, чем редакционным страницам.
Можно ли использовать размеры в Tailwind или обычном CSS?
Да. Это обычные размеры шрифта: скопируйте их в CSS-переменные, в конфиг fontSize темы Tailwind или в любой файл дизайн-токенов.
Меняет ли шкала мои цвета или палитру?
Нет. Шкала управляет только типографикой. Превью использует вашу текущую палитру, поэтому размеры текста и цвета видны вместе.
Готовы построить свою шкалу? Открыть генератор типографической шкалы