Шрифты для сайта: правила выбора и сочетания

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

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

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

Немного терминологии

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

• Гарнитура — семейство шрифтов с общим рисунком. Например, гарнитура может включать начертания Regular, Italic, Bold, Light и другие.
• Начертание — конкретный вариант внутри гарнитуры: насыщенность (тонкий, обычный, жирный) и наклон (прямой, курсив).
• Антиква, или шрифт с засечками — у букв есть небольшие поперечные штрихи на концах. Ассоциируется с книжностью, традицией, солидностью.
• Гротеск, или шрифт без засечек — буквы без штрихов. Выглядит современно и нейтрально, хорошо читается на экранах.
• Акцидентный шрифт — декоративный, предназначенный для заголовков и коротких надписей, а не для длинных текстов.
• Интерлиньяж — расстояние между строками.
• Кегль — размер шрифта.
• Вариативный шрифт — один файл, который содержит плавный диапазон начертаний, например, от тонкого до сверхжирного.

Правило первое: кириллица — не формальность

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

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

• Наберите тестовую фразу со всеми проблемными буквами: «Съешь же ещё этих мягких французских булок, да выпей чаю».
• Посмотрите на «Д», «Л», «Ж», «Ф», «Щ», «Ы» — они должны быть в одной стилистике с остальными буквами.
• Проверьте, есть ли буква «ё», знаки «№», рубля «₽», кавычки-ёлочки «» и длинное тире.
• Сравните одну и ту же фразу на латинице и кириллице: плотность и ритм текста должны быть похожими.
• Проверьте все начертания, которые планируете использовать, — бывает, что кириллица есть в Regular, но отсутствует в Bold или Italic.

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

Правило второе: читаемость важнее оригинальности

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

Признаки хорошего шрифта для основного текста:

• Открытые формы букв: у «с», «е», «а» достаточно широкие просветы.
• Различимые похожие символы: заглавная «I», строчная «l» и цифра «1»; буква «О» и цифра «0».
• Средняя высота строчных букв — достаточно большая относительно заглавных. Такие шрифты лучше читаются в мелком кегле.
• Умеренный контраст штрихов. Шрифты с очень тонкими линиями на экране распадаются, особенно на недорогих мониторах.
• Хорошая проработка для экрана — так называемый хинтинг.

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

Правило третье: не больше двух гарнитур

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

В подавляющем большинстве проектов достаточно одной или двух гарнитур:

Одна гарнитура

Самый надёжный вариант. Хорошая гарнитура с 4–6 начертаниями позволяет выстроить полноценную иерархию: жирный для заголовков, обычный для текста, светлый для подписей. Всё выглядит согласованно, и при этом загружается меньше файлов. Этот вариант мы рекомендуем для большинства корпоративных сайтов и интернет-магазинов.

Две гарнитуры

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

Три и более

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

Как сочетать шрифты

Если решили использовать две гарнитуры, вот проверенные принципы их сочетания.

Ещё несколько практических советов:

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

Размеры, интервалы и длина строки

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

• Размер основного текста — 16–18 пикселей на компьютере и не меньше 16 на мобильных. Раньше стандартом было 12–14, но экраны стали плотнее, и мелкий текст читать тяжело.
• Интерлиньяж — 1,4–1,6 от размера шрифта для основного текста. Для заголовков — плотнее, 1,1–1,3.
• Длина строки — 60–75 символов. Слишком длинные строки утомляют: глазу трудно найти начало следующей. Слишком короткие рвут ритм чтения.
• Иерархия размеров — заголовки разных уровней должны отличаться заметно, примерно в 1,25–1,5 раза на каждом шаге.
• Отступы между абзацами — примерно равны высоте строки или чуть больше.
• Выравнивание — по левому краю. Выравнивание по ширине на сайтах создаёт неравномерные пробелы, особенно в русском тексте с длинными словами.
• Заглавные буквы — только для коротких надписей вроде меток или кнопок, и с небольшим увеличением межбуквенного расстояния.

Техническая сторона: подключение и скорость

Каждый подключённый шрифт — это файл, который браузер должен скачать. Одно начертание весит от 20 до 150 КБ, и если подключить две гарнитуры по пять начертаний, набегает полмегабайта только на шрифты. На мобильном интернете это заметно.

Как оптимизировать загрузку:

1. Подключайте только нужные начертания. Если жирный курсив на сайте не используется, не загружайте его.
2. Используйте формат WOFF2. Он сжат лучше остальных и поддерживается всеми современными браузерами.
3. Обрезайте набор символов. Если на сайте только русский и английский, не нужны греческие, вьетнамские и другие наборы знаков.
4. Размещайте файлы на своём сервере. Подключение со сторонних сервисов добавляет запрос к другому домену и зависимость от его доступности.
5. Настройте поведение при загрузке. Пусть браузер сначала показывает текст системным шрифтом, а затем подменяет его, — это лучше, чем пустая страница.
6. Рассмотрите вариативные шрифты. Если нужно много начертаний, один вариативный файл может весить меньше, чем несколько отдельных.

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

Лицензии: шрифт тоже чья-то собственность

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

Варианты:

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

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

Случаи из практики

Сайт стоматологической клиники в Калининграде был набран тонким геометрическим гротеском в светло-сером цвете. Выглядело стильно, но пожилые пациенты, которые составляли заметную часть аудитории, жаловались, что ничего не могут прочитать. Мы заменили шрифт на более плотный гуманистический гротеск, увеличили размер текста до 18 пикселей и сделали его темнее. Время на странице выросло почти вдвое, а количество звонков с вопросами «а где у вас цены?» уменьшилось — люди наконец находили их сами.

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

Выводы

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

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

Хорошая типографика незаметна. Посетитель просто легко читает текст и не устаёт, а значит, дочитывает до того места, где вы предлагаете ему оставить заявку.