Психология шрифтов: все, что нужно знать веб–дизайнеру
Статья подготовлена на основе материала 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 шрифтов. Вы можете использовать представленные в ней семейства абсолютно бесплатно, реализуя любые творческие идеи. На платных тарифах платформа позволяет использовать любые пользовательские шрифты: загрузить уникальную типографику можно самостоятельно, воспользовавшись инструкцией из Базы знаний.