Как выбрать шрифт для сайта
![Как выбрать шрифт для сайта](https://static.wixstatic.com/media/72c0b2_ccd450b11dfe49158cf75733860cc197~mv2.jpg/v1/fill/w_584,h_334,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/72c0b2_ccd450b11dfe49158cf75733860cc197~mv2.jpg)
При создании сайта вам нужно о многом подумать заранее. Составить макет, подобрать изображения, написать текст. Часто бывает так, что работа с текстом, а именно выбор гарнитуры оказывается сложным моментом, в котором многие допускают ошибки.
Типографика — это еще один мощный способ коммуникации с пользователями. Правильно выбранный шрифт поддерживает идею и настроение сайта, его легко читать и воспринимать визуально. Иногда шрифт может быть отдельным визуальным элементом или работать в паре с изображением.
Мы подготовили гид, в котором расскажем о том, как выбирать шрифты, как сочетать их между собой и приведем примеры популярных гарнитур из библиотеки Google Fonts, которые можно скачать бесплатно.
Как выбрать шрифты и как их сочетать между собой
01. Выберите то, что подходит вам по стилю
Шрифт должен дополнять, а не конфликтовать с общей стилистикой вашего сайта. Минималистичный, яркий, классический или ультрасовременный — вне зависимости от настроения страницы, выбранные шрифты являются частью общего визуального восприятия.
![Сайты с примерами красивых шрифтов](https://static.wixstatic.com/media/72c0b2_0519c26a1c0c4e90bfc494432d25e414~mv2.gif/v1/fill/w_139,h_123,al_c,usm_0.66_1.00_0.01,blur_2,pstr/72c0b2_0519c26a1c0c4e90bfc494432d25e414~mv2.gif)
02. Определите иерархию шрифтов
Золотое правило типографики — не переборщить. Используйте не более трех вариантов шрифтов на сайте. Каждое из выбранных написаний должно иметь свой уровень и отвечать за определенную часть текста. Чтобы создать четкую и понятную иерархию, выберите основной шрифт, дополнительный и акцентный:
Основной шрифт — самый заметный, лицо вашего бренда. Именно с ним клиенты будут ассоциировать ваши товары и услуги. Используйте его для заголовков, как доминирующий.
Дополнительный шрифт служит для написания основного текста, содержания страницы, сообщений, описания товаров и услуг, статей в блоге и т.п. Тогда как основной шрифт должен выделяться и привлекать внимание, задача дополнительного состоит в том, чтобы легко восприниматься и быть читаемым.
Наконец, акцентный — это тот шрифт, который используется только для определенных целей, которые требуют повышенного внимания пользователя. Например, для кнопок с призывом к действию.
Вот несколько примеров шрифтовых пар, которые отлично смотрятся друг с другом:
![Шрифтовые пары](https://static.wixstatic.com/media/72c0b2_45151e6397d54fea83d973135ff24016~mv2.jpg/v1/fill/w_139,h_169,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_avif,quality_auto/72c0b2_45151e6397d54fea83d973135ff24016~mv2.jpg)
03. Выберите размер шрифта
После того, как вы выбрали гарнитуру, нужно определиться с размером.Размер текста в вебе не должен быть меньше 12px. Не слишком большой, но в то же время удобочитаемый. Если вы выбрали размер 16px, то он должен быть таким на всех страницах, чтобы сохранить единство стиля. Вот наиболее оптимальные диапазоны для шрифтов разного назначения:
Заголовки: 30-70 px
Основной текст: 22-30 px
Акценты: 16-20 px
Пара слов о длине строки — она не должна превышать 600 px. Это комфортный размер для удобного перемещения взгляда с одной строчки на другую. Очень широкий абзац сложно читать, потому что можно потерять начало и забыть смысл, а от слишком коротких взгляд устает прыгать.
Примеры хороших шрифтов из библиотеки Google Fonts
Google Fonts — это потрясающий ресурс, в библиотеке которого хранится более чем 800 свободно распространяемых шрифтов. Их можно использовать совершенно бесплатно. Мы подобрали 10 гарнитур, которые подойдут для любого сайта.
![Lato](https://static.wixstatic.com/media/72c0b2_7fc6d01fba4d4312b3adf469a780b840~mv2.jpg/v1/fill/w_139,h_33,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_avif,quality_auto/72c0b2_7fc6d01fba4d4312b3adf469a780b840~mv2.jpg)
![Forum](https://static.wixstatic.com/media/72c0b2_aa3bb61fa21847c486c7d9ee4d49cb9d~mv2.jpg/v1/fill/w_139,h_28,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_avif,quality_auto/72c0b2_aa3bb61fa21847c486c7d9ee4d49cb9d~mv2.jpg)
![Barlow](https://static.wixstatic.com/media/72c0b2_112cc6eb94ec4ef59eddce5388aa028a~mv2.jpg/v1/fill/w_139,h_33,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_avif,quality_auto/72c0b2_112cc6eb94ec4ef59eddce5388aa028a~mv2.jpg)
![Caudex](https://static.wixstatic.com/media/72c0b2_0718278d046f4258ad454d5e8f66e3df~mv2.jpg/v1/fill/w_139,h_33,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_avif,quality_auto/72c0b2_0718278d046f4258ad454d5e8f66e3df~mv2.jpg)
![Poppins](https://static.wixstatic.com/media/72c0b2_0b19ee46b2e84fdcafc51c33a2c8a574~mv2.jpg/v1/fill/w_139,h_33,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_avif,quality_auto/72c0b2_0b19ee46b2e84fdcafc51c33a2c8a574~mv2.jpg)
![Questrial](https://static.wixstatic.com/media/72c0b2_0ba6ac9e8d364d86bbba33dd13e143dc~mv2.jpg/v1/fill/w_139,h_28,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_avif,quality_auto/72c0b2_0ba6ac9e8d364d86bbba33dd13e143dc~mv2.jpg)
![Rozha One](https://static.wixstatic.com/media/72c0b2_4119e486a7c04ed6a062a3dec2737ce8~mv2.jpg/v1/fill/w_139,h_28,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_avif,quality_auto/72c0b2_4119e486a7c04ed6a062a3dec2737ce8~mv2.jpg)
![Libre Baskerville](https://static.wixstatic.com/media/72c0b2_df2c5defc029469ea2ed57ecddf5b3e1~mv2.jpg/v1/fill/w_139,h_33,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_avif,quality_auto/72c0b2_df2c5defc029469ea2ed57ecddf5b3e1~mv2.jpg)
![Montserrat](https://static.wixstatic.com/media/72c0b2_6f41034a2090421badd807a64153081a~mv2.jpg/v1/fill/w_139,h_33,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_avif,quality_auto/72c0b2_6f41034a2090421badd807a64153081a~mv2.jpg)
![Cormorant Garamond](https://static.wixstatic.com/media/72c0b2_217078c04dd24c74bdcab5ec95242e34~mv2.jpg/v1/fill/w_139,h_33,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_avif,quality_auto/72c0b2_217078c04dd24c74bdcab5ec95242e34~mv2.jpg)
Хорошо продуманная типографика — это то, что посетители сайта не видят, но чувствуют. И да прибудут с вами кегль и интерлиньяж!
Команда Wix ❤️