Найти тему
Рег.ру Медиа

Выбираем идеальный шрифт для вашего сайта

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

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

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

Но, как известно, дьявол кроется в деталях.

Почему шрифт важен?

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

Слышали ли вы что-нибудь о Times New Roman, Arial, Calibri или Comic Sans MS? Да, это всё названия шрифтов — даже если они вам не знакомы, вы наверняка узнаете их по внешнему виду.

Так выглядят знакомые всем шрифты
Так выглядят знакомые всем шрифты

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

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

Какие бывают шрифты

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

Мы рассмотрим два наиболее распространённых семейства шрифтов.

Шрифты с засечками (Serif Fonts). Их легко узнать по декоративным штрихам на окончаниях букв. Обычно такие шрифты используют для придания более строгого и официального тона веб-сайту, а также для «книжного» эффекта — в книгопечатании часто можно встретить именно Serif-шрифты. Сюда относятся Georgia, Century, Times New Roman и другие.

Пример использование шрифта с засечками на сайте diletant.media
Пример использование шрифта с засечками на сайте diletant.media

Шрифты без засечек (Sans Fonts). У этих шрифтов нет никаких декоративных штрихов — они очень минималистичны и просты. Sans-шрифты считаются более современными и используются на множестве сайтов. Из примеров можно привести Helvetica, Verdana и Lucida Sans.

На сайте apple.com можно увидеть только шрифты без засечек
На сайте apple.com можно увидеть только шрифты без засечек

Какой шрифт выбрать, с засечками или без

Шрифты с засечками завоевали свою нишу в книгопечатании, но в веб-дизайне используются не так часто. В отличие от книг, сайты состоят из множества блоков, поэтому Serif-шрифты могут рассеивать внимание и плохо влиять на восприятие. Их лучше использовать либо для заголовков и выделения информации, либо для длинных блоков текста. Также такие шрифты отлично подойдут для строгих сайтов, или же тех, что хотят выдержать определённый стиль — например для тематических ресурсов об истории или порталов, посвящённых вымышленным вселенным. Попробуйте шрифты Lora, Libre Baskerville, Souvenir.

Необычный шрифт с засечками на сайте wizardingworld.com (ранее pottermore.com)
Необычный шрифт с засечками на сайте wizardingworld.com (ранее pottermore.com)

Шрифты без засечек подойдут практически для любых современных веб-проектов — от блогов до сайтов технологических компаний. Можете выбрать любой понравившийся вариант и поэкспериментировать с ним. Из примеров — Nunito, Roboto, Open Sans.

Пример шрифта без засечек на сайте asus.com
Пример шрифта без засечек на сайте asus.com

Сколько шрифтов использовать на сайте

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

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

Пример использования трёх шрифтов на сайте knife.media
Пример использования трёх шрифтов на сайте knife.media

Также ничто не мешает экспериментировать и проводить A/B-тестирования — с помощью инструментов аналитики (Яндекс.Метрика, Вебвизор, Google Analytics и так далее) вы можете отслеживать, с какими шрифтами посетители лучше усваивают информацию, совершают покупки или дочитывают посты до конца. Дерзайте и пробуйте! И помните, что красивый сайт начинается с красивого домена.

Подписывайтесь на REG.RU Media, чтобы не пропускать полезные материалы и лайфхаки для создания сайтов.