Шрифт для сайта: как выбрать и не нарушить лицензию

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

На что смотреть при выборе шрифта

Что проверить	Как проверить	Тревожный знак
Читаемость	Набрать абзац своего текста размером 16 пикселей и открыть на телефоне	Буквы слипаются, тонкие линии пропадают
Высота строчных	Сравнить с другими шрифтами того же размера	Текст выглядит мельче, чем у соседей
Кириллица	Панграмма, свои тексты, курсив	Отдельные буквы шире или темнее остальных
Набор знаков	«ё», «№», «ёлочки», длинное тире	Знак подставлен из другого шрифта
Начертания	Список файлов в семействе	Нет нужной жирности или курсива
Лицензия	Текст лицензии у автора или словолитни	«Только для личного использования» или автор неизвестен
Права на сайт	Разрешено ли подключать шрифт к сайту	Есть только десктопная лицензия

Как выбрать шрифт, который читается на телефоне

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

• Размер. Основной текст на телефоне набирают от 16 пикселей — почему не меньше, объяснили в статье про адаптивный дизайн. Но 16 пикселей у разных шрифтов выглядят по-разному.
• Высота строчных. Это высота букв вроде «н» и «о» по сравнению с заглавными. Чем она больше, тем крупнее и разборчивее текст при том же размере. Шрифт с низкими строчными придётся ставить крупнее.
• Межстрочный интервал. Для основного текста — примерно в полтора раза больше размера шрифта. Крупным заголовкам нужно меньше, иначе строки разъезжаются.
• Длина строки. Классический ориентир типографики — 45–75 знаков с пробелами. На широком экране колонку текста ограничивают, иначе глаз теряет начало следующей строки.
• Толщина линий. Тонкие начертания красивы в крупном заголовке, а в основном тексте пропадают на недорогих экранах и на солнце.
• Различимость знаков. Цифра 3 не должна путаться с буквой «з», ноль — с «О», единица — с латинскими l и I.

Кириллица: как понять, что она качественная

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

• буквы, которых нет в латинице, — «Ж», «Д», «Л», «Ф», «Ы», «Щ» — шире или темнее соседних, и в абзаце появляются пятна;
• кратка над «й» и точки над «ё» грубые или лезут на строку выше;
• курсив — просто наклонённые прямые буквы, хотя в шрифтах с засечками у кириллического курсива свои формы: строчная «т» похожа на m, а «д» — на g;
• нет нужных знаков — «ё», «№», «ёлочек», длинного тире, — и браузер берёт их из другого шрифта.

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

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

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

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

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

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

Лицензия на шрифт: что можно и что нельзя

У шрифта есть правообладатель, и, покупая шрифт, вы покупаете не файл, а разрешение на определённые способы использования. Их лицензируют по отдельности:

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

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

Бесплатные шрифты с открытой лицензией

Шрифты Google Fonts выпущены под открытыми лицензиями — в основном SIL Open Font License, часть под Apache License и Ubuntu Font License. Их можно бесплатно использовать на коммерческих сайтах, в макетах и печати, без отдельной веб-лицензии. Ограничения касаются в основном самих файлов: продавать их отдельно нельзя.

Шрифты из интернета «без лицензии»

Сайты-сборники «скачать шрифт бесплатно» нередко выкладывают платные шрифты без разрешения правообладателя. Скачанный файл не даёт права им пользоваться, что бы ни было написано на странице. Ещё одна ловушка — пометка «free for personal use»: бесплатно только для личных проектов, а сайт компании — коммерческое использование.

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

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

Как подключить шрифт к сайту

Есть два пути.

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

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

В обоих случаях важны две вещи:

• формат WOFF2 — сжатый формат для веба, его понимают все современные браузеры, а TTF и OTF — форматы для компьютера, на сайте они тяжелее;
• подмножества символов — сайту на русском хватает кириллицы, латиницы, цифр и знаков препинания. Лишние знаки убирают, если лицензия это разрешает, и браузер скачивает только нужные наборы. Но резать слишком смело не стоит: если в тексте появится «ё» или «№», которых нет в файле, они покажутся чужим шрифтом.

Как сделать, чтобы текст не прыгал при загрузке

Пока фирменный шрифт грузится, браузер решает, что показывать. Поведение задают свойством font-display:

• swap — сразу показать текст системным шрифтом и подменить, когда загрузится фирменный. Текст виден сразу, но при подмене строки могут сдвинуться;
• optional — взять фирменный шрифт, только если он загрузился почти мгновенно, иначе остаться на системном. Прыжков нет, но фирменный шрифт посетитель увидит не всегда;
• block — держать текст невидимым несколько секунд. Для основного текста это худший вариант: человек смотрит на пустую страницу.

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

Сдвиги вёрстки измеряет показатель CLS из Core Web Vitals, и он должен быть не больше 0,1. Как замерить скорость и что ещё её тормозит, разобрали в статье о скорости загрузки сайта.

Частые ошибки

• Шрифт выбран по латинскому образцу, а кириллица в нём слабая.
• Четыре-пять шрифтов на странице, каждый «для настроения».
• Рукописный или декоративный шрифт в абзацах и кнопках.
• Шрифт с сайта-сборника или «для личного использования» на сайте компании.
• Куплена десктопная лицензия, а шрифт подключён к сайту.
• Подключены все начертания «на всякий случай», хотя в макете три.
• Из файла вырезаны «ё» и «№», и они выглядят чужими.

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