В начале веб-разработки, типографике не придавали большого значения. Выбор шрифтов был очень маленьким и поэтому основным вопросом было «serif или sans-serif». Времена изменились.
Современный веб-мир предлагает несчётное множество шрифтов. Плюс, оформление и CSS развились то такого момента, что типографика это чаще центральный момент вида сайта и ключ к его доступности.
В общем, мы перешли от времён без выбора к временам с неограниченными вариантами. Это означает, что принять правильное решение нам нужно ещё на раннем этапе разработки. Учитывая вышесказанное, вот вам для рассмотрения несколько хороших приёмов, при выборе шрифта для вашего сайта. К каждому совету мы прилагаем примеры использования красивых шрифтов, доступных по подписке на Envato Elements.
1. Сперва–наперво — удобочитаемость.
Говорим ли мы о шрифтах для заголовков или основного текста, удобочитаемость должна быть главным приоритетом. Это особенно важно, когда речь идёт о мобильных устройствах. Не каждый шрифт идеально подходит для телефонов или планшетов, даже не смотря на то, что на экране компьютера у вас получился привлекательный и читаемый заголовок. Пытайтесь избегать слишком широких символов, если вы не уверены, что заголовки всегда будут короткими.
Основной текст должен быть понятным, с достаточным интервалом между строк и (если нужно) между символами, чтобы слегка распределить содержимое. Слишком близко расположенные строки и символы приведут к тому, что текст будет сложно прочесть.
В целом, шрифты могут быть забавными и стильными, но важно убедиться, что они читаемы.
2. Используйте шрифты, которые подойдут вашей аудитории
Одна из первых вещей, которую вы должны сделать при создании веб-сайта — подумать о целевой аудитории. Демографическая информация, такая как возраст, пол, уровень образования и доход, должна быть первостепенной. Шрифты определяют характер и являются важной подкупающей частью для людей, к которым вы обращаетесь.
Например, веб-сайт автосалона роскошных автомобилей полезнее будет пользоваться шрифтом, который отражает роскошный продукт. С другой стороны, человеку, развлекающему детей, предлагается выбрать что-то весёлое и неформальное.
Если на странице несколько разделов с текстовым содержимым, использование хорошего шрифта для заголовка может помочь пользователям отделить один от другого. Верные и проверенные пути для этого — использовать различные стили шрифтов для заголовков и основного текста. Часто мы видим сайты, которые используют начертание «serif» для заголовков и «sans-serif» для остального текста. Хотя, вполне нормально использовать тот же тип и для текста, и для заголовков, вы можете использовать разные толщину начертания или цвет, чтобы выделить заголовки.
Другой вариант — использование глифов или значков (использование SVG для декорирования веб-страницы, как правило, удобнее в плане контроля). Например, использование значка стрелки возле заголовка может выделить его. Этого можно добиться, используя псевдокласс CSS, для автоматического отображения перед тегом определённого заголовка.
Один из аспектов отличной типографики заключается в том, что, хотя шрифты, которые вы выбираете, могут быть разными, каким-то образом они должны сочетаться. Например, вы, вероятно, не захотели бы использовать два не сочетающихся шрифта с засечками (serif), как для заголовка, так и основного текста. Уникальный способ создания этих самых засечек может привести к конфликту при объединении нескольких стилей.
Тем не менее, это немного субъективная зона. У всех нас разные вкусы. Когда вы выбираете шрифты, используйте ваше собственное мнение о том, что лучше будет сочетаться.
Подбор парных шрифтов может стать проблемой. Выбор двух или более шрифтов, которые хорошо смотрятся вместе, это одно, другое — выбор двух, которые подходят для достижения типографики...
Имея такое большое количество вариантов, при выборе шрифтов, вас может охватить чувство «ребёнка в кондитерской». Но, чтобы добиться большего выражения, вы поймёте, что лучше ограничится двумя–тремя гарнитурами. Это поможет создать некий баланс в оформлении и вообще, упростит чтение вашим пользователям.
Кроме того, подгрузка пользовательских шрифтов, занимают пропускную способность и ресурсы сервера, что напрямую может сказаться на времени загрузки сайта. Поэтому, чтобы поддерживать вид и производительность на высшем уровне, ограничьте количество, используемых на сайте шрифтов.
Огромное разнообразие доступных шрифтов, в сочетании с мощными методами их реализации, вынесло веб-типографию из тени в центр внимания. Разновидность предоставляет дизайнерам свободу выражения их творчества, не только графически.
А, с более чем 1300 доступных шрифтов, Envato Elements является обширным ресурсом для жаждущих типографов. По цене ежемесячной подписки у вас будет неограниченный доступ к шрифтам и многое другое. Это отличный способ использовать ваше творчество.
A professional web designer since 1996, I also write for both consumers and other pros. I’d like to think that I'm a voice of reason in a sometimes irrational industry.