Как выбрать шрифты для сайта
Андрей Батурин,
Андрей Батурин
Шрифты — ключевой элемент веб-дизайна. От них зависит, насколько хорошо пользователь будет воспринимать информацию, захочет ли он читать ваши тексты и нажимать нужные кнопки (“купить”, “заказать” и т.п.). Чтобы текст работал на вас и справлялся с поставленными задачами, он должен соответствовать требованиям типографики. Как этого добиться и как выбрать шрифты для сайта — расскажем в этой статье.
Определяем цель
Сложно переоценить роль шрифтов в дизайне сайта. Они создают настроение, задают стиль, подчеркивают или, наоборот, оттеняют нужные элементы сайта. Поэтому при выборе важно отталкиваться не от абстрактных предпочтений и вкусов, а от цели, которую нужно достичь.
При определении цели важно учитывать четыре фактора.
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 шрифта, чтобы не перегрузить его разнообразием визуальных элементов. Но при этом должен быть один доминирующий стиль, который будет в теле сайта. Обычно для этой роли подходит антиква, так как в теле сайта могут быть длинные тексты, и важно, чтобы их было легко читать.
Гармоничное сочетание помогает выстроить грамотную смысловую иерархию, от которой зависит, насколько хорошо пользователи будут воспринимать контент на сайте. Проще говоря, когда заголовки, цитаты, разделы сайта и прочие текстовые элементы отличаются друг от друга и при этом не выбиваются из общего дизайна, информация на таком сайте воспринимается легко. Сочетание шрифтов и визуальных элементов “ведут” внимание читателя по нужному пути: от заголовка к подзаголовку, затем к тексту, другим страницам сайта и далее.
Вот пять правил, которые следует учитывать при выборе шрифтов для сайта.
- Не смешивайте шрифты с разными “настроениями”. Если основным стилем вы выбрали веселенький гротеск, на всем сайте не должно быть ничего серьезного, тяжеловесного и консервативного. Да, дополнительные стили на сайте могут быть другими, но они не должны противоречить настроению основного.
- Гротеск и антиква отлично сочетаются. Еще во времена расцвета печатной прессы издатели часто набирали заголовки без засечек, а текст — с засечками. Тем самым они добивались повышенного внимания к заголовку и хорошей читабельностью основного текста.
- Еще раз об иерархии. Пусть у каждого шрифта на сайте будет своя роль: один — для текста статей, второй — для интерфейса, третий — для текста в полях заполнения, четвертый — для кнопок и т. д.
- Работайте с уже выбранным. Если у вас сложная иерархия сайта с десятками текстовых элементов, которые вы хотите выделить, не выбирайте для этого десятки шрифтов. Задачу поможет решить форматирование уже выбранных: меняйте их размер, делайте жирными, пользуйтесь курсивом. Это поможет визуально разнообразить текст и избежать излишней пестрости.
- Заголовки — отдельно. Заголовок должен отличаться от основного текста, и не только размером и цветом. При этом не забывайте о первом правиле — разные шрифты не значит стили с разными “настроениями”.
Где искать бесплатные шрифты
Обычно веб-дизайнеры пользуются специальными сервисами для поиска готовых шрифтов или вдохновения для создания собственных.
Google Fonts
В этом онлайн-сервисе есть готовые сочетания стилей, которые можно бесплатно использовать у себя на сайте. На Google Fonts можно сразу протестировать, как текст выглядит в разных цветовых гаммах и размерах. Также здесь есть рекомендации по сочетаемости и подробная статистика по использованию стиля на сайтах в разных странах.
Typ.io
Еще один англоязычный сервис с подробной базой шрифтов. На сайте вы найдете последние тренды в сочетании стилей, примеры крутых веб-проектов с детальным разбором используемых на них текстовых элементов. Если ищите вдохновения — этот ресурс точно для вас.
FontSpace
Это коллекция из нескольких десятков тысяч шрифтов, разделенных на категории: от ретро до футуризма. У каждого указано, для каких целей его можно использовать: личных или коммерческих.
Font Squirrel
Классная коллекция бесплатных шрифтов для любых целей с удобным поиском по категориям, топом самых популярных и двумя полезными инструментами для веб-дизайнера. Первый инструмент позволяет создавать собственный дизайн текстов прямо на сайте, второй — распознает стили на загруженных картинках и предлагает похожие в собственной коллекции.
Canva Font Combinations
Здесь не такая большая коллекция шрифтов для выбора, зато удобный механизм подбора подходящих пар. Просто выберите понравившийся стиль, и Canva подберет к нему сочетающуюся пару. После этого можно посмотреть, как комбинация смотрится в разных сочетаниях.
Где искать платные шрифты
Если вы хотите оригинальный шрифт, которого нет на других сайтах, купите его. В среднем, цена за них колеблется в районе 2000 рублей. Есть, конечно, и дороже, и дешевле, но за эту цену вполне можно выбрать оригинальное произведение, которого ни у кого нет. Кстати, заглядывать в магазины можно и просто, чтобы поискать вдохновения.
Магазин студии Артемия Лебедева
Да, здесь не такой большой выбор, зато шрифты действительно классные, да и потом сможете похвастаться при случае, что у вас дизайн от самого Артемия Лебедева.
Paratype
Онлайн-магазин шрифтов с удобными категориями: выбирайте по классификации, языку, популярности и т.д. Цены поменьше, чем в студии Лебедева, а выбора больше. На распродаже можно найти отличные предложения в пределах 1500 рублей.
MyFonts
Одних шрифтов на кириллице здесь две тысячи, хоть сайт и англоязычный. Выбор огромный, цены — в долларах.
— Чтобы выбрать подходящие шрифты, отталкивайтесь от особенностей аудитории и тематики сайта. Не используйте сразу много стилей, хватит трех-четырех. Для разнообразия меняйте их параметры: размер, цвет, толщину. Скачивайте готовые шрифты для личных целей и покупайте их для коммерческих.
