Как выбрать шрифты для сайта

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

Что шрифт решает на сайте

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

• Читаемость. Человек должен прочитать абзац без усилий — на телефоне и на мониторе, при разном освещении и при разном качестве экрана.
• Иерархия. По начертанию и кеглю видно, где заголовок, где подзаголовок, где подпись к таблице. Это работа шрифта, а не рамок и разделительных линий.
• Узнаваемость. Гарнитура входит в фирменный стиль наравне с цветом и логотипом, и меняют её реже, чем оформление блоков.
• Скорость. Шрифтовые файлы загружаются до отрисовки текста и напрямую влияют на то, когда посетитель увидит содержимое страницы.

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

Сначала читаемость, потом характер

Шрифт мы проверяем на реальном тексте, а не на слове-образце из каталога. Набираем абзац из будущего сайта: с числами, сокращениями, кавычками, длинными словами вроде «делопроизводство». Сразу видно, что в каталоге выглядело выразительно, а в работе мешает.

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

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

Кириллица: где чаще всего подводит

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

• Буква «ё» — есть ли она вообще и не выпадают ли точки за пределы строки.
• Типографские кавычки «ёлочки» и внутренние „лапки«. Их часто просто нет, и вёрстка съезжает на прямые программистские кавычки.
• Длинное тире, неразрывный пробел, знак номера.
• Буквы «д», «л», «ж», «щ» в курсиве: в небрежных шрифтах они принимают латинские формы или выглядят чужеродно.
• Длина строки. Кириллический текст обычно длиннее латинского, и заголовки, свёрстанные по англоязычному макету, начинают переноситься в неудобных местах.

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

Начертания: почему нужно минимум три

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

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

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

Сколько шрифтов брать в проект

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

Размеры, интерлиньяж и длина строки

Рабочие ориентиры для основного текста: 17-19 пикселей на десктопе, межстрочное расстояние 1,6-1,75, длина строки 65-80 знаков. Слишком широкая колонка — частая причина, по которой длинный текст читать тяжело: глазу трудно найти начало следующей строки, и человек перечитывает одно и то же место.

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

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

Подключение и скорость загрузки

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

1. Подключаем только те начертания, которые реально используются в макете. Если полужирный курсив нигде не встречается, файла для него быть не должно.
2. Используем формат woff2 — он заметно легче предшественников и поддерживается всеми актуальными браузерами.
3. Размещаем шрифты на своём сервере. Это быстрее, чем обращение к стороннему сервису, и не зависит от его доступности.
4. Отсекаем ненужные наборы символов. Если на сайте нет греческого или вьетнамского, эти диапазоны из файла убираются.
5. Задаём поведение до загрузки через font-display. Значение swap показывает текст запасным системным шрифтом сразу, а затем подменяет его — содержимое доступно с первой секунды.
6. Прописываем осмысленный запасной ряд в CSS: системная гарнитура, близкая по пропорциям, чтобы при подмене вёрстка не смещалась.

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

Лицензии

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

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

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

Что проверяем при приёмке

Короткий список, по которому мы проходим перед тем, как считать типографику готовой:

1. Полный набор кириллицы во всех подключённых начертаниях, включая «ё» и типографские кавычки.
2. Минимум три начертания в формате woff2, без синтезированных браузером жирного и курсива.
3. Основной текст читается на телефоне при размере 16-17 пикселей.
4. Длина строки в текстовых блоках удерживается в пределах 65-80 знаков.
5. Веб-лицензия допускает коммерческое использование на этом домене.
6. Общий вес подключённых шрифтовых файлов остаётся в разумных пределах — обычно мы держим его около 150-200 килобайт.
7. При отключённой загрузке шрифтов страница остаётся читаемой и не разъезжается.
8. Заголовки и подписи взяты из общей шкалы, а не набраны произвольными значениями.

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