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

Автор: Веб-студия "Бизнес Сайт"
При первом знакомстве с любым сайтом ключевую роль играет дизайн.
Шрифт, как его составляющая, может упростить восприятие сайта и информации на нем для нового пользователя или, наоборот, усложнить.
Исследования показали, что многие люди не читают текст на сайте целиком, а только просматривают (сканируют) информацию.
Результаты айтрекинга доказывают, что большая часть респондентов во время просмотра веб-страниц читает информацию по шаблону буквы F.
  Иными словами, люди обращают внимание на те надписи, которые, если мысленно начертить латинскую букву F, расположены на двух горизонтальных и одной вертикальной линиях. Если текст в этой области будет читабельным, а информация правильно структурирована по важности – пользователь с большей долей вероятности примет решение остаться на сайте. В противном случае посетитель поспешит покинуть страницу и перейти к следующим результатам поиска.

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

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

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

В оформлении сайтов современные дизайнеры отдают преимущество шрифтам Google Fonts, поскольку:
  • они качественные и простые в использовании;
  • с ними не возникает проблем при верстке;
  • большой выбор, база шрифтов расширяется, добавляются новые;
  • любой шрифт Google Fonts корректно отображается при открытии страниц любым браузером.
Выбирая шрифты в Google Fonts, важно проверять наличие кириллических символов: они есть примерно в каждом десятом шрифте.
Но даже с учетом кириллицы для оформления веб-страниц подойдет далеко не каждый вариант. Рассмотрим рейтинг самых популярных шрифтов для сайта из Google Fonts в 2018 году:
    1. Open Sans. Нейтральный и легкий для восприятия шрифт, удобный для чтения, прекрасно сочетается со многими другими (например, Jubilat). Дизайнеры «Бизнес Сайт» на базе Open Sans разрабатывали оформление сайтов для студии грациозного спорта (gracebody.com.ua), международной платежной системы (tyme.ua), интернет-магазина бритвенных принадлежностей (buymach.com).
шрифт Open Sans для сайта визиткишрифт Open Sans для корпоративного сайташрифт Open Sans для интернет-магазина
    1. Lora. Читабельный и четкий шрифт. Используется в разных начертаниях и насыщенности как для основного текста, так и для заголовков и параграфов. Этот шрифт не такой типичный и узнаваемый, как предыдущий, чем и заслужил приверженность дизайнеров.
    2. Roboto. Легко читается даже в маленьком размере и прекрасно работает в паре с другими кириллическими шрифтами Google Fonts. Roboto был взят за основу при разработке веб-студией «Бизнес Сайт» интернет-магазина «Мир клея».
шрифт Робото для сайта
    1. PT Sans – один из наиболее востребованных и универсальных шрифтов. Легко читается в размере 14-26 пт. При соответствующем выборе начертаний и размера подойдет для основного текста и заголовков.
    2. Ubuntu. Мягкий шрифт, располагает к себе посетителя страницы. Использован в дизайне сайта веб-студии site2b.com.ua, где обеспечил читабельность текста маленького размера и легкое восприятие заголовков.
шрифт Ubuntu для сайта

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

В разговоре о шрифтах, как правило, упоминаются стандартные характеристики: начертание, насыщенность, четкость, кегль и т. д. Но каждый шрифт – это, прежде всего, характер. В подтверждение этому можно привести такие интересные факты:
  • Юмористические зарисовки, оформленные гарнитурой Times, посчитало смешными на 10% больше читателей, чем при оформлении Arial.
  • Убедительность текста в формате Baskerville подтвердили на 5% больше респондентов по сравнению с этим же самым текстом, написанным Comic Sans.
В зависимости от смысла, который необходимо передать, стоит выбирать и подходящий шрифт. Например, жирный шрифт с резкими очертаниями настраивает на восприятия фактов, важной информации, сенсационных новостей. Шрифты с мягкими линиями и закругленными очертаниями вызывают приятные и легкие эмоции и подходят для соответствующей тематики. необычные шрифты для сайта
Характер шрифтов особенно важно учитывать при создании сочетаний заголовок + текст.
Если в этой паре соединить противоречащие друг другу гарнитуры, внимание читателя сосредоточится на самих шрифтах, а не на содержании страницы. Например, если заголовок выполнен в Franklin Gothic (элегантный, солидный, мужественный стиль), а основной текст в Souvenir (легкомысленный, игривый), в результате получится противоречивое сочетание, которое мешает гармоничному восприятию статьи. А если заменить шрифт заголовка на Futura Bold, картина полностью изменится: эти два шрифта дополнят друг друга благодаря схожести элементов и не создают ненужного напряжения.

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

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

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

Используйте готовые сочетания шрифтов с помощью онлайн-сервисов:
  • Google Type: большое количество шрифтовых пар, подобранных дизайнерами.
  • Type Genius: вводите основной шрифт и получайте подходящую пару.
  • Font Combinator , простой в использовании сервис, позволяет выбирать и гарнитуру и тип шрифта для заголовков и основного текста среди гармонирующих между собой вариантов.
  • Font Pair: подбирайте шрифтовую пару по вводным характеристикам и скачивайте их на свой компьютер.
  • The Art of Mixing Typefaces – таблица-шпаргалка по сочетаемости шрифтов для веб-дизайнеров.
Если хотите сэкономить время, заказывайте разработку сайта под ключ, дизайн, редизайн сайта у профессионалов веб-студии «Бизнес Сайт».
Веб-студия
Автор Веб-студия "Бизнес Сайт"
Уважаемый пользователь! C целью предоставления наиболее актуального контента, наш сайт использует файлы cookie. Продолжая взаимодействие с нашим сайтом, вы соглашаетесь с использованием файлов cookie нами.
Принять
Получите скидку -15%
Заполните эту форму