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

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

Какой шрифт подходит для сайта компании?

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

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

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

Шрифт для сайта сначала проверяют на чтение длинного текста с телефона и только потом на соответствие бренду.

Чем отличаются антиква, гротеск и другие классы шрифтов?

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

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

Мнение. Если сомневаетесь, берите гротеск с хорошей кириллицей для всего текста и добавляйте антикву только в заголовки. Обратная схема подходит редакционным сайтам, а не сайтам услуг.

Как сочетать шрифты и сколько начертаний нужно?

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

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

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

Если гарнитура вариативная, все веса живут в одном файле, и выбор между «средним» и «полужирным» не стоит лишнего запроса к серверу.

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

Размеры шрифтов для сайта: базовый кегль и шкала заголовков

Базовый размер основного текста отталкивается от настройки браузера. Если размер не задан, 1em равен размеру шрифта браузера по умолчанию, а он обычно составляет 16px. Делать основной текст мельче этого значения не стоит: на телефоне такой текст приходится увеличивать пальцами.

Задавайте размеры в rem или em, а не в пикселях. Документация MDN прямо называет пиксели недоступными: в некоторых браузерах пользователь не сможет увеличить такой текст через настройки. Единица rem отсчитывается от размера корневого элемента html, поэтому вся шкала меняется вместе с настройкой пользователя.

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

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

Межстрочный интервал, длина строки и контраст

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

Межстрочный интервал задают свойством line-height. Критерий WCAG 1.4.12 требует, чтобы страница не ломалась, когда пользователь увеличивает интервал до 1,5 размера шрифта. Поэтому закладывайте такой интервал сразу: блоки с жёсткой высотой при нём обрезают текст.

Длину строки ограничивают шириной текстового блока. Рекомендация WCAG 1.4.8 уровня AAA — блоки текста не шире 80 символов. Строку длиннее глаз плохо переводит на начало следующей, и читатель теряет место в тексте.

Контраст текста и фона по критерию WCAG 1.4.3 должен быть не меньше 4.5:1. Тонкие начертания и светло-серый текст, популярные в макетах, чаще всего этот порог не проходят. Правило для шрифта простое: чем тоньше штрих, тем темнее должен быть текст.

Факт. Критерий WCAG 1.4.12 требует, чтобы контент не терялся при межстрочном интервале не меньше 1,5 размера шрифта.

Как шрифт влияет на скорость открытия страницы?

Веб-шрифт — файл, который браузер скачивает до того, как покажет текст. Пока файла нет, браузеры на Chromium и Firefox задерживают показ текста до 3 секунд, а Safari ждёт без ограничения. Посетитель видит пустые строки на месте заголовка, а метрики скорости фиксируют позднюю отрисовку.

Поведение настраивают свойством font-display в правиле @font-face. Значение swap показывает текст сразу запасным шрифтом и подменяет его, когда файл догрузится. Если запасной шрифт сильно отличается по ширине, текст при подмене прыгает, поэтому запасной шрифт подбирают похожим по пропорциям. Связь вёрстки и показателей Core Web Vitals подробно разобрана в статье как дизайн влияет на SEO.

Что ещё уменьшает вес шрифтов:

• Формат WOFF2 — по данным web.dev, он сжимает шрифт на 30% лучше, чем WOFF, и поддерживается всеми актуальными браузерами.
• Подмножества символов — сайт может отдавать отдельные файлы для латиницы и кириллицы, и браузер скачает только нужный.
• Меньше начертаний — каждый вес и курсив добавляет файл, а вариативный шрифт заменяет несколько файлов одним.
• Системный шрифт — для основного текста он подходит хорошо и вообще не требует скачивания.

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

Бесплатные, системные и платные шрифты: что с лицензией

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

Три источника шрифтов различаются условиями:

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

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

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

Как проверить шрифт до утверждения макета

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

Что сверить по каждому шрифту:

• Кириллица полностью — есть «ё», «й», «щ» и «ы» во всех начертаниях, а не только в обычном.
• Знаки — ёлочки, длинное тире, знак рубля, номер, знак градуса.
• Цифры — единица не путается со строчной «l», ноль с буквой «О», цифры одной ширины в таблицах.
• Мелкий кегль — подписи под формой и сноски читаются с экрана телефона.
• Жирный и курсив — настоящие начертания, а не искусственный наклон и утолщение браузером.
• Лицензия — разрешено использование на сайте, в нужном числе доменов.

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

С чего начать, если шрифт нужно выбрать сейчас

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

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

Источники

• font-size — MDN Web Docs — Mozilla
• Understanding WCAG: Perceivable — MDN Web Docs — Mozilla
• Рекомендации по использованию шрифтов — Google, web.dev
• Google Fonts для разработчиков — Google