Практическое руководство по читаемой типографике в современном вебе

Почему большинство сайтов читать сложнее, чем должно быть

Средний сайт в 2026 году поставляется с кастомным шрифтовым семейством, тщательно подобранными фирменными цветами и дизайн-системой, которая задает отступы с точностью до пикселя. И все же основной текст — то, за чем большинство посетителей на самом деле пришли, — часто остается размером 14px, в низкоконтрастном сером цвете и набран шрифтом, оптимизированным для заголовков, а не для абзацев.

Это не тирада против дизайнеров. Это напоминание о том, что читаемость — отдельная дисциплина, отличная от визуального дизайна, и они не всегда совпадают. Шрифт, который выглядит резко и выразительно в hero-секции, может утомлять на длине абзаца. Цветовая палитра, которая хорошо смотрится на снимках, может не пройти проверку контраста. Макет, который работает на 27-дюймовом мониторе, может схлопнуться в узкую колонку на мобильном.

Хорошая новость: для читаемой типографики не нужна степень по типографике. Нужно внимание к нескольким переменным, которые оказывают непропорционально большое влияние.

Размер шрифта: больше, чем вы думаете

Самая распространенная ошибка читаемости в вебе — слишком мелкий основной текст. Дизайнеры часто задают основному тексту 14px или 15px, потому что на десктопе это «выглядит чисто», а затем забывают, что значительная часть читателей пользуется телефонами, часто при далеко не идеальном освещении.

Практическая базовая планка для основного текста в 2026 году:

• Desktop: минимум 18px, предпочтительно 20px
• Mobile: минимум 16px, предпочтительно 18px

Эти числа кажутся большими, если вы привыкли к более мелкому набору, но они отражают то, как люди на самом деле читают с экранов. Более крупный текст снижает нагрузку на глаза, улучшает понимание и делает ваш контент доступным для читателей с легкими нарушениями зрения, которые не меняли настройки браузера.

Если ваша дизайн-система требует более мелкий шрифт, протестируйте его на телефоне на солнце. Если приходится щуриться, он слишком мелкий.

Интерлиньяж: дайте тексту пространство для дыхания

Интерлиньяж (line height) — это вертикальное расстояние между строками текста. Слишком плотный — и строки сливаются. Слишком свободный — и глаз теряет связь между строками.

Для основного текста высота строки от 1.5 до 1.7 подходит для большинства гарнитур. Заголовки можно делать плотнее (от 1.1 до 1.3), но основному тексту нужно пространство.

CSS:

body {
  font-size: 18px;
  line-height: 1.6;
}

Это один из самых простых способов быстро улучшить читаемость. Если ваш основной текст сейчас стоит на line-height: 1.2 или использует фиксированное значение в пикселях, измените это сегодня.

Длина строки: короче, чем вы думаете

Оптимальная длина строки для основного текста — от 45 до 75 символов в строке, примерно 8–12 слов. Строки длиннее 90 символов затрудняют возврат взгляда к началу следующей строки. Строки короче 40 символов создают рваный, фрагментированный опыт чтения.

Большинство сайтов ошибаются здесь, позволяя тексту растягиваться на всю ширину viewport, особенно на десктопе. На мониторе шириной 1920px может поместиться более 150 символов в строке, и читать это утомительно.

Решение — max-width для текстового контейнера:

.prose {
  max-width: 65ch; /* 65 characters */
  margin-inline: auto;
}

Единица ch используется недостаточно часто, но идеально подходит для этого: она масштабируется вместе с размером шрифта и примерно соответствует ширине символа.

Контраст: не так просто, как черный на белом

WCAG 2.1 задает минимальное соотношение контраста 4.5:1 для основного текста (уровень AA) и 7:1 для повышенной доступности (уровень AAA). Большинство сайтов проходят это на бумаге, но проваливаются на практике, потому что используют светло-серый текст на белом фоне.

Типичные нарушители:

• #666666 на #FFFFFF (4.54:1, едва проходит)
• #777777 на #FFFFFF (4.47:1, не проходит)
• Любой оттенок светлее #767676 на белом (не проходит)

Если ваша дизайн-система задает "text-secondary" как светло-серый, протестируйте его. WebAIM contrast checker — самый быстрый способ проверить.

Dark mode еще сильнее усложняет ситуацию. Чисто белый текст на чисто черном создает гало (светящийся эффект), из-за которого читать сложнее, чем слегка не белый текст на темно-сером. Лучший подход:

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Выбор гарнитуры: системные шрифты лучше, чем вы думаете

Кастомные веб-шрифты повсюду, но у них есть компромиссы. Они добавляют задержку, увеличивают вес страницы и могут блокировать рендеринг, если загружать их неаккуратно. Для основного текста системные шрифты часто оказываются лучшим выбором.

Надежный стек системных шрифтов в 2026 году:

body {
  font-family: system-ui, -apple-system, 'Segoe UI', 
               Roboto, Helvetica, Arial, sans-serif;
}

Это дает San Francisco на macOS/iOS, Segoe UI на Windows и Roboto на Android — все это хорошо читаемые, профессионально спроектированные гарнитуры, которые загружаются мгновенно.

Если вы все же используете кастомный шрифт для основного текста, выбирайте тот, который создан для длинного чтения, а не для display. Избегайте:

• Сверхтонких или сверхжирных начертаний для основного текста
• Сжатых или расширенных вариантов
• Шрифтов с малой x-height (высотой строчных букв)

Протестируйте выбранную гарнитуру на длине абзаца, прежде чем окончательно ее утвердить.

Адаптивная типографика: плавные шкалы шрифта

Фиксированные размеры шрифта плохо масштабируются между устройствами. Основной шрифт 20px, комфортный на десктопе, может казаться слишком крупным на мобильном.

Плавная типографика использует clamp(), чтобы размер шрифта мягко масштабировался между минимумом и максимумом:

body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

Так размер меняется от 16px на маленьких экранах до 20px на больших, с плавной интерполяцией между ними. Это более изящно, чем брейкпоинты в media query, и адаптируется к любой ширине viewport.

Для полной типографической шкалы (заголовки, основной текст, мелкий текст) инструменты вроде Utopia генерируют плавные шкалы на основе ваших ограничений.

Отступы между абзацами и выравнивание текста

Две небольшие детали, которые важны:

1. Отступы между абзацами: Добавьте пространство между абзацами (margin-block-end: 1em) или используйте красную строку (text-indent: 1.5em), но не оба приема одновременно. Большинство веб-контента использует отступы.

1. Выравнивание текста: Выравнивание по левому краю (или по правому для RTL-языков) почти всегда читается лучше, чем выключка по ширине, которая создает неравномерные пробелы между словами, если не включены переносы. Основной текст, выровненный по центру, трудно читать; его стоит оставлять для коротких фрагментов.

Проверка читаемости на практике

Читаемость не является полностью объективной, но ее можно проверять:

• Прочитайте собственный контент на телефоне при разном освещении
• Запустите аудит доступности Lighthouse, чтобы поймать проблемы с контрастом и размером шрифта (см. как читать отчет Lighthouse без паники для ориентира)
• Попросите человека старше 50 лет прочитать страницу, не меняя настройки
• Проверьте аналитику по bounce rate на страницах с большим объемом текста — если люди быстро уходят, читаемость может быть одним из факторов

Если ваш контент трудно читать, люди не будут его читать. Все настолько просто.

Как это выглядит на практике

Читаемый стиль основного текста в 2026 году может выглядеть так:

.prose {
  font-family: system-ui, sans-serif;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 65ch;
  margin-inline: auto;
}

.prose p {
  margin-block-end: 1.25em;
}

@media (prefers-color-scheme: dark) {
  .prose {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Это покрывает размер шрифта, высоту строки, длину строки, контраст и адаптивное масштабирование примерно в дюжине строк CSS. Это не выглядит захватывающе, но работает.

Когда нарушать правила

Эти рекомендации относятся к основному тексту — абзацам, которые люди читают ради информации. У заголовков, подписей, UI-меток и маркетинговых текстов другие ограничения, и они могут сгибать эти правила.

Но если кто-то пришел на ваш сайт прочитать статью, страницу документации или описание продукта, читаемая типографика не является опцией. Это базовое ожидание.