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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Serif (Антиква)

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

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

    Sans-serif

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

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

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

    Sans-serif

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

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

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

    Script font

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

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

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

    Decorative

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

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

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

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

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

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

    Иерархия

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

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

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

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

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

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


    Может быть интересно
    все статьи
    Оставить заявку
    Ваше имя
    Это поле обязательно для заполнения
    Телефон
    Это поле обязательно для заполнения
    Адрес электронной почты
    Это поле обязательно для заполнения
    Радио группа:
    Это поле обязательно для заполнения
    Ваш вопрос
    Это поле обязательно для заполнения
    Нажимая на кнопку, вы принимаете условия
    политики конфиденциальности
    Спасибо!
    Форма отправлена
    Что-то не так.
    Попробуйте позже