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

Если говорить просто, то типографика - это то, где соединяются искусство и текст. Типографика является инструментом, с помощью которого вы можете добавить индивидуальность и стиль вашему тексту. Фото: 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. Убе­ди­тесь, что подо­бра­ли опти­маль­ное рас­сто­я­ние меж­ду бук­ва­ми и сло­ва­ми и они не нале­за­ют друг на дру­га.

Резюме

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