Как типографика влияет на конверсию

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

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

Влияние типографики на восприятие

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

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

Когда с типографикой все хорошо, посетители не думают о ней, не замечают работу дизайнера. Однако если читать неудобно, буквы сливаются, а слова кажутся неразборчивыми, это вызывает отторжение — и люди закрывают страницу. Влияние шрифтов на восприятие подтверждают десятки экспериментов.
Эксперимент с конверсией
В попытках повысить CR одного из сайтов, Numara Software увеличили междустрочный интервал и размер шрифта с 10px до 13px. Хотя и первый вариант хорошо смотрелся на странице, это небольшое изменение привело к улучшению ряда коммерческих показателей:

• отказы снизились на 10%;
• глубина просмотра увеличилась на 24%;
• CR взлетел на 133%.

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

Эксперимент из университета им. Гумбольда

Немецкие ученые подтвердили результаты эксперимента с изменением размера своим исследованием. Они показывали респондентам одни и те же слова с разным эмоциональным окрасом и размером, замеряя изменения в активности мозга. По итогам они пришли к выводу, что чем больше начертание, тем сильнее реакция и тем дольше она сохраняется в голове.

Эксперимент по поиску конверсионного синего цвета

Помимо размера, на восприятие влияет и контрастность, от которой зависит читабельность. В Bing потратили миллионы, чтобы выбрать синий цвет с идеальным контрастом для экранов. По результатам тестирований более 40 оттенков они нашли тот, который смог окупить все исследования и принести компании доход в 80 млн долларов за год.

Каким должен быть шрифт: критерии оценки

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

Какие параметры использовать для оценки?

1. Разборчивость: здесь анализируются пропорции, контрастность, пространство внутри буквы, расстояние между ними при написании слова.

2. Гибкость, адаптивность: некоторые стили хорошо смотрятся в большом размере и подходят для заголовков, но их невозможно разобрать даже в стандартном для основного текста 16 кегле.

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

4. Универсальность: этот принцип используется для проверки отображения текстов на разных экранах и устройствах. Если статью удобно читать на десктопной версии, это не значит, что эффект сохранится на смартфонах.

5. Стиль: шрифты должны подходить друг другу и вписываться в общее позиционирование.

6. Эффектность, характер: этот параметр используется для оценки эмоций, которые передает дизайн.

Как выбрать хороший шрифт

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

Масштаб проекта

Первый фактор, который нужно учитывать — это масштаб. Одно дело — выбрать стиль для одной листовки или названия, а другое — для интерфейса интернет-магазина. У них разные задачи, разные объемы текстов, разные смыслы, которые транслируются через дизайн, поэтому и шрифты должны отличаться.

В долгосрочных проектах — СМИ, веб-сервисах, образовательных платформах, маркетплейсах и других сайтах e-commerce — для основного текста выбирайте нейтральные, универсальные стили. Есть «большие семейства» шрифтов, которые включают много вариантов начертаний, дополнительных символов и лигатур. Их использование позволяет избежать проблем с брендингом при масштабировании.

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

Объемы текстов

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

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

Характеристики шрифта: размер, формы, засечки

Следующий этап — проанализировать характеристики стиля. К ним относятся:

• Форма: открытые, закрытые, полуоткрытые. Определить апертуру можно по букве С — у открытых ее кончики далеко друг от друга, а у закрытых практически смыкаются. От просветов зависит читабельность.

• Высота букв. От этого параметра зависит реальный размер букв на экране. Для больших объемов выбирайте шрифты повыше — даже в полуоткрытых апертурах они останутся читабельными. Оценить это свойство можно по букве Х.

• С засечками — serif или без них — sans serif. Вы можете найти десятки разных рекомендаций и мнений по поводу этого свойства: одни говорят, что для больших текстов нужно использовать шрифты с засечками по аналогии с печатными изданиями, другие считают, что на экранах лучше смотрятся стили без засечек. В большинстве случаев это вопрос вкуса и привычек аудитории.

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

Язык, на котором говорит аудитория

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

Функциональность vs эстетика

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

Несмотря на необходимость поиска компромисса, функциональность всегда должна быть на первом месте, иначе вы рискуете потерять конверсии.

Подбор шрифтовых пар

Это необязательный этап — он касается тех случаев, когда нужен шрифт «с настроением», но основного текста много. В этой ситуации можно выбрать два стиля: один — выразительный для заголовков, названий, небольших надписей или акцентов, другой — для больших объемов.

Главная сложность здесь — подобрать пары, которые будут подходить друг другу. Сделать это можно самостоятельно, используя принцип противоположности или, наоборот, подобия. Второй вариант — найти готовое решение. Вы легко можете найти примеры от других дизайнеров, чтобы использовать их в своем проекте.

Резюме

В этой статье мы разобрали критерии, которые нужно учитывать при выборе шрифтов. Опираясь на описанные правила, вы можете:

• управлять эмоциями аудитории;

• упростить взаимодействие пользователей с контентом;

• повысить вовлечение;

• увеличить количество конверсий.

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