Если убрать с сайта фотографии, иконки и цветовые плашки, останется текст. Именно он несёт основную информацию, и именно с ним посетитель проводит больше всего времени. Поэтому типографику мы считаем фундаментом дизайна, а не финальной полировкой. Неудачный шрифт или слишком плотные строки способны испортить даже самый продуманный макет.
В этой статье — без теории каллиграфии и истории гарнитур. Только то, что напрямую влияет на читаемость и восприятие сайта: выбор шрифта, размеры, межстрочное расстояние, длина строки и иерархия.
Выбор шрифта: сначала техника, потом характер
Первый фильтр при выборе шрифта для русскоязычного сайта — качество кириллицы. Многие красивые латинские гарнитуры имеют кириллицу, нарисованную по остаточному принципу: неудачные «ж», «ф», «д», странные пропорции, проблемы с кернингом. На заголовке из трёх слов это может быть незаметно, но в абзаце текста глаз начинает спотыкаться.
Что мы проверяем, прежде чем предложить шрифт заказчику:
- Полнота набора. Есть ли «ё», кавычки-ёлочки, длинное тире, знак рубля, нужные символы для цен и единиц измерения.
- Начертания. Нужны хотя бы обычное, полужирное и курсив. Если шрифт существует только в одном весе, выстроить иерархию будет сложно.
- Цифры. Для интернет-магазинов и таблиц важны моноширинные цифры, чтобы цены выравнивались по столбцам.
- Поведение на экране. Шрифт должен хорошо выглядеть на обычных мониторах и в мелком кегле на телефоне, а не только на дизайнерском дисплее высокой плотности.
- Лицензия. Можно ли использовать шрифт на сайте, есть ли ограничения по просмотрам или доменам.
Только после этого мы говорим о характере. Гротески без засечек звучат нейтрально и современно. Шрифты с засечками добавляют солидности и подходят для изданий, юридических и финансовых компаний. Геометрические гротески выглядят технологично, гуманистические — мягче и дружелюбнее. Акцидентные шрифты с ярким характером оставляем для крупных заголовков и логотипа, но не для основного текста.
Сколько шрифтов нужно сайту
Короткий ответ: один или два. Одна гарнитура с несколькими начертаниями решает задачи большинства сайтов. Вторую добавляем, если нужен контраст — например, шрифт с засечками для заголовков и гротеск для текста, или наоборот.
Три и больше шрифтов почти всегда выглядят хаотично. Кроме того, каждый файл шрифта — это дополнительные килобайты и задержка загрузки. На одном проекте, который пришёл к нам на доработку, мы насчитали семь подключённых гарнитур в двенадцати начертаниях. Половина из них использовалась в одном-двух местах. После чистки страница стала загружаться заметно быстрее, а визуально ничего не потеряла.
Размер основного текста
Долгое время стандартом для веба считался размер 14 пикселей. Сейчас это слишком мелко: экраны стали больше, люди читают с телефонов на ходу, а аудитория многих сайтов — не только молодые пользователи с идеальным зрением. Мы используем базовый кегль 16–18 пикселей на десктопе и не меньше 16 на мобильных устройствах.
Важный нюанс: у разных шрифтов разный визуальный размер при одинаковом кегле. Это зависит от высоты строчных букв. Один гротеск в 16 пикселей выглядит как другой в 18. Поэтому размер подбирается не по цифре, а глазами, на реальном тексте и на разных экранах.
Шкала размеров
Чтобы заголовки разных уровней выглядели согласованно, мы строим модульную шкалу. Берём базовый размер и умножаем его на постоянный коэффициент. Например, при базе 16 и коэффициенте 1,25 получится последовательность примерно 16, 20, 25, 31, 39, 49. Такая шкала даёт ритм: каждый следующий уровень заметно крупнее предыдущего, но без случайных скачков.
| Элемент | Десктоп | Мобильный |
|---|---|---|
| Заголовок страницы | 40–56 px | 28–34 px |
| Заголовок раздела | 28–36 px | 22–26 px |
| Подзаголовок | 20–24 px | 18–20 px |
| Основной текст | 16–18 px | 16–17 px |
| Подписи, мелкий текст | 13–14 px | 13–14 px |
Это ориентиры, а не правило. На имиджевом сайте заголовок может быть огромным, на сервисе с таблицами — сдержанным. Главное, чтобы шкала соблюдалась на всех страницах.
Интерлиньяж: воздух между строками
Межстрочное расстояние, или интерлиньяж, — один из самых недооценённых параметров. Слишком плотные строки сливаются в серое пятно, глазу тяжело переходить на следующую строку. Слишком разреженные распадаются на отдельные полосы, и текст перестаёт читаться как единое целое.
Для основного текста мы задаём интерлиньяж в пределах 1,5–1,7 от размера шрифта. Для заголовков — меньше, 1,1–1,3, потому что крупные строки и так хорошо разделены визуально, а большой интерлиньяж делает многострочный заголовок рыхлым.
Простой тест: прищурьтесь и посмотрите на абзац. Если строки сливаются — добавьте воздуха. Если видите полосатую «зебру» — уберите.
Интерлиньяж связан с длиной строки. Чем длиннее строка, тем больше нужно расстояние между строками, чтобы глаз не терял начало следующей. И наоборот: в узких колонках на телефоне можно немного уменьшить межстрочный интервал.
Длина строки
Оптимальная длина строки для комфортного чтения — 50–75 знаков, включая пробелы. Если строка короче, глазу приходится слишком часто перепрыгивать, текст становится рваным. Если длиннее — сложно найти начало следующей строки, и читатель теряется.
На широких мониторах это частая проблема: текст статьи растягивается на всю ширину экрана, и одна строка вмещает полтораста знаков. Решение простое — ограничить ширину текстового блока. В вёрстке это делается одним параметром, а читаемость меняется кардинально.
Выравнивание
Для веба мы почти всегда используем выравнивание по левому краю. Выравнивание по ширине в браузерах работает без нормальной расстановки переносов и создаёт неровные пробелы — «реки», которые бегут через абзац. По центру можно выравнивать короткие заголовки и подписи, но не многострочный текст.
Иерархия и ритм
Типографика — это не только отдельные параметры, но и отношения между элементами. Посетитель должен с первого взгляда понимать, где заголовок, где подзаголовок, где основной текст, а где второстепенная подпись. Для этого используется несколько инструментов:
- Размер. Самый очевидный способ выделить главное.
- Насыщенность. Полужирное начертание при том же размере тоже создаёт иерархию.
- Цвет и контраст. Второстепенный текст можно сделать серым, но с достаточным контрастом к фону.
- Отступы. Расстояние перед заголовком должно быть больше, чем после него. Так заголовок визуально «принадлежит» следующему за ним тексту, а не предыдущему.
- Регистр. Прописные буквы подходят для коротких меток и кнопок, но с небольшой разрядкой. Длинные фразы капсом читаются плохо.
Не нужно использовать все инструменты сразу. Если заголовок и крупный, и жирный, и цветной, и подчёркнутый — это перебор. Обычно хватает двух признаков.
Мелочи, которые выдают небрежность
Есть типографские детали, которые обычный посетитель не замечает сознательно, но они формируют ощущение аккуратности или, наоборот, неряшливости.
- Кавычки «ёлочки» вместо прямых машинописных.
- Длинное тире в предложениях вместо дефиса.
- Неразрывный пробел между числом и единицей измерения, между инициалами и фамилией, после коротких предлогов, чтобы они не повисали в конце строки.
- Висячие строки — одно слово на последней строке абзаца или заголовка.
- Одинаковое оформление ссылок по всему сайту.
Часть этих правил можно автоматизировать через типограф в CMS, часть требует внимания редактора. Но вместе они создают впечатление, что над сайтом работали профессионалы.
Вывод
Хорошая типографика незаметна: человек просто читает и не устаёт. Чтобы этого добиться, выбирайте шрифт с качественной кириллицей и нужными начертаниями, ограничивайтесь одной-двумя гарнитурами, задавайте основной текст от 16 пикселей, держите интерлиньяж около 1,5, а длину строки — в пределах 75 знаков. Стройте шкалу размеров и соблюдайте её на всех страницах.
Типографику мы прорабатываем в начале любого проекта разработки дизайна: сначала собираем текстовые стили, а уже потом раскладываем на них блоки. Такой порядок экономит время и даёт сайту цельность, которую невозможно получить, подбирая шрифты в последний момент.
