Красивый шрифт и удобный для чтения шрифт — не всегда одно и то же. Читабельность зависит не только от формы букв, но и от размера, интерлиньяжа, длины строки, контраста и того, как текст ведёт себя при увеличении. Доступность идёт дальше: она про то, чтобы текст могли прочитать люди со слабым зрением, дислексией или на плохом экране при ярком свете.
Этот гайд объясняет, что влияет на читаемость шрифта на сайте и как не потерять доступность. Он не про конкретную гарнитуру, а про параметры, которые вы контролируете в вёрстке.
Читаемость и разборчивость — разные вещи
В типографике различают два близких понятия. Разборчивость (legibility) — насколько легко отличить одну букву от другой: не путается ли строчная l с I и цифрой 1, открытые ли формы. Читабельность (readability) — насколько комфортно читать длинный текст: размер, интерлиньяж, длина строки, ритм.
| Свойство | За что отвечает | Где особенно важно |
|---|---|---|
| Разборчивость | Различимость отдельных знаков | Интерфейсы, цифры, короткие подписи |
| Читабельность | Комфорт длинного чтения | Статьи, документация, книги |
Шрифт может быть разборчивым, но неудобным для длинного текста, и наоборот. Поэтому оценивать его нужно в реальной задаче, а не по одному слову.
Что в форме шрифта влияет на чтение
Некоторые признаки гарнитуры напрямую влияют на удобство чтения, особенно в мелком кегле и на экране.
- Высота строчных (x-height): более высокие строчные обычно читаются легче в мелком размере.
- Открытость форм: широкие открытые апертуры у букв c, e, a помогают не путать знаки.
- Различимость похожих знаков: важно, чтобы I, l, 1 и O, 0 не сливались.
- Равномерность ритма: слишком узкие или слишком плотные шрифты утомляют в длинном тексте.
Для русскоязычного текста добавляется отдельная проверка кириллицы: качество форм, наличие Ё/ё и аккуратные метрики. Технический чеклист собран в гайде как проверить кириллический шрифт.
Размер, интерлиньяж и длина строки
Часто проблема не в шрифте, а в его настройке. Три параметра решают больше всего.
| Параметр | Практический ориентир | Почему важно |
|---|---|---|
| Размер основного текста | Обычно 16-19 px на вебе | Слишком мелкий текст тяжело читать и вредит доступности |
| Интерлиньяж | Примерно 1.4-1.6 от размера для абзаца | Плотные строки сливаются, слишком редкие рвут абзац |
| Длина строки | Ориентир 50-75 знаков | Длинные строки трудно возвращать глазом к началу |
Эти значения — не жёсткий закон, а стартовая точка. Их корректируют под конкретный шрифт: у гарнитуры с крупными строчными и высота строки, и кегль ощущаются иначе. О том, как это взаимодействует с выбором пары шрифтов, есть отдельный материал как подобрать пару шрифтов.
Контраст текста и фона
Даже идеальный шрифт нечитаем, если цвет текста сливается с фоном. WCAG задаёт измеримые пороги контраста: минимальный коэффициент 4.5:1 для обычного текста и 3:1 для крупного. Требование описано в WCAG Understanding 1.4.3 Contrast (Minimum).
Практические выводы для типографики:
- бледно-серый текст на белом фоне — частая причина низкого контраста;
- тонкие светлые начертания на светлом фоне особенно рискованны;
- проверяйте контраст и в тёмной теме, а не только в светлой;
- не полагайтесь только на цвет для передачи смысла — это отдельный пункт доступности.
Масштабирование и text spacing
Доступность требует, чтобы текст оставался читаемым при изменении пользователем размера и интервалов. WCAG прямо описывает два таких требования.
- Изменение размера текста: пользователь должен иметь возможность увеличить текст без потери содержимого, критерий 1.4.4 Resize Text.
- Интервалы текста: содержимое не должно ломаться, когда пользователь увеличивает межстрочный, межбуквенный и межсловный интервалы, критерий 1.4.12 Text Spacing.
Отсюда важное правило для вёрстки: задавайте размеры шрифта относительными единицами и проверяйте макет при увеличении. Жёсткие пиксельные высоты кнопок и контейнеров часто ломаются, когда текст становится крупнее — как раз тот случай, что описан в требованиях WCAG.
Дислексия: что помогает, а что миф
Вокруг шрифтов для дислексии много спорного. Специальные гарнитуры существуют, но доказательства их превосходства неоднозначны. Что действительно помогает большинству читателей:
- достаточный размер текста и интерлиньяж;
- умеренная длина строки;
- выравнивание по левому краю без переносов, вместо выключки по ширине с большими пробелами;
- чистый разборчивый шрифт с различимыми знаками;
- хороший контраст без визуального шума.
Общие принципы доступности текста собраны в материалах W3C Web Accessibility Initiative. Главная мысль: базовая типографическая гигиена помогает шире, чем ставка на один специальный шрифт.
Веб-шрифты и доступность загрузки
Доступность — это ещё и то, что видит человек, пока шрифт грузится. Если текст надолго скрывается в ожидании гарнитуры, страдает и удобство, и восприятие. Поэтому стратегия загрузки шрифта — часть читаемости, а не только производительности.
Здесь работают те же приёмы, что и для скорости: свойство font-display, subset и продуманный fallback-стек, чтобы текст оставался видимым и не прыгал. Подробно это разобрано в гайде веб-шрифты без тормозов. MDN описывает поведение управления показом текста в font-display.
Чеклист читаемости и доступности
| Проверка | Что должно быть нормально |
|---|---|
| Размер | Основной текст не мельче комфортного, обычно от 16 px |
| Интерлиньяж | Строки не слипаются и не разбегаются |
| Длина строки | Ориентировочно 50-75 знаков в колонке |
| Контраст | Не ниже порогов WCAG в светлой и тёмной теме |
| Масштабирование | Текст можно увеличить без поломки макета |
| Интервалы | Увеличение text spacing не обрезает содержимое |
| Кириллица | Разборчивые формы, Ё/ё, аккуратные метрики |
| Загрузка | Текст виден во время загрузки шрифта, без скачков |
Итог
Читаемость и доступность шрифта — это в основном не про выбор модной гарнитуры, а про настройку: размер, интерлиньяж, длину строки, контраст и поведение при масштабировании. WCAG задаёт измеримые ориентиры по контрасту, изменению размера и интервалам, а базовая типографическая гигиена помогает всем читателям. Хороший шрифт важен, но по-настоящему доступным текст делает аккуратная вёрстка вокруг него.