Психология шрифтов: все, что нужно знать веб–дизайнеру

Статья подготовлена на основе материала https://designmodo.com/font-psychology/.

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

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

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

Типографика: основы и главные правила 

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

Не стоит путать шрифт и гарнитуру: гарнитура (typeface) – это набор символов в едином стиле (например, Helvetica), а шрифт – конкретное воплощение гарнитуры с определенными параметрами. Каждая буква имеет так называемые анатомические элементы: засечки (serif), базовую линию (baseline), высоту символов (x-height). Именно эти нюансы внешности, в конечном итоге, и формируют восприятие текста.

Шрифт – «голос» вашей площадки

Психологи подтверждают, что выбранный шрифт становится своеобразным «голосом» статьи: даже если слова одинаковы, их тон меняется из-за разного начертания букв. Человек по–разному воспринимает один и тот же текст, набранный разными шрифтами. Кроме того, типографика:

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

Психология восприятия шрифтов

В1989 году Британское психологическое общество провело исследование, в ходе которого испытуемым было необходимо охарактеризовать шрифты одним прилагательным – «тяжелый», «легкий», «быстрый», «медленный».

В дальнейших опытах список прилагательных был расширен качествами с более эмоциональной окраской. Интересно, что большинство участников описали популярный TNR как «формальный», а Helvetica – «четкий», «разборчивый».

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

Serif (Антиква)

• Примеры: Times New Roman, Georgia, Garamond.

Данная типографика, которая фактически стала синонимом физических носителей информации – журналов, книг и газет. Секрет популярности таких гарнитур – в засечках, которые придают им элегантности. Эти классические шрифты широко используются в научных работах и официальных документах, где на первый план выходит респектабельность и консервативность. Обычно шрифты этой гарнитуры характеризуют прилагательными «надежный», «элегантный», «традиционный», «изысканный».

Sans-serif (Гротески)

• Примеры: Helvetica, Arial, Futura.

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

Script (Рукописные)

• Примеры: Lobster, Pacifico, Alex Brush.

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

Decorative (Декоративные)

• Примеры: Chalkduster, Grunge, Stencil.

Рекламные баннеры, тематические проекты, акцентные объекты: здесь не обойтись без декоративных букв, цифр и символов. У стилей этих шрифтов нет официальной классификации, ведь они – всегда разные. Как правило, такая типографика представляет собой смешение форм и стилей, созданное под конкретный проект. Творческий подход и уникальные характеристики превращает такие гарнитуры в уникальное решение для тех, кто хочет выделиться из толпы. Чаще всего, их описывают как неформальные, необычные, экспериментальные.

Факторы, влияющие на восприятие шрифта

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

Акценты в тексте

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

Влияние цветовой палитры

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

Иерархия

Самый распространенный способ создания иерархии в тексте – увеличение кегля заголовков и подзаголовков. Обратите внимание, что самым крупным шрифт должен быть у заголовков уровня H1, мельче – у H2, и самым небольшим (но при этом читаемым) – у основного текста.

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

Как выбрать типографику? Советы дизайнеру

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

• Отдавать предпочтение шрифтам, соответствующим стилистике бренда. Портал крупного банка вряд ли ассоциируется с декоративными или рукописными семействами;
• Комбинировать шрифты с умом. Не стоит сочетать более 2–3 гарнитур. При этом, выбранные варианты должны гармонировать друг с другом.
• Учитывать доступность. Используя нестандартную типографику, вы рискуете конверсией: не все браузеры ее поддерживают, и контент может отображаться некорректно. Отдавайте предпочтение системным шрифтам с высокой степенью доступности.
• Тестировать и анализировать. Изучайте своего потребителя и корректируйте дизайн в соответствии с его потребностями и вкусами. Неправильно подобранная типографика может отрицательно сказаться на конверсии, поэтому любые изменения нужно тестировать с реальными пользователями.
• Брать пример с лидеров ниши. Анализируйте, как используют разную типографику лидеры рынка. Например, дизайнеры LinkedInd выбрали строгий Arial в синем оттенке, а Netflix – применяет разные гарнитуры одного и того же семейства для фильмов в различных жанрах (например, sans-serif для сериалов в жанре экшн и serif для исторических драм).
• Выбор шрифтов – это не только вопрос эстетики, а настоящее стратегическое решение. Каждая деталь типографики работает на ваши цели: вызывает доверие, направляет внимание, формирует образ бренда.

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