Как выбрать шрифт — инструкция с примерами




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


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


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


Как выбрать шрифт и как их сочетать между собой


01. Выберите гарнитуру, которая подходит для вашего сайта


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




02. Определите иерархию шрифтов


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


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

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


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


Вот несколько примеров шрифтовых пар, которые отлично смотрятся друг с другом:




03. Выберите размер шрифта


После того, как вы выбрали гарнитуру, нужно определиться с размером.Размер текста в вебе не должен быть меньше 12px. Не слишком большой, но в то же время удобочитаемый. Если вы выбрали размер 16px, то он должен быть таким на всех страницах, чтобы сохранить единство стиля. Вот наиболее оптимальные диапазоны для шрифтов разного назначения:


Заголовки: 30-70 px

Основной текст: 22-30 px

Акценты: 16-20 px


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



Как выбрать шрифты и как их сочетать между собой


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


Lato


Forum


Barlow


Caudex


Poppins


Questrial


Rozha One


Libre Baskerville



Montserrat


Cormorant Garamond


Хорошо продуманная типографика — это то, что посетители сайта не видят, но чувствуют. И да прибудут с вами кегль и интерлиньяж!


Команда Wix ❤️




ru03n.png