Шрифтовая пара может выглядеть эффектно на коротком макете и перестать работать в длинной статье. Хорошая типографика выдерживает реальные заголовки, разные языки и маленький экран. Начните с содержания страницы, а затем настройте систему, которую можно повторять в новых разделах.
1. Сначала расставьте смысловые акценты
Определите, что человек должен заметить первым, что просмотреть по диагонали и что прочитать внимательно. На странице услуги это могут быть обещанный результат, состав работы и условия. Размеры заголовков должны поддерживать этот порядок.
Соберите небольшой набор стилей: главный заголовок, заголовок раздела, основной текст, подпись и кнопка. Если для каждого нового блока нужен особый размер, проверьте структуру страницы. Возможно, различия создаёт содержание, а дополнительных шрифтовых ролей не требуется.
2. Настройте комфортную строку
Для статьи можно начать с колонки около 60-70 знаков и межстрочного интервала порядка 1,5-1,7, затем проверить чтение в выбранном шрифте. Это рабочая отправная точка, а не универсальная норма. Узкие и широкие гарнитуры ведут себя по-разному.
На телефоне не уменьшайте текст только ради сохранения композиции большого экрана. Проверьте длинные слова, ссылки, числа и списки. Важный признак удобства: после перехода на следующую строку читателю не приходится искать её начало.
3. Проверяйте языки до утверждения шрифта
Наберите имена, валюты, даты и несколько длинных заголовков на всех языках проекта. Убедитесь, что есть нужные символы и начертания. Красивый латинский образец не гарантирует подходящей кириллицы, а запасной шрифт может заметно изменить ритм страницы.
Не фиксируйте переносы только под одну фразу. Сравните короткое английское название и более длинный перевод. Для меню и карточек предусмотрите естественное увеличение высоты, чтобы реальный текст не обрезался ради макета.
4. Загружайте только нужное
Составьте список реально используемых начертаний. Если на странице нужны два веса, загрузка всей семьи может оказаться лишней. Variable fonts позволяют управлять несколькими параметрами внутри одного файла; доступные оси зависят от конкретной гарнитуры. Проверьте результат измерением, а не предположением, что один файл всегда легче.
Настройте подходящий запасной шрифт и посмотрите страницу при медленной загрузке. Текст должен оставаться доступным, а появление основного шрифта не должно разрушать навигацию. Не забудьте проверить лицензию выбранного файла для использования на сайте.
5. Проведите проверку чтением
Прочитайте длинный абзац, увеличьте масштаб и пройдите страницу с клавиатуры. Проверьте контраст основного текста, ссылок и подписей. WCAG 2.2 задаёт проверяемые требования, но рядом с формальной проверкой полезно обычное чтение на нескольких устройствах.
Обратите внимание на спокойные элементы: подпись под картинкой, пояснение ошибки, стоимость мелким кеглем. Часто именно там находится важная информация. Декоративный курсив можно оставить для акцентов, а длинный поясняющий текст лучше оценивать по удобству чтения.
Что сделать дальше
Проверяйте типографику на самой длинной странице и самом сложном переводе. Если система выдерживает их, короткий первый экран будет значительно проще поддерживать.