Типографическая шкала для сайта - согласованный набор размеров основного текста и заголовков, построенный вокруг базового размера и выбранного шага роста. Чтобы настроить её, оцените контент, шрифт и ширину макета, выберите размер основного текста, сравните коэффициенты, затем проверьте результат на мобильных экранах. Подход помогает подобрать шрифты для сайта и решить, когда типографика сайта требует отдельной услуги.
Опорные решения перед настройкой типографики
- Начинайте с реального контента и ширины текстовой колонки, а не с готовых значений из чужого макета.
- Выберите базовый размер основного текста после проверки выбранного шрифта на целевых устройствах.
- Используйте коэффициент роста как отправную точку: отдельным уровням заголовков разрешено отступать от шкалы.
- Для мобильной версии настройте собственные значения, если крупные заголовки становятся громоздкими или ломают композицию.
- Перед публикацией проверьте переносы, длину строк, межстрочные интервалы и различимость соседних уровней.
С чего начать: контент, шрифт и ширина макета
Шкала пригодится, если на сайте есть несколько типов заголовков, основной текст, подписи и элементы интерфейса, размеры которых должны выглядеть согласованно. Она особенно полезна при обновлении дизайна или запуске новых шаблонов страниц.
Не начинайте настройку, если состав контента и структура страниц ещё меняются: частые изменения заголовков могут сделать проверку бессмысленной. Сначала определите, какие текстовые роли действительно нужны.
Шкала не заменяет полноценную типографическую систему. Если проект включает сложные таблицы, редакторские форматы и множество интерфейсных состояний, зафиксируйте типографика сайта услуги в отдельном задании дизайнеру или разработчику. При намерении дизайн сайта заказать подготовьте примеры страниц и требования к мобильным версиям.
Как выбрать базовый размер основного текста
Базовый размер - отправная точка, от которой рассчитывают остальные значения. Подбирайте размер шрифта для сайта на реальном макете: одинаковое числовое значение может восприниматься по-разному в разных гарнитурах и при разной ширине колонки.
Перед настройкой подготовьте:
- страницу с типичным содержанием, включая длинные абзацы и заголовки;
- выбранный шрифт и его начертания, которые планируется использовать;
- доступ к макету или тестовой версии сайта с настройками стилей;
- представление о ширине текстовой области на компьютере и телефоне.
Увеличьте или уменьшите базовое значение в макете и оцените чтение непрерывного текста. Проверьте, не кажется ли строка слишком плотной, не приходится ли часто возвращаться взглядом и помещается ли нужный объём контента в привычную структуру страницы. Зафиксируйте выбранное значение вместе с межстрочным интервалом.
Сравнение коэффициентов: какую пропорцию роста взять за основу
Коэффициент роста задаёт отношение соседних ступеней шкалы. В таблице приведены иллюстративные примеры: это стартовые варианты для макета, а не универсальные нормы. Для примера взят базовый размер 16 px.
| Подход | Коэффициент | Пример последовательности размеров | Когда проверить |
|---|---|---|---|
| Мягкий рост | 1,2 | 16, 19, 23, 28, 33 px | Когда на странице много заголовков и важно сохранить умеренную разницу между уровнями |
| Умеренный рост | 1,25 | 16, 20, 25, 31, 39 px | Как исходный вариант для проверки контраста между заголовками и основным текстом |
| Выраженный рост | 1,333 | 16, 21, 28, 37, 49 px | Когда макету нужны заметные уровни и достаточно места для крупных заголовков |
-
Составьте список текстовых ролей.
Отметьте основной текст, заголовки разделов, подзаголовки, подписи и служебные элементы. Не создавайте отдельный уровень для каждого единичного случая. -
Выберите коэффициент для черновой шкалы.
Сравните несколько вариантов из таблицы на одном и том же макете. Оцените, дают ли они ясную иерархию без чрезмерно крупных промежуточных заголовков. -
Рассчитайте значения от базового размера.
Умножайте размер предыдущей ступени на выбранный коэффициент и округляйте результат до удобного значения. Запишите итоговые размеры, чтобы команда использовала одну шкалу. -
Примените шкалу к реальному контенту.
Проверьте страницы с короткими и длинными заголовками, списками и абзацами. Если отдельный уровень выглядит неуместно, скорректируйте его, не меняя автоматически всю последовательность. -
Зафиксируйте правила для экранов.
Отдельно укажите, какие размеры сохраняются на мобильных устройствах, а какие уменьшаются или переходят на другую ступень. Проверьте правила на страницах с наиболее длинными заголовками.
Как распределить размеры по уровням заголовков
Назначайте размеры по смысловой иерархии, а не только по формальному тегу. Главный заголовок страницы должен выделяться, заголовки разделов - помогать быстро находить нужный фрагмент, а подзаголовки - обозначать вложенные темы.
Проверьте результат по списку:
- основной текст легко отличить от подписей и вспомогательных элементов;
- главный заголовок страницы визуально заметнее заголовков разделов;
- соседние уровни различаются не только размером, но при необходимости также начертанием и отступами;
- одинаковые по смыслу заголовки имеют одинаковое оформление на разных страницах;
- для каждой ступени есть понятная роль, а не только формальное название;
- длинные заголовки не занимают чрезмерно много места по высоте;
- визуальное оформление не подменяет корректную структуру заголовков в разметке.
Проверка шкалы на мобильных экранах и длинных строках
На узком экране крупные значения могут привести к частым переносам и нарушить ритм страницы. Проверьте макет на мобильной ширине и скорректируйте шкалу там, где заголовки выглядят тесно или вытесняют содержимое.
- Не уменьшайте все размеры пропорционально, не проверив, как выглядит каждый текстовый уровень.
- Не оставляйте крупный заголовок без проверки на длинном названии страницы.
- Не ориентируйтесь только на ширину экрана: тестируйте переносы и фактическую длину строки.
- Не допускайте, чтобы соседние заголовки сливались из-за слишком близких размеров и одинакового оформления.
- Не используйте слишком плотный межстрочный интервал для крупных заголовков.
- Не меняйте одновременно размер, ширину колонки и начертание: так сложнее понять причину улучшения или ухудшения.
- Не проверяйте только главную страницу: включите в тест типичные внутренние страницы и длинный контент.
При необходимости задайте для мобильного макета отдельные значения верхних уровней, сохранив базовый размер основного текста, если он остаётся удобным. Для плавного изменения можно применить адаптивные CSS-значения, но обязательно проверьте минимальный и максимальный размер на поддерживаемых ширинах.
Как оценить читаемость и скорректировать неудачные переходы
Смотрите на страницу целиком и на отдельные фрагменты: шкала должна помогать ориентироваться, а не отвлекать от содержания. Если переход между двумя соседними ступенями не работает, выберите подходящую корректировку:
- Изменить коэффициент. Уместно, если вся шкала кажется слишком плоской или, наоборот, слишком контрастной. Повторно проверьте значения на нескольких типах страниц.
- Скорректировать отдельный уровень вручную. Подходит, когда общий ритм работает, но конкретный заголовок слишком велик или мал для своего назначения.
- Разделить шкалы для широкого и узкого макета. Используйте этот вариант, когда крупные заголовки хорошо выглядят на компьютере, но становятся громоздкими на телефоне.
- Изменить ширину текстовой области или межстрочный интервал. Это стоит проверить, если причина плохой читаемости не в самом размере шрифта, а в длине строки или плотности набора.
После корректировки повторите проверку на тех же страницах и ширинах. Меняйте параметры последовательно и фиксируйте итоговые значения в стилях проекта.
Разбор спорных решений при подборе размеров текста
Нужно ли строго соблюдать выбранный коэффициент?
Нет, коэффициент нужен для формирования последовательной исходной шкалы. Отдельный размер можно скорректировать, если он плохо работает в конкретном макете.
Какой размер выбрать для основного текста?
Проверьте несколько вариантов на выбранном шрифте и реальном контенте. Оцените чтение длинного абзаца на компьютере и телефоне, а затем зафиксируйте подходящее значение.
Стоит ли менять размер основного текста на мобильном экране?
Не обязательно. Сначала проверьте его отдельно; часто достаточно скорректировать крупные заголовки, ширину текстовой области и интервалы.
Можно ли задать размер каждому заголовку вручную?
Можно, если значения остаются системными и задокументированы. Без общих правил оформление быстро становится несогласованным между страницами.
Что делать, если длинный заголовок переносится неудачно?
Проверьте ширину контейнера, размер и межстрочный интервал, затем оцените формулировку заголовка. Не уменьшайте сразу весь текст на странице.
Как проверить, что шкала работает?
Сравните типичные страницы на широком и узком экранах. Заголовки должны помогать считывать структуру, а основной текст - оставаться удобным для последовательного чтения.
Нужно ли учитывать начертание при выборе размеров?
Да: насыщенность и особенности шрифта влияют на визуальный вес текста. Проверяйте размеры вместе с теми начертаниями, которые будут использоваться на сайте.