Типографика заметна только когда сделана плохо: текст просто не читается, и посетитель уходит. Разбираем правила, которые можно проверить самому.
Коротко
- Одного шрифта обычно достаточно.
- Размер проверяют на телефоне.
- Длинная строка мешает читать.
- Выделений должно быть мало.
Сколько шрифтов нужно
| Вариант | Когда уместен |
|---|---|
| Один шрифт с несколькими насыщенностями | Подходит почти всегда |
| Два: заголовки и текст | Когда есть смысл различать |
| Три и больше | Почти никогда |
| Декоративный только в логотипе | Разумное ограничение |
Один шрифт с разными насыщенностями и размерами даёт достаточную иерархию и снимает риск несочетаемости. Добавлять второй имеет смысл, когда заголовки должны звучать иначе, чем основной текст, а не просто «для разнообразия».
Размер и межстрочное расстояние
Открыть страницу на телефоне
Своём, при обычном освещении.
Прочитать абзац, не приближая
Если приближаете — мелко.
Дать прочитать человеку постарше
Самая честная проверка.
Проверить межстрочное
Строки не должны слипаться.
Проверить отличие заголовков
Видно без чтения.
Нормативных размеров шрифта, которые можно подтвердить первоисточником, не существует, поэтому чисел я не называю. Третий шаг заменяет любой норматив: если человек, которому нужны очки для чтения, читает ваш текст с телефона без усилий, размер достаточный.
Длина строки и колонки
| Проблема | Как проявляется |
|---|---|
| Слишком длинная строка | Глаз теряет начало следующей |
| Слишком короткая | Чтение дробится |
| Текст во всю ширину экрана | Читать неудобно на большом мониторе |
| Выключка по формату | Появляются дыры между слов |
| Много колонок текста | Непонятно, куда смотреть |
Проверка без чисел: прочитать пять абзацев подряд на широком мониторе. Если начинаете терять строку, ширина текстового блока слишком велика — ограничение ширины колонки решает это независимо от того, какое именно значение вы поставите.
Иерархия и выделения
Работает
- Заголовки разных уровней различимы
- Полужирный для главного в абзаце
- Списки вместо перечислений через запятую
- Воздух между блоками
Мешает
- Выделено половина текста
- Подчёркивание не у ссылок
- Курсив длинными абзацами
- Прописные буквы во фразах
- Четыре размера заголовков на странице
Первая строка правой колонки обесценивает выделения полностью. Когда выделено много, не выделено ничего: полужирным стоит помечать то, что читатель должен забрать, если прочитает только выделенное. Как оформлять текст — в статье о том, как оформить текст, чтобы его дочитывали.
Контраст текста
| Требование WCAG 2.2 | Значение |
|---|---|
| Обычный текст | Контраст не менее 4,5:1 |
| Крупный текст | Не менее 3:1 |
| Что считается крупным | От 18 пунктов или от 14 пунктов полужирного |
| Элементы интерфейса | Не менее 3:1 |
| Исключения | Неактивные элементы, оформление, логотипы |
Это единственные числа в статье, и они взяты из спецификации. Светло-серый текст на белом фоне — самая частая причина несоответствия: он выглядит аккуратно в макете и не читается на телефоне под солнцем. Проверяется любым проверщиком контраста за минуту; подробнее — в статье про доступность сайта.
Что проверить перед запуском
Прочитать длинную страницу целиком
На телефоне.
Проверить контраст всех текстов
Включая подписи и сноски.
Посмотреть на самый длинный заголовок
Не ломает ли вёрстку.
Проверить шрифт на лицензию
Веб-использование разрешено.
Проверить, что будет без шрифта
Подстановка не должна ломать вид.
Последний шаг забывают почти всегда. Пока внешний шрифт загружается или если он не загрузился, текст показывается подстановочным: если запасной шрифт не указан осмысленно, страница на мгновение выглядит сломанной. Про скорость — в статье про скорость загрузки сайта.
Частые вопросы
Сколько шрифтов использовать на сайте?
Обычно достаточно одного с несколькими насыщенностями. Второй имеет смысл, когда заголовки должны звучать иначе, чем текст, три и больше — почти никогда.
Какой размер шрифта правильный?
Нормативных размеров, подтверждённых первоисточником, не существует. Практическая проверка: человек, которому нужны очки для чтения, читает ваш текст с телефона без усилий.
Какой контраст текста требуется?
По WCAG 2.2 — не менее 4,5:1 для обычного текста и не менее 3:1 для крупного, то есть от 18 пунктов или от 14 пунктов полужирного. Для элементов интерфейса — не менее 3:1.
Что проверить со шрифтами перед запуском?
Лицензию на веб-использование и то, как страница выглядит с подстановочным шрифтом, пока внешний не загрузился.
Сделаем сайт, который приносит заявки
Спроектируем структуру под запросы, соберём и запустим — с учётом SEO с первого дня.
Обсудить разработку
