Как выбрать шрифты для сайта

Как выбрать шрифты для сайта

Андрей Батурин,
Андрей Батурин

Андрей Батурин

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

Определяем цель

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

При определении цели важно учитывать четыре фактора.

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

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

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

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

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

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

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

Разбираемся в видах шрифтов

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

Виды шрифтов

С засечками

В профессиональной среде называются “антиква”. Засечки — это маленькие элементы в виде черточек на концах букв. Зачем нужны эти черточки? Считается, что с ними текст читается легче, и глаза не так устают. Поэтому актикву советуют выбирать, если у вас на сайте будет много длинных текстов: статей, лонгридов, обзоров и т.п. Этот же вид используется в книгопечатании — вот уж где действительно длинные тексты.

Среди шрифтов с засечками безоговорочное лидерство у Georgia, который есть как на Windows, так и в Mac OS. Для Windows также популярен Garamond, а в Mac OS нередко выбирают еще Iowan Old Style.

Без засечек

Этот вид профессионалы называют “гротеск”. В гротеске этих самых черточек на концах букв нет. Такие шрифты популярны на сайтах и особенно в приложениях — там, где текста немного. Часто гротеск выбирают для текстов в интерфейсе, логотипах, на иллюстрациях, рекламных баннерах. Вне интернета они применяются на буклетах, флаерах, листовках, визитках, упаковках. Выбирайте гротеск, если у вас мало текста.

Популярные шрифты гротеск в Windows — это Arial, Verdana, Calibri, Tahoma. В Mac OS также доступны Tahoma и Verdana, вдобавок к ним нередко выбирают Helvetica.

Рукописные

Эти шрифты по стилю имитируют текст, написанный вручную — авторучкой, пером, кистью. Они могут имитировать каллиграфию или обычный почерк. Популярные рукописные шрифты: Lobster, Caveat, Carolina.

Как совмещать шрифты

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

Как совмещать шрифты

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

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

  1. Не смешивайте шрифты с разными “настроениями”. Если основным стилем вы выбрали веселенький гротеск, на всем сайте не должно быть ничего серьезного, тяжеловесного и консервативного. Да, дополнительные стили на сайте могут быть другими, но они не должны противоречить настроению основного.
  2. Гротеск и антиква отлично сочетаются. Еще во времена расцвета печатной прессы издатели часто набирали заголовки без засечек, а текст — с засечками. Тем самым они добивались повышенного внимания к заголовку и хорошей читабельностью основного текста.
  3. Еще раз об иерархии. Пусть у каждого шрифта на сайте будет своя роль: один — для текста статей, второй — для интерфейса, третий — для текста в полях заполнения, четвертый — для кнопок и т. д.
  4. Работайте с уже выбранным. Если у вас сложная иерархия сайта с десятками текстовых элементов, которые вы хотите выделить, не выбирайте для этого десятки шрифтов. Задачу поможет решить форматирование уже выбранных: меняйте их размер, делайте жирными, пользуйтесь курсивом. Это поможет визуально разнообразить текст и избежать излишней пестрости.
  5. Заголовки — отдельно. Заголовок должен отличаться от основного текста, и не только размером и цветом. При этом не забывайте о первом правиле — разные шрифты не значит стили с разными “настроениями”.

Где искать бесплатные шрифты

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

Бесплатные шрифты

Google Fonts

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

Typ.io

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

FontSpace

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

Font Squirrel

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

Canva Font Combinations

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

Где искать платные шрифты

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

Платные шрифты

Магазин студии Артемия Лебедева

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

Paratype

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

MyFonts

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

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

Другие статьи по тегам

айдентика дизайн сайта

на эту тему

О дизайне
для не дизайнеров
UX дизайн и его роль в веб-дизайне
Веб-дизайн 2018 года: тенденции и тренды
ТОП-10 классических стилей в веб-дизайне
Ошибки в веб-дизайне, которые могут стать фатальными
Основные правила нейминга и разработки логотипов