Типографика сайта: как сделать текст удобным для чтения

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

Что должно получиться

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

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

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

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

Из чего это складывается

Шрифт проверяют в наборе

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

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

В браузере список font-family задаёт несколько вариантов по порядку. В конце обычно указывают общее семейство, например sans-serif или serif, на случай недоступности выбранных шрифтов. Запасной вариант нужен не только на бумаге: посмотрите, не меняются ли переносы и высота блоков настолько, что скрываются важные элементы.

Как это сделать по шагам

1. Соберите реальные образцы. Выберите короткие и длинные тексты, типичные карточки, форму и страницу с большим объёмом чтения. Не ограничивайтесь главной страницей: на ней проблемы длинного набора могут быть незаметны.
2. Настройте основной текст. Подберите шрифт, размер и насыщенность для спокойного чтения. Затем сравните варианты на одном и том же содержании. Иначе трудно понять, помогла ли настройка или просто изменилась длина абзаца.
3. Подберите ширину и высоту строки. Прочитайте несколько абзацев подряд. Если взгляд теряет следующую строку, попробуйте сузить текстовую область или изменить интервал. На телефоне проверьте, не становится ли набор слишком дробным.
4. Выстройте уровни. Отделите заголовок страницы, разделы, подразделы и основной текст. Используйте повторяемые правила, чтобы одинаковые по смыслу элементы выглядели одинаково. Не создавайте новый стиль для каждого блока.
5. Проверьте малые элементы. Посмотрите подписи, сообщения об ошибках, пункты меню и текст в кнопках. Они участвуют в работе с сайтом и тоже должны читаться. Нельзя оценить набор только по большой статье.
6. Проверьте изменение условий. Откройте узкий экран, увеличьте текст, посмотрите запасной шрифт и пользовательские интервалы. Зафиксируйте обрезанные строки, наложения и исчезнувшие действия.
7. Сохраните правила. Запишите стили для основных ролей текста и примеры их применения. Передайте разработчику замечания по поведению блоков. После внедрения повторите проверку в браузере: макет не показывает все особенности отображения.

Как работать с интервалами

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

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

Важна и устойчивость к настройкам посетителя. WCAG 1.4.12 проверяет одновременное изменение высоты строки до значения не менее 1,5 размера шрифта, расстояния после абзаца — не менее 2 размеров, межбуквенного интервала — не менее 0,12 и межсловного — не менее 0,16 размера шрифта. Остальные свойства стилей при этой проверке не меняют; содержание и функции должны сохраняться. Это условия проверки пользовательского изменения, а не требование поставить все эти значения в исходном дизайне.

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

Частые ошибки

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

Задавать жёсткую высоту для любого текста. Длина материалов меняется, а посетитель может увеличить масштаб. Если контейнер не умеет расти, часть содержания пропадёт или наложится на соседний блок. Ограничение высоты требует понятного способа получить полный текст, когда сокращение действительно нужно.

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

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

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

Считать цвет заменой размеру и структуре. Бледная подпись не становится менее важной для человека только потому, что дизайнер сделал её второстепенной. Если текст нужен для решения, он должен читаться. Проверка сочетаний цветов — отдельная задача, которую следует выполнить после настройки набора.

Как проверить

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

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

Записывайте дефекты конкретно: страница, ширина экрана, способ увеличения, элемент и потерянное содержание. Формулировка «шрифт неудобный» почти не помогает исправлению. А замечание «после увеличения последняя строка условия скрывается за действием» показывает, где искать причину.

Технические детали описаны в справочнике MDN по font-family и line-height. Условия проверок приведены у W3C: изменение интервалов и увеличение текста.

Начальный порядок экранов удобно проверить в прототипе сайта, а связь оформления с задачей — в разборе UI и UX. Если требуется помощь с системой текстовых стилей, опишите образцы страниц и разместите задачу в разделе дизайна сайтов.

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

Вопросы и ответы

Какой размер шрифта подходит любому сайту?

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

Шрифт без засечек всегда удобнее?

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

Зачем проверять запасной шрифт?

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

Нужно ли ставить интервалы WCAG сразу в дизайне?

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

Можно ли заменить заголовок картинкой?

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

Что передать разработчику после настройки типографики?

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