Типографика на сайте: шрифты, интерлиньяж, длина строки

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

Выбор шрифта: характер и функция

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

Для основного текста сайта мы почти всегда выбираем гротеск или антикву, спроектированные для экрана: с открытыми формами букв, достаточной высотой строчных знаков, хорошо различимыми похожими символами. Проверка простая: наберите «Ill1|0Oо» и «ш щ ц» мелким кеглем. Если знаки сливаются, шрифт не годится для длинных текстов, каким бы красивым он ни был в заголовке.

• Поддержка кириллицы. Многие популярные шрифты имеют кириллицу, нарисованную по остаточному принципу: неудачные «д», «л», «ж», «ф», плохой кернинг. Смотрите на русский текст, а не на латинский образец.
• Полнота начертаний. Для сайта нужны как минимум обычное, полужирное и курсивное начертания. Если шрифт предлагает только один вес, иерархию придётся строить размером и цветом, что ограничивает дизайнера.
• Лицензия. Шрифт должен быть разрешён для использования в вебе. Бесплатные для печати гарнитуры не всегда бесплатны для сайтов.
• Вес файлов. Каждое начертание — отдельный файл. Шесть начертаний двух гарнитур могут добавить к загрузке страницы ощутимый объём и задержать отображение текста.

Сколько шрифтов нужно на сайте

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

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

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

Размер основного текста

Много лет стандартом считались 12–14 пикселей. Сейчас этого мало: экраны стали плотнее, люди читают с телефонов на ходу, аудитория в целом старше, чем принято думать. Мы задаём основной текст от 16 пикселей на мобильных устройствах и 17–18 пикселей на компьютере. Для сайтов, рассчитанных на старшую аудиторию, — ещё крупнее.

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

Цифры в таблице — ориентир, а не закон. Главное правило: между уровнями иерархии должна быть отчётливая разница. Если h3 отличается от основного текста на один пиксель, читатель не воспринимает его как заголовок.

Интерлиньяж: воздух между строками

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

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

Отступы между абзацами

Абзацы на сайте разделяются отступом, а не красной строкой. Отступ должен быть больше интерлиньяжа, иначе граница абзаца незаметна, но не настолько, чтобы абзацы казались отдельными блоками. Обычно это 0,8–1,2 от размера строки.

Отступы вокруг заголовков

Классическая ошибка — одинаковые отступы сверху и снизу заголовка. Заголовок относится к тексту, который идёт после него, поэтому отступ сверху должен быть заметно больше, чем снизу. Тогда заголовок визуально «прилипает» к своему разделу, и структура читается без усилий.

Длина строки: почему 60–75 знаков

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

Комфортная длина строки для основного текста — примерно 60–75 знаков с пробелами на компьютере и 35–45 знаков на телефоне. Это не мода, а следствие того, как работает чтение: в такой строке глаз делает несколько остановок и уверенно возвращается назад.

• Ограничивайте ширину текстовой колонки, даже если макет широкий. Свободное место можно использовать для навигации, врезок или просто воздуха.
• Не выключайте текст по ширине на сайте. Без качественных переносов это создаёт неровные пробелы, «реки» и ухудшает чтение.
• Для коротких текстов в карточках и подписях длина может быть меньше, но не делайте строки из двух-трёх слов: текст начинает рваться.
• Проверяйте длину строки на реальном тексте, а не на «рыбе»: русские слова длиннее латинских, и колонка, которая выглядела удобной, может оказаться тесной.

Иерархия и ритм

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

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

1. Определите базовый размер текста и интерлиньяж.
2. Постройте шкалу размеров заголовков с постоянным коэффициентом, например 1,2 или 1,25.
3. Задайте систему отступов, кратных базовой единице, например 8 пикселям.
4. Опишите стили для всех текстовых элементов: списки, цитаты, таблицы, подписи, ссылки.
5. Проверьте систему на реальных текстах разной длины и на всех размерах экрана.

Мелочи, которые выдают профессиональную вёрстку

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

• Правильные кавычки и тире. «Ёлочки» вместо прямых кавычек, длинное тире вместо дефиса между словами, короткое тире в диапазонах чисел.
• Неразрывные пробелы. Предлоги и союзы не должны висеть в конце строки, а число не должно отрываться от единицы измерения.
• Контраст текста. Светло-серый текст на белом фоне выглядит изящно на макете и нечитаем на дешёвом мониторе под солнцем. Проверяйте контраст инструментами.
• Ссылки. Ссылка в тексте должна отличаться не только цветом, но и подчёркиванием или другим признаком — для людей с нарушениями цветовосприятия.
• Цифры в таблицах. Если шрифт поддерживает моноширинные цифры, используйте их в таблицах цен: столбцы будут выровнены.

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

Вывод

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