+38 (044) 495-31-30
Украина, г. Киев, ул. Ванды Василевской 7, офис 209

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

Автор: Веб-студия "Бизнес Сайт"

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

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

Исследования показали, что многие люди не читают текст на сайте целиком, а только просматривают (сканируют) информацию.

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

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

Разновидности шрифтов для сайта

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

виды шрифтов для сайта

  1. Шрифты с засечками. Они облегчают чтение печатных изданий, визуально очерчивая строки. Но в веб-дизайне они скорее усложняют восприятие и рассеивают внимание читателя. Основное назначение таких шрифтов – использование в логотипах, выделение заголовков и важной информации на странице.
  2. Рубленные. Шрифты нейтрального характера, без засечек. Подходят для заголовков, параграфов, основного текста.
  3. Декоративные. Они выглядят оригинально, ярко. Такие шрифты отлично подойдут для молодежных сайтов и любой тематики, связанной с творчеством. Но применять их нужно очень осторожно: текст, написанный декоративным шрифтом, сложный для чтения. Чаще всего их используют для создания логотипов и выделения заголовков.

Какие шрифты актуальны сегодня?

В оформлении сайтов современные дизайнеры отдают преимущество шрифтам Google Fonts, поскольку:

  • они качественные и простые в использовании;
  • с ними не возникает проблем при верстке;
  • большой выбор, база шрифтов расширяется, добавляются новые;
  • любой шрифт Google Fonts корректно отображается при открытии страниц любым браузером.
Выбирая шрифты в Google Fonts, важно проверять наличие кириллических символов: они есть примерно в каждом десятом шрифте.

Но даже с учетом кириллицы для оформления веб-страниц подойдет далеко не каждый вариант. Рассмотрим рейтинг самых популярных шрифтов для сайта из Google Fonts в 2018 году:

  1. Open Sans. Нейтральный и легкий для восприятия шрифт, удобный для чтения, прекрасно сочетается со многими другими (например, Jubilat). Дизайнеры «Бизнес Сайт» на базе Open Sans разрабатывали оформление сайтов для студии грациозного спорта (http://gracebody.com.ua/), международной платежной системы (https://tyme.ua/), интернет-магазина бритвенных принадлежностей (https://buymach.com/).
  2. шрифт Open Sans для сайта визиткишрифт Open Sans для корпоративного сайташрифт Open Sans  для интернет-магазина
  3. Lora. Читабельный и четкий шрифт. Используется в разных начертаниях и насыщенности как для основного текста, так и для заголовков и параграфов. Этот шрифт не такой типичный и узнаваемый, как предыдущий, чем и заслужил приверженность дизайнеров.
  4. Roboto. Легко читается даже в маленьком размере и прекрасно работает в паре с другими кириллическими шрифтами Google Fonts. Roboto был взят за основу при разработке веб-студией «Бизнес Сайт» интернет-магазина «Мир клея» https://mirkleya.com.ua/.
  5. шрифт Робото для сайта

  6. PT Sans – один из наиболее востребованных и универсальных шрифтов. Легко читается в размере 14-26 пт. При соответствующем выборе начертаний и размера подойдет для основного текста и заголовков.
  7. Ubuntu. Мягкий шрифт, располагает к себе посетителя страницы. Использован в дизайне сайта веб-студии https://www.site2b.com.ua/, где обеспечил читабельность текста маленького размера и легкое восприятие заголовков.
  8. шрифт Ubuntu для сайта

Характер и настроение шрифта

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

  • Юмористические зарисовки, оформленные гарнитурой Times, посчитало смешными на 10% больше читателей, чем при оформлении Arial.
  • Убедительность текста в формате Baskerville подтвердили на 5% больше респондентов по сравнению с этим же самым текстом, написанным Comic Sans.

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

Характер шрифтов особенно важно учитывать при создании сочетаний заголовок + текст.

Если в этой паре соединить противоречащие друг другу гарнитуры, внимание читателя сосредоточится на самих шрифтах, а не на содержании страницы. Например, если заголовок выполнен в Franklin Gothic (элегантный, солидный, мужественный стиль), а основной текст в Souvenir (легкомысленный, игривый), в результате получится противоречивое сочетание, которое мешает гармоничному восприятию статьи. А если заменить шрифт заголовка на Futura Bold, картина полностью изменится: эти два шрифта дополнят друг друга благодаря схожести элементов и не создают ненужного напряжения.

Ищем правильные сочетания шрифтов для сайта

Примерно 90% пользователей не обращают внимания на шрифт, используемый на сайте.

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

Задача дизайнера – проработать все эти факторы, выдерживая дресс-код тематики сайта.

Сделать это правильно помогают следующие правила:
правила использования шрифтов на сайте

  • Использование 2-3 шрифтов для оформления сайта. Большее количество будет отвлекать внимание посетителей. К тому же, большое количество использованных шрифтов увеличит время загрузки страницы, что отрицательно скажется на посещаемости и поисковом продвижении.
  • Читабельность. Все остальное не будет иметь значения, если текст не удобно читать. Чтобы пользователь не покинул страницу в первые же секунды после перехода, важно убедиться, что текстовый контент легко читается и выбраны правильные параметры: цветовое сочетание, размер, начертание и пр.
  • Выделение логических блоков. Для этого применяются разные гарнитуры или один и тот же шрифт, но с разными параметрами насыщенности, размера, начертания. Это помогает посетителю сориентироваться на странице.
  • Правильное сочетание выбранных шрифтов между собой. Классические варианты: шрифт с засечками + рубленный, сочетание шрифтов разного класса, контрастная насыщенность шрифта в заголовке и в основном тексте, сочетание шрифтов различной тональности, яркое + нейтральное. Оценить гармоничность типографики можно приемом «бокового зрения»: направить взгляд левее или правее текста, чтобы воспринимать картинку в целом, не читая текст.

Полезные инструменты в работе со шрифтами

Используйте готовые сочетания шрифтов с помощью онлайн-сервисов:

  • Google Type http://femmebot.github.io/google-type/: большое количество шрифтовых пар, подобранных дизайнерами.
  • Type Genius https://www.canva.com/font-combinations/: вводите основной шрифт и получайте подходящую пару.
  • Font Combinator https://www.typotheque.com/fonts/fedra_serif_display, простой в использовании сервис, позволяет выбирать и гарнитуру и тип шрифта для заголовков и основного текста среди гармонирующих между собой вариантов.
  • Font Pair https://fontpair.co/: подбирайте шрифтовую пару по вводным характеристикам и скачивайте их на свой компьютер.
  • The Art of Mixing Typefaces https://www.fastprint.co.uk/blog/the-art-of-mixing-typefaces.html – таблица-шпаргалка по сочетаемости шрифтов для веб-дизайнеров.

Если хотите сэкономить время, заказывайте разработку сайта под ключ, дизайн, редизайн сайта у профессионалов веб-студии «Бизнес Сайт».

Веб-студия
Автор Веб-студия "Бизнес Сайт"
Скачайте БЕСПЛАТНО книгу
"Сайт, который приносит
$100 000 чистыми в год"
Скачать
Получите скидку -15%
Заполните эту форму