Типографика и читаемость веб-текста

Можно написать блестящий текст и потерять большинство читателей ещё до второго абзаца. Мелкий серый шрифт на белом фоне, строки во всю ширину монитора, сплошные простыни без воздуха — и человек закрывает вкладку, даже не попытавшись вникнуть. Он не думает «плохая типографика», он просто чувствует, что читать тяжело, и уходит.

Типографика — это не украшательство и не вкусовщина дизайнеров. Это набор вполне измеримых параметров, от которых зависит, насколько легко глаз проходит по тексту. Для сайта это напрямую связано с поведенческими метриками: временем на странице, глубиной прокрутки, процентом дочитываний. А значит, и с позициями в поиске.

Разберём ключевые параметры читаемости веб-текста, правила русской типографики, которые часто нарушают, и приёмы структурирования, превращающие стену текста в удобный для чтения материал.

Почему читаемость влияет на SEO

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

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

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

Размер шрифта

Самая частая ошибка — слишком мелкий основной текст. Когда-то стандартом считались 12–13 пикселей, сегодня это неприемлемо мало: экраны стали больше, разрешения выше, а люди читают с телефона на ходу.

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

Межстрочный интервал и абзацы

Межстрочный интервал — расстояние между строками — определяет, насколько легко глазу перейти с конца одной строки на начало следующей. Слишком плотный интервал заставляет строки слипаться, слишком широкий — разрывает текст на отдельные полоски.

Для основного текста оптимальны значения от 1,5 до 1,7 от размера шрифта. Для заголовков интервал, наоборот, уменьшают до 1,1–1,3, иначе многострочный заголовок рассыпается.

Абзацы отделяйте отступом сверху или снизу, примерно равным одной строке или чуть меньше. В вебе не принято использовать красную строку — достаточно вертикального пространства. Совмещать оба способа не нужно.

Длина абзаца

На экране длинный абзац выглядит гораздо тяжелее, чем на бумаге. Оптимально — три-пять предложений, или четыре-семь строк на десктопе. На мобильном тот же абзац превращается в десяток строк, поэтому лучше лишний раз разбить мысль, чем оставить монолит. Однострочные абзацы допустимы для акцента, но если ими злоупотреблять, текст становится рваным.

Длина строки

Один из самых недооценённых параметров. Если строка слишком длинная, глаз устаёт проходить её целиком и теряет начало следующей. Если слишком короткая — приходится постоянно перескакивать, и чтение становится дёрганым.

Комфортная длина строки для основного текста — от 55 до 80 символов с пробелами, оптимум около 65–70. На практике это означает, что колонка текста на широком мониторе должна быть ограничена по ширине — примерно 650–750 пикселей при стандартном размере шрифта.

На мобильных длина строки ограничена шириной экрана, и там обычно получается 35–45 символов. Это нормально, но значит, что поля по бокам не должны быть слишком большими — иначе строка станет совсем короткой.

Контраст и цвет

Модная тенденция — светло-серый текст на белом фоне. Выглядит элегантно на макете дизайнера, но читать такой текст тяжело, особенно на дешёвых мониторах, при ярком солнце или людям с неидеальным зрением.

• Основной текст должен быть тёмным: чёрным или почти чёрным, например тёмно-серым с высокой насыщенностью.
• Минимальное соотношение контрастности для основного текста — 4,5:1, для крупных заголовков — 3:1. Эти значения взяты из стандартов доступности веб-контента.
• Чистый чёрный на чистом белом иногда кажется слишком резким при долгом чтении — можно немного смягчить один из цветов, не уходя в бледность.
• Тёмная тема требует отдельной настройки: светлый текст на тёмном фоне визуально кажется жирнее, поэтому иногда нужен чуть больший межстрочный интервал и более светлый, но не белоснежный цвет текста.
• Не передавайте смысл только цветом: ссылки должны отличаться не только оттенком, но и, например, подчёркиванием.

Выбор шрифта

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

1. Полная поддержка кириллицы. Многие красивые шрифты имеют кириллицу, нарисованную по остаточному принципу: неровные буквы, плохой кернинг, отсутствие ё или длинного тире.
2. Достаточный набор начертаний. Как минимум обычное, полужирное и курсив. Если курсива нет, браузер сгенерирует искусственный наклон, который выглядит плохо.
3. Различимость похожих знаков. Буквы и цифры не должны путаться: строчная «л» и «п», единица и строчная латинская «l».
4. Вес файла. Каждое подключённое начертание замедляет загрузку. Обычно достаточно двух-трёх начертаний одной гарнитуры.
5. Не больше двух гарнитур. Одна для заголовков, одна для текста — или вообще одна. Пять разных шрифтов на странице создают визуальный шум.

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

Структура и иерархия

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

Заголовки

Заголовки должны быть информативными — по ним одним человек должен понять содержание разделов. «Введение», «Основная часть», «Разное» ничего не сообщают. «Как выбрать размер шрифта» — сообщает. Соблюдайте иерархию: h2 для разделов, h3 для подразделов, без пропусков уровней.

Отступ перед заголовком должен быть заметно больше, чем после него. Так заголовок визуально привязывается к своему разделу, а не висит между двумя.

Списки

Перечисления из трёх и более пунктов почти всегда лучше оформлять списком. Нумерованный — если важен порядок или количество, маркированный — если нет. Пункты списка должны быть грамматически однородными и примерно одинаковыми по длине.

Выделения

Полужирное начертание помогает выделить ключевые мысли при сканировании, но только если его мало. Когда выделена половина текста, не выделено ничего. Курсив хорош для терминов, названий и мягких акцентов. Подчёркивание в вебе оставьте ссылкам. ЗАГЛАВНЫЕ БУКВЫ для длинных фраз читаются плохо — используйте их разве что для коротких меток.

Таблицы, цитаты, заметки

Сравнения и наборы параметров — в таблицы. Важные предупреждения — в выделенные блоки-заметки. Цитаты и ключевые выводы — в оформленные цитаты. Такие элементы разбивают монотонность текста и служат ориентирами при прокрутке.

Правила русской типографики

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

• Кавычки. Основные — «ёлочки», вложенные — „лапки“. Прямые кавычки-«палочки» — признак текста, набранного наспех.
• Тире и дефис. Дефис соединяет части слова: «из-за», «кто-то». Длинное тире — знак препинания между словами, отбивается пробелами: «текст — это инструмент». Для диапазонов чисел используется короткое тире или многоточие без пробелов: «5–7 дней».
• Неразрывные пробелы. Предлоги и союзы из одной-двух букв не должны висеть в конце строки, число не должно отрываться от единицы измерения, инициалы — от фамилии. Для этого используют неразрывный пробел.
• Буква ё. Её употребление в веб-текстах желательно: она снимает неоднозначность и помогает поиску правильно распознавать слова.
• Многоточие. Один символ многоточия или три точки — главное, единообразно по всему сайту.
• Числа. Разряды в больших числах отбиваются неразрывным пробелом: 10 000, а не 10000 и не 10,000. Десятичный разделитель — запятая.

Многие системы управления сайтом умеют автоматически расставлять типографские символы. Если такой функции нет, существуют плагины и онлайн-типографы, которые обрабатывают текст перед публикацией.

Мобильные устройства

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

Убедитесь, что основной текст не меньше 16 пикселей, поля по бокам достаточные, но не огромные, таблицы не вылезают за пределы экрана — их можно сделать прокручиваемыми по горизонтали внутри блока или перестроить в карточки. Ссылки и кнопки должны быть достаточно крупными для нажатия пальцем, с расстоянием между ними. Длинные заголовки на мобильном лучше слегка уменьшать, чтобы одно слово не занимало целую строку.

Отдельно проверьте, не перекрывают ли текст всплывающие окна, баннеры и закреплённые панели. Половина экрана, занятая липким меню и кнопкой чата, уничтожает любую типографику.

Чек-лист читаемости

Перед публикацией статьи или запуском нового шаблона пройдитесь по короткому списку:

1. Основной текст не меньше 16 px на мобильных и 17 px на десктопе.
2. Межстрочный интервал 1,5–1,7.
3. Ширина колонки ограничена, строка — 55–80 символов.
4. Контраст текста и фона достаточный, никакого бледно-серого.
5. Абзацы не длиннее пяти-семи строк.
6. Заголовки информативные, иерархия соблюдена.
7. Перечисления оформлены списками, сравнения — таблицами.
8. Кавычки-ёлочки, длинные тире, неразрывные пробелы на месте.
9. Текст удобно читать на телефоне без масштабирования.

Итог

Типографика решает, дочитают ли ваш текст. Размер шрифта, интервалы, длина строки, контраст и структура — это не мелочи для эстетов, а условия, при которых содержание вообще может дойти до читателя. Хорошая новость в том, что большинство параметров настраиваются один раз в шаблоне и затем работают на все материалы сайта.

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