Advertisement
  1. Web Design
  2. Web Typography

Руководство по выбору шрифта для вашего вебсайта

Scroll to top
Read Time: 4 min

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

В начале веб-разработки, типографике не придавали большого значения. Выбор шрифтов был очень маленьким и поэтому основным вопросом было «serif или sans-serif». Времена изменились.

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

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

1. Сперва–наперво — удобочитаемость.

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

Основной текст должен быть понятным, с достаточным интервалом между строк и (если нужно) между символами, чтобы слегка распределить содержимое. Слишком близко расположенные строки и символы приведут к тому, что текст будет сложно прочесть.

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

 Appareo Medium

Appareo Medium by kimmydesignAppareo Medium by kimmydesignAppareo Medium by kimmydesign
Appareo Medium от kimmydesign

 Bw Modelica Font Family

Bw Modelica Font Family by bwtypeBw Modelica Font Family by bwtypeBw Modelica Font Family by bwtype
Bw Modelica Font Family от bwtype

2. Используйте шрифты, которые подойдут вашей аудитории

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

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

Cormier

Cormier by MehmetRehaTugcuCormier by MehmetRehaTugcuCormier by MehmetRehaTugcu
Cormier от MehmetRehaTugcu

Lunchbox Regular

Lunchbox Regular by kimmydesignLunchbox Regular by kimmydesignLunchbox Regular by kimmydesign
Lunchbox Regular от kimmydesign

3. Создайте различие между контентом

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

Другой вариант — использование глифов или значков (использование SVG для декорирования веб-страницы, как правило, удобнее в плане контроля). Например, использование значка стрелки возле заголовка может выделить его. Этого можно добиться, используя псевдокласс CSS, для автоматического отображения перед тегом определённого заголовка.

Avaline Extras

Avaline Extras by kimmydesignAvaline Extras by kimmydesignAvaline Extras by kimmydesign
Avaline Extras от kimmydesign

CA Texteron

CA Texteron by capearconaCA Texteron by capearconaCA Texteron by capearcona
CA Texteron от capearcona

Metrisch

Metrisch by formikalabsMetrisch by formikalabsMetrisch by formikalabs
Metrisch от formikalabs

4. Шрифты должны дополнять друг друга

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

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

Bw Glenn Slab

Bw Glenn Slab font family by bwtypeBw Glenn Slab font family by bwtypeBw Glenn Slab font family by bwtype
Шрифт семейства Bw Glenn Slab от bwtype

Bw Glenn Sans

Bw Glenn Sans font family by bwtypeBw Glenn Sans font family by bwtypeBw Glenn Sans font family by bwtype
Шрифт семейства Bw Glenn Sans от bwtype

5. Ограничьте количество используемых гарнитур

Имея такое большое количество вариантов, при выборе шрифтов, вас может охватить чувство «ребёнка в кондитерской». Но, чтобы добиться большего выражения, вы поймёте, что лучше ограничится двумя–тремя гарнитурами. Это поможет создать некий баланс в оформлении и вообще, упростит чтение вашим пользователям.

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

Catalina Typewriter

Catalina Typewriter by kimmydesignCatalina Typewriter by kimmydesignCatalina Typewriter by kimmydesign
Catalina Typewriter от kimmydesign

Fibon Neue

Fibon Neue by hederaedesignFibon Neue by hederaedesignFibon Neue by hederaedesign
Fibon Neue от hederaedesign

Используйте всю мощь веб-шрифтов

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

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


Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.