Большая часть информации на сайте передаётся текстом. Описания услуг, характеристики товаров, статьи, условия доставки — всё это нужно прочитать. И от того, как текст оформлен, зависит, прочитают ли его вообще. Мелкий шрифт, слишком длинные строки, слабый контраст — и посетитель устаёт через пару абзацев.
Типографика — это искусство и наука оформления текста. В этой статье разберём основные правила, которые помогают сделать текст на сайте приятным для чтения.
Выбор шрифта
Гарнитуры с засечками и без
Шрифты делятся на две большие группы: с засечками (антиква) и без засечек (гротески). Раньше считалось, что на экране лучше читаются шрифты без засечек, потому что засечки плохо отображались на мониторах с низким разрешением. С появлением экранов высокой плотности это правило стало менее строгим.
Сегодня выбор больше зависит от характера бренда. Шрифты без засечек выглядят современно, нейтрально и технологично. Шрифты с засечками придают тексту солидность, традиционность и редакционный характер.
Количество шрифтов
Хорошее правило — не более двух гарнитур на сайте: одна для заголовков, другая для основного текста. Часто достаточно одной гарнитуры в разных начертаниях. Больше шрифтов создают визуальный шум и замедляют загрузку страницы.
Иногда к основным добавляют моноширинный шрифт для служебных элементов: подписей, меток, технических данных. Это создаёт интересный контраст, если используется сдержанно.
Поддержка кириллицы
Многие красивые шрифты не имеют кириллических символов или имеют их в плохом качестве. При выборе шрифта для русскоязычного сайта обязательно проверьте, как выглядят русские буквы, особенно характерные: ж, ф, щ, ы.
Начертания
Убедитесь, что у шрифта есть нужные начертания: обычное, полужирное, курсив. Если их нет, браузер будет имитировать жирность и наклон, и это выглядит неаккуратно.
Размер шрифта
Основной текст на сайте должен быть достаточно крупным. Для настольных компьютеров обычно используют размер 16–18 пикселей, для мобильных устройств — не меньше 16. Мелкий текст заставляет напрягать глаза, и посетители просто перестают читать.
Заголовки должны заметно отличаться по размеру от основного текста и друг от друга. Хорошо работает модульная шкала, когда размеры заголовков связаны определённым соотношением. Это создаёт гармоничную иерархию.
Интерлиньяж
Интерлиньяж — расстояние между строками. Слишком маленький интерлиньяж делает текст плотным и тяжёлым, глаз путается при переходе на следующую строку. Слишком большой — разрывает текст на отдельные линии.
Для основного текста оптимальный интерлиньяж — примерно в 1,5–1,7 раза больше размера шрифта. Для заголовков его делают меньше, около 1,1–1,3, потому что крупные строки и так хорошо разделены.
Длина строки
Одна из самых частых ошибок — слишком длинные строки. Когда текст растянут на всю ширину широкого монитора, глазу трудно найти начало следующей строки, и чтение становится утомительным.
Комфортная длина строки — примерно 60–80 символов, включая пробелы. Ограничьте ширину текстовых блоков, даже если экран позволяет больше. Пустое пространство по бокам — это не потеря места, а забота о читателе.
Контраст
Текст должен хорошо контрастировать с фоном. Модный светло-серый текст на белом фоне может выглядеть изысканно, но его тяжело читать, особенно на солнце или на старом мониторе.
Для основного текста используйте тёмный цвет на светлом фоне или светлый на тёмном. Приглушённые оттенки допустимы для второстепенной информации — подписей, дат, примечаний.
На тёмных сайтах важно не использовать чисто белый текст на чисто чёрном фоне для длинных статей — слишком резкий контраст тоже утомляет. Лучше немного смягчить оба цвета.
Иерархия
Посетители редко читают страницу целиком. Чаще они просматривают её, выхватывая заголовки, выделения и списки. Хорошая типографическая иерархия помогает быстро понять структуру и найти нужное.
- Заголовки разных уровней отличаются размером и начертанием.
- Подзаголовки разбивают длинный текст на смысловые блоки.
- Списки выделяют перечисления и шаги.
- Выделения полужирным подчёркивают ключевые мысли — но в меру, иначе они теряют силу.
- Цитаты и врезки привлекают внимание к важному.
Выравнивание
Для основного текста на сайте используйте выравнивание по левому краю. Выравнивание по ширине, привычное по печатным изданиям, на сайтах создаёт неравномерные пробелы между словами, потому что браузеры плохо справляются с переносами. Центрирование хорошо для коротких заголовков, но не для абзацев.
Абзацы и отступы
Короткие абзацы читаются легче длинных. Одна мысль — один абзац. Между абзацами нужен отступ, достаточный, чтобы визуально разделить их.
Отступы вокруг заголовков должны быть асимметричными: больше сверху, меньше снизу. Так заголовок визуально «принадлежит» следующему за ним тексту, а не предыдущему.
Типографские мелочи
Аккуратность в деталях заметно повышает качество восприятия текста.
- Кавычки. В русском тексте используются «ёлочки», а не прямые кавычки.
- Тире и дефис. Тире (—) отделяет части предложения, дефис (-) соединяет части слова.
- Неразрывные пробелы. Короткие предлоги и союзы не должны оставаться в конце строки, а число не должно отрываться от единицы измерения.
- Буква ё. Используйте её там, где без неё возможно неверное прочтение.
- Висячие строки. Одно слово на последней строке абзаца выглядит неаккуратно, особенно в заголовках.
Хорошую типографику не замечают. Её замечают только тогда, когда она плохая.
Скорость загрузки шрифтов
Веб-шрифты загружаются вместе со страницей, и тяжёлые шрифты замедляют её отображение. Подключайте только нужные начертания и наборы символов, используйте современные форматы файлов и настройте отображение текста системным шрифтом, пока основной загружается.
Типографика в интерфейсе
Помимо длинных текстов, на сайте много коротких надписей: кнопки, пункты меню, подписи полей формы, метки категорий, цены. Для них действуют свои правила. Надписи на кнопках должны быть короткими и однозначными. Подписи полей — располагаться над полем, а не внутри него, иначе они исчезают при вводе и пользователь забывает, что нужно было написать. Цены и важные числа часто выделяют крупным размером или отдельным начертанием, чтобы они сразу бросались в глаза.
Единообразие здесь особенно важно. Если кнопки на разных страницах оформлены по-разному, а одинаковые по смыслу заголовки имеют разный размер, сайт выглядит небрежно. Поэтому при разработке дизайна собирают набор стилей текста и используют только их.
Проверка на реальных текстах
Типографику нельзя оценить на коротком образце. Пока на макете стоят два-три абзаца, всё выглядит аккуратно. Проблемы проявляются, когда появляется реальный текст: длинные заголовки в три строки, таблицы, списки, вставки с примечаниями. Поэтому мы всегда проверяем стили на настоящих материалах заказчика — статье, описании услуги, карточке товара — и только после этого фиксируем правила оформления.
Итог
Хорошая типографика — это не украшение, а основа удобства сайта. Правильно подобранный шрифт, достаточный размер, комфортный интерлиньяж, ограниченная длина строки, хороший контраст и ясная иерархия делают текст лёгким для чтения.
При разработке дизайна мы уделяем типографике особое внимание и собираем для каждого проекта набор правил оформления текста. Если на вашем сайте тексты читаются тяжело — напишите нам, и мы подскажем, что можно улучшить.