Отталкивайтесь от содержания

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

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

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

Проверьте символы и начертания

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

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

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

Постройте простую типографическую систему

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

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

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

Проверьте право использования

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

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

Системный стек уменьшает зависимость от загрузки внешних файлов, но внешний вид может различаться между устройствами. Собственный веб-шрифт даёт больше контроля над образом. Выбор зависит от приоритетов проекта; универсально лучшего варианта для всех сайтов нет.

Как подключить шрифт без лишних задержек

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

@font-face {
  font-family: "SiteText";
  src: url("/fonts/site-text.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
body {
  font-family: "SiteText", Arial, sans-serif;
}

Это пример подключения, а не готовый файл шрифта. Вариант swap позволяет использовать запасное начертание до загрузки основного; различие размеров символов может вызвать сдвиг текста. Поведение вариантов описано в справке MDN о font-display.

Что проверить перед публикацией

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

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