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


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


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


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


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


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


01. Выберите то, что подходит вам по стилю


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


Сайты с примерами красивых шрифтов


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


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


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

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


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


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


Шрифтовые пары


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


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


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

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

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


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


Примеры хороших шрифтов из библиотеки Google Fonts


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


Lato

Lato

Forum

Forum

Barlow

Barlow

Caudex

Caudex

Poppins

Poppins

Questrial

Questrial

Rozha One

Rozha One

Libre Baskerville

Libre Baskerville


Montserrat

Montserrat

Cormorant Garamond

Cormorant Garamond

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


Команда Wix ❤️





ru03n.png