Как шрифты делают ваш сайт притягательным и заставляют посетителей возвращаться

Если говорить просто, то типографика - это то, где соединяются искусство и текст. Типографика является инструментом, с помощью которого вы можете добавить индивидуальность и стиль вашему тексту. Фото: anieto2k (CC BY 2.0).
Если говорить просто, то типографика — это то, где соединяются искусство и текст. Типографика является инструментом, с помощью которого вы можете добавить индивидуальность и стиль вашему тексту. Фото: anieto2k (CC BY 2.0).
Типографика является важной составляющей любого сайта — от того, какую гарнитуру или размер шрифта вы используете, во многом зависит то, как ваше сообщение воспримут читатели. Статья «How Typography Affects Conversions» поможет понять, что такое типографика, почему типографика важна и как она влияет на посетителей сайта.

Что такое типографика?

Если говорить просто, то типографика — это то, где соединяются искусство и текст. Типографика является инструментом, с помощью которого вы можете добавить индивидуальность и стиль вашему тексту.

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

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

Ключевые элементы типографики

Рассмотрим основные элементы типографики:

  1. Гарнитура (Typeface) — гарнитура отличается от шрифта тем, что определяет согласованный стиль всего семейства шрифтов. Например, Garamond, Times и Arial — это гарнитуры, а не шрифты;
  2. Шрифты (Fonts) — стиль гарнитуры с определенными параметрами. Например, Georgia — это гарнитура, а 9pt Georgia Bold — это шрифт;
  3. Длина линии (Line Length) — горизонтальная ширина текстового блока;
  4. Интерлиньяж (Leading) — расстояние между строками;
  5. Кернинг (Kerning) — расстояние между отдельными буквами, которое изменяется в зависимости от их формы;
  6. Трекинг (Tracking) — расстояние между символами в слове или предложении, независимо от их формы и размера.

Почему типографика так важна?

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

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

Типографика так же помогает в создание визуальной иерархии — важные элементы в тексте можно выделить размером, цветом или стилем.

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

Гештальт-теория утверждает, что люди организовывают визуальные элементы в группы на основе пяти параметров:

  1. Схожесть. Стимулы, схожие по размеру, очертаниям, цвету или форме имеют тенденцию восприниматься вместе;
  2. Близость. Стимулы расположенные рядом, имеют тенденцию восприниматься вместе;
  3. Замкнутость. Отражает тенденцию завершать фигуру, так что она приобретает полную форму;
  4. Целостность. Восприятие имеет тенденцию к упрощению и целостности;
  5. Фигура и фон. Соотношение фигуры и фона может сделать восприятии более точным.

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

Что показало исследование

В июле 2012 Эррол Моррис (Errol Morris) провел исследование в газете The New York Times. Исследование называлось «Вы оптимист или пессимист?» и заключалось в том, что читателям предлагалось ответить на два закрытых вопроса после того, как они прочитали отрывок из книги Дэвида Дойча «Начало бесконечности».

На самом деле, Морриса не интересовало — оптимисты или пессимисты участники исследования. Его интересовало, влияет ли гарнитура на то, как читатели воспринимают информацию.

В исследовании приняли участие 40 тысяч человек и шесть гарнитур: Baskerville, Helvetica, Comic Sans, Computer Modern, Georgia и Trebuchet.

Результаты показали, что текст, набранный Comic Sans, вызвал наибольшее несогласие, а чаще всего люди были склонны соглашаться с текстом, набранным Baskerville.

Урок для интернет-маркетологов

Вот что Дэвид Даннинг (David Dunning), психолог, участвовавший в проведении исследования, сказал о «победе» Baskerville:

Шрифты имеют разные «личности». Мне кажется, о Baskerville можно сказать, что он выглядит более формальным.

Теперь посмотрите на ваш сайт. Корректно ли выбранный вами шрифт отражает ваше сообщение?

Имеет ли значение размер шрифта?

Для того, чтобы ответить на этот вопрос, Майкл Бернард (Michael Bernard, Software Usability Research Laboratory, Wichita State University) провел исследование, в котором сравнивал восемь популярных гарнитур: Courier New, Georgia, Arial, Century Schoolbook, Times New Roman, Comic Sans, Tahoma и Verdana. Гарнитуры рассматривались в размерах 10, 12 и 14 pt. В исследовании приняло участие 60 человек.

Вот что было обнаружено: Verdana, Arial и Comic Sans воспринимаются лучше в размерах 10, 12 и 14 pt соответственно.

Тексты, набранные Times New Roman и Arial, читались быстрее всего, и, несмотря на то, что большие шрифты читаются быстрее, значительной разницы между размерами и скоростью чтения для данных шрифтов замечено не было.

Исследование также показало, что Arial и Courier были самыми легкочитаемыми шрифтами, а разобрать Comic Sans было труднее всего. Tahoma оказалась наиболее читаемой при размере 10 pt, Courier — при 12 pt, а Arial — при 14 pt.

С засечками или без засечек

Шрифты с засечками и без засечек
Шрифты с засечками и без засечек

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

Шрифты без засечек рекомендуется использовать для текста, а шрифты с засечками для заголовков.

Влияние на настроение и когнитивные функции читателей

В своем исследовании Кевин Ларсон (Kevin Larson, Microsoft) и Розалинд Пикард (Rosalind Picard, MIT) рассматривали, может ли типографика влиять на настроение и когнитивные функции читателей.

В исследовании приняли участие 20 человек, одна половина из которых получила текст с хорошей типографикой, а вторая — с плохой.

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

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

В последней части исследования, рассматривающей когнтивные функции, участникам было предложено два задания (candle problem и remote associates test).

С первым заданием успешно справились 4 участника из группы с хорошей типографикой и 0 участников из группы с плохой.

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

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

Как выбрать правильную гарнитуру

Форма важна
Форма важна
  1. Не давайте выразительности повлиять на полезность. Существует так много шрифтов, то при их выборе мы можем почувствовать себя как в кондитерском магазине. Тем не менее, следует помнить, что красивые и замысловатые шрифты не всегда самые легкие для чтения;
  2. Помните, что шрифт должен дополнять текст, а не наоборот. После прочтения текста люди должны помнить о чем он, а не о том, какой был шрифт;
  3. В случае, когда вы используете две гарнитуры, следует придерживаться одного из двух принципов — соответствия или контраста. В первом случае вы выбираете две гарнитуры, которые отличаются, но, в то же время, достаточно похожи для того, чтобы читатель подсознательно их сравнивал (например, Helvetica и Arial). Во втором случае вы выбираете совершенно разные гарнитуры;
  4. Разнообразие хорошо, но сайт не должен быть витриной ваших любимых шрифтов;
  5. Для выбора наиболее подходящей гарнитуры, определите кто ваша аудитория, должен ли шрифт быть формальным или неформальным, большим или маленьким и т.д. Если необходимо, проведите маркетинговое исследование;
  6. Не делайте слишком много заглавных букв — 90% текстов, которые люди читают онлайн, состоят из строчных букв;
  7. Убедитесь, что подобрали оптимальное расстояние между буквами и словами и они не налезают друг на друга.

Резюме

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