- Шрифт для сайта стоит примерять на русский текст, цены и кнопки в реальном размере.
- Кириллица в наборе символов ещё не гарантирует, что текст удобно читать на телефоне.
- Пока веб-шрифт загружается, текст может оставаться невидимым, а при смене шрифта страница может сдвигаться.
- Для каталога я ставлю удобство чтения выше выразительности букв; у короткой имиджевой страницы приоритеты могут отличаться.
Выбираем по слову Beautiful. А «защищённый»?
30 сентября 2026 года Typecache сообщил о выпуске Originale Роберта Джейнса. По описанию Counter Forms, на гарнитуру ушло восемь лет. Вот и повод спросить, как выбрать шрифт для сайта: человек годами выверяет рисунок букв, а мы готовы всё решить по красивому английскому заголовку.
Первый антисовет: наберите Beautiful, полюбуйтесь и закрывайте вопрос. Русский каталог как-нибудь приспособится.
Я начинаю с менее фотогеничных слов: «защищённый», «самовывоз», «производительность». Добавляю «ё», «й», знак рубля и длинное название товара. Это мой набор для примерки, а не универсальный экзамен для шрифтов. Буква «щ» тоже ничего не сертифицирует. Зато рядом с ней труднее пропустить слипшиеся штрихи в мелком размере или слишком тесное соседство букв.
Сначала выясняю, поддерживает ли кандидат нужный язык. Затем читаю сами надписи: взгляд идёт свободно или приходится всматриваться? Обычное и жирное начертания проверяю отдельно. Красивый образец латиницы тут за них не ответит.
TypeType рекомендует оценивать читаемость и расстояния между буквами в разных размерах, а готовый результат проверять на устройствах и в браузерах. Мне близок этот порядок: сначала примерка, затем влюблённость. Обратный тоже работает, но расставаться труднее.
Заголовок прекрасен. Зачем проверять цену и кнопку?
Второй антисовет: если шрифт хорош на рекламном баннере, назначьте его всему сайту. Пусть условия доставки тоже выражают характер бренда.
Для пробного экрана я бы взяла текст из самого магазина:
- Длинное название товара рядом с коротким: не приходится ли уменьшать текст ради одного неудобного случая?
- Обычная цена, цена со скидкой и знак рубля: понятна ли сумма без увеличения экрана?
- Кнопки «Добавить в корзину» и «Сообщить о поступлении»: помещаются ли подписи с нормальными отступами?
- Абзац об оплате и сообщение об ошибке: можно ли спокойно прочитать их на телефоне?
Здесь я смотрю на весь экран. Даже удачный шрифт не спасёт текст, который зажали в узком блоке или сделали слишком бледным. И наоборот: при неудачном переносе строки не обязательно сразу менять гарнитуру.
У нас в CRT есть кейс Regard – редизайн и адаптив интернет-магазина компьютерной техники. Такой проект задаёт понятный масштаб примерки: нужно смотреть на каталог и интерфейс на разных экранах. Конкретные шрифтовые решения Regard оставлю за рамками этого разбора.
Я в этом довольно строга: в магазине выразительность должна выдержать соседство с ценой и кнопкой. Но на короткой имиджевой странице могу дать буквам больше свободы – там крупная надпись сама создаёт значительную часть впечатления. У страницы другая задача, и требования к шрифту меняются вместе с ней.
Пусть покупатель подождёт, пока загрузится красота?
Третий антисовет: утвердите макет и забудьте, что шрифт ещё предстоит доставить в браузер. На дизайнерском компьютере ведь всё прекрасно.
У этой красоты есть документированный тупик. В руководстве Google web.dev описан период блокировки: пока веб-шрифт загружается, текст может оставаться невидимым. Место под надпись есть, самой надписи нет. Для кнопки покупки это сомнительное проявление сдержанности.
Настройка font-display: swap позволяет быстро показать текст резервным шрифтом, а затем заменить его основным. Но размеры букв могут различаться: меняются переносы, высота абзаца и положение соседних элементов. Значит, и быструю подмену нужно проверить. Тот же источник советует выбирать способ загрузки с учётом задачи страницы и уменьшать различия между основным и резервным шрифтами.
Поэтому я прошу показать страницу с замедленной сетью и отключённым кешем (сохранёнными браузером файлами). Слежу за загрузкой от начала до конца: когда появляется цена, видна ли подпись кнопки, остаётся ли она на месте. Потом смотрю, что будет, если файл шрифта вообще недоступен.
Для меня приёмка заканчивается на этом экране. Скриншот готовой страницы слишком вежлив: он скрывает всё, что происходило до его появления.
Вопросы и ответы
Можно ли оставить системный шрифт?
Да. Системный шрифт уже установлен на устройстве и не требует отдельной загрузки, как объясняет web.dev. Его внешний вид может различаться между операционными системами, поэтому макет всё равно нужно проверять на целевых устройствах.
Достаточно ли проверить наличие кириллицы?
Нет: поддержка языка подтверждает наличие символов, но не удобство конкретного текста в интерфейсе. Проверьте русские подписи, цены, знаки и нужные начертания в рабочем размере. В пробный экран стоит включить длинные строки, которые действительно встречаются на сайте.
Что с этим делать
Я бы начала с простой примерки: русский заголовок, цена, кнопка и абзац, затем телефон и медленная загрузка. Если спор о шрифте застрял на «нравится – не нравится», принесите на обсуждение этот экран в разных состояниях: будет что проверить, кроме вкуса участников. Такую примерку я бы включила в задачи UX/UI-дизайна.
