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

Какой шрифт поможет прочитать предложение?

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

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

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

Сравнивать нужно одинаковое содержание

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

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

Кириллицу проверяют на своём тексте

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

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

В метаданных Inter в репозитории Google Fonts явно перечислены наборы cyrillic и cyrillic-ext. Это пример того, где искать сведения о составе, а не рекомендация ставить Inter на любой сайт. В той же записи указана лицензия OFL. Для выбранного семейства заказчик просит аналогичные данные вместе с файлами, чтобы поддержка кириллицы не оставалась обещанием на словах.

Начертания тоже входят в выбор

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

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

Бесплатное скачивание не описывает права

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

Веб-использование и установка на рабочий компьютер могут оформляться по-разному у разных правообладателей. Маркетологу полезно описать конкретное применение: сайт компании, размещение файлов на сервере, требуемые начертания и работа привлечённого разработчика. Затем сверить эти действия с лицензией выбранной версии. Если формулировка неясна, лучше получить объяснение правообладателя до запуска. Чужой скриншот «бесплатно для всех» не даёт компании документа, по которому можно восстановить условия позже.

Пример открытой лицензии

Официальный текст SIL Open Font License 1.1 разрешает использование, изменение и распространение при соблюдении своих условий. В частности, он требует сохранять сведения об авторском праве и лицензию при распространении, а также содержит ограничения, связанные с зарезервированными именами изменённых шрифтов. Поэтому слово «открытый» не означает отсутствие правил. Для обычного сайта достаточно сначала установить, под какой лицензией получены именно эти файлы, а вопросы изменения или дальнейшего распространения разобрать отдельно по тексту условий.

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

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

Шрифт должен появиться без потери текста

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

Формат WOFF 2.0 предназначен для передачи шрифтов в вебе и использует расширение .woff2. Он поддерживается основными браузерами по спецификации W3C. Для заказчика эта деталь полезна при передаче: исполнитель объясняет, какие файлы включены и почему. Но одно расширение не делает страницу быстрой. Размер набора, способ загрузки и временный заменяющий шрифт также влияют на то, увидит ли посетитель текст сразу после открытия.

В документации Chrome о показе шрифтов описан параметр font-display. Значение swap позволяет сначала показать доступный заменяющий шрифт, а затем загруженный. Это пример технического способа сохранить чтение. Маркетологу не требуется править стиль вручную: в задании достаточно назвать результат, при котором условия услуги и кнопка остаются видимыми при медленной загрузке.

Почему замена может сдвинуть страницу

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

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

Какие примеры подрядчик покажет перед сдачей?

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

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

Образец задания

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

После выбора полезно закрепить роли. Основной текст, заголовок и подпись получают понятный способ применения, чтобы следующая страница не превратилась в новый эксперимент со случайными размерами. Самих семейств может быть немного. Главное — чтобы различия объясняли содержание, а не заставляли посетителя привыкать к новой манере в каждом блоке.

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

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