Типографика: процесс выбора шрифта. В чем разница между font и typeface? Сочетайте яркое с нейтральным

О базовых принципах работы с типографикой.

В закладки

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

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

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

Определите свою цель

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

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

Выбирайте шрифт, соответствующий стилю иллюстраций

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

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

Определите свою аудиторию

Разобравшись с целью дизайна, определитесь с аудиторией. Этот шаг крайне важен, поскольку выбор шрифтов будет зависеть от возраста, интересов и культурного бэкграунда аудитории.

Например, некоторые шрифты лучше подходят для детей. Поскольку они только учатся читать, для них лучше всего подходят легкочитаемые шрифты с крупными и различимыми буквами. Хороший пример такого шрифта - Sassoon Primary. Его создала Розмари Сассун, основываясь на собственных исследованиях того, какие буквы легче всего считываются детьми.

Sassoon Primary

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

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

Ищите вдохновение

Обратите внимание на работы других дизайнеров. Попытайтесь понять, как они определяли облик своей типографики.

Идеи для шрифтов

Если вы не знаете, какой шрифт выбрать, статья The 100 Best Free Fonts из CreativeBloq может быстро настроить вас на нужный лад. В ней автор объясняет, чем мотивирован дизайн каждого из ста представленных шрифтов.

Другой полезный источник идей - это 100 Greatest Free Fonts Collection for 2015 от Awwwards. К тому же, Invision не так давно огромный список ресурсов о типографике. Там источников идей предостаточно.

Чтобы посмотреть, как идеи выглядят на реальных сайтах, зайдите на Typ.io . Там собраны примеры шрифтов со всего интернета. К тому же внизу каждого образца шрифта есть его описание в CSS.

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

Идеи для сочетаний

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

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

Выберите свои шрифты

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

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

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

Сочетание двух шрифтов, контрастирующих друг с другом

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

Для веб-шрифтов хорошо подходят Google Fonts , Typekit , и Font Squirrel . Google Fonts бесплатны, а в Typekit и Font Squirrel есть и бесплатные, и платные шрифты.

Определите размеры шрифтов

Разобравшись с комбинациями шрифтов, займитесь их размерами. Для этого отлично подходит Modular Scale от Тима Брауна, главы отдела типографики Adobe. Фактически Modular Scale - это система для идентификации исторически сложившихся идеальных соотношений размеров шрифтов.

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

Золотое сечение (1:1.618)

1.000 x 1.618 = 1.618

1.618 x 1.618 = 2.618

2.618 x 1.618 = 4.236

4.236 x 1.618 = 6.854

6.854 x 1.618 = 11.089​

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

​Золотое сечение (1:1.618)

11.089 x 1.618 = 17.942

17.942 x 1.618 = 29.03

29.030 x 1.618 = 46.971

46.971 x 1.618 = 75.999

75.999 x 1.618 = 122.966

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

Вконтакте

Одноклассники

Из этой статьи вы узнаете

  • Как выбирать шрифт
  • Какой шрифт лучше выбрать
  • Что нужно знать о выборе красивого шрифта
  • Какой шрифт лучше подойдет для логотипа компании

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

Как выбрать шрифт

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

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

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

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

Ниже приводится пример написания одного и того же текста декоративным шрифтом с засечками Tobin Tax и классическим и четким шрифтом с засечками Sabon. Очевидно, что текст справа прочитать гораздо легче.

  • Выбирайте шрифты со стандартными буквами.

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

  • Выбирайте шрифты с хорошим интервалом.

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

  • Выбирайте шрифты с хорошей высотой строчных знаков (x-height).

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

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

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

Советы по читабельности:

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

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

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

Какой шрифт выбрать так, чтобы он соответствовал дизайну

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

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

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

Шрифт должен отвечать требованиям аудитории, для которой предназначается дизайн печатной продукции. Так, банковские документы, выполненные с использованием шрифта Souvenir, не будут выглядеть достаточно серьезно и респектабельно. Чтобы создать нужные ассоциации, лучше выбрать Bembo как образец стабильности и надежности. Такая эстетика намного больше соответствует ситуации.

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

Совет по эстетике:

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

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

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

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

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

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

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

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

Вашего внимания требуют даже те моменты, которые поначалу не кажутся важными. Так, если перед вами стоит задача выбрать шрифт для текста с большим количеством цифр, стоит убедиться, что они есть в том варианте, которому вы хотите отдать предпочтение. Разными шрифтами может использоваться верхний или нижний регистр цифр – Lining или Old Style.

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

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

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

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

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

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

Выбирая шрифты, не пытайтесь изобретать велосипед. Многое уже неоднократно сделано до вас, так что сначала используйте готовые наработки, проверенные временем и опытом дизайнеров. Значительную помощь может оказать сайт Fonts In Use, содержащий массу полезной информации о том, как выбрать шрифт, опираясь на удачные проекты профессиональных дизайнеров. Умение применять и интерпретировать то, что уже сделано до вас, – очень ценное качество.

Следующие советы позволят сделать ваши эксперименты по выбору шрифта более быстрыми не в ущерб качеству:

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

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

    Оценивайте результаты после каждого изменения какого-то одного параметра.

    Представьте свой вариант на суд независимого эксперта. Со стороны могут быть заметны очевидные промахи.

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

Антиква – это шрифт с засечками, а гротеск – без засечек (засечками называют маленькие черточки на концах букв).

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

Совет №5. Используйте шрифт с засечками для длинных текстов

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

Для пользователей Windows можно посоветовать Georgia, шрифт, который традиционно используется на сайте, – The New York Times и идущий в комплекте с Microsoft Office Garamond, к которому большинство читателей приучены с детства. На Mac OS тоже есть Georgia, не менее хорош Iowan Old Style, один из вариантов, которые предлагаются в программе для чтения iBooks, и PT Serif.

Совет №6. Используйте шрифт без засечек для коротких текстов

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

В Windows это такие шрифты, как Verdana, Tahoma и Segoe UI. Для тех, кто использует Mac OS, этот перечень расширяется за счет Helvetica Neue и Helvetica (ему, кстати, посвящен отдельный фильм). Шрифт-новинка от Apple – San Francisco, присутствующий на всех интерфейсах, упаковке и даже официальном сайте компании, – по неясным причинам не включен в систему и доступен только после скачивания и последующей установки.

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

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

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

Строгое следование этому правилу позволит вам стать хорошим профессионалом в типографском деле. В чем оно заключается?

    Не стоит сразу принимать решение выбрать Papyrus, если проект посвящен древнеегипетской тематике (в остальных случаях это тоже далеко не самый удачный вариант).

    Плохой тон использовать Comic Sans, исходя исключительно из того, что вы работаете с текстом юмористической направленности.

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

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

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

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

Большой выбор бесплатных кириллических шрифтов в Google Fonts.

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

Естественно, что возможность выбрать шрифт из самого большого количества вариантов есть у тех, кто приобретает их за деньги. Популярностью среди дизайнеров пользуется интернет-магазин шрифтов MyFonts. Его посетителям доступны около двух тысяч кириллических шрифтов. Другой вариант купить нужный шрифт – зайти на сайты словолитен – предприятий, разрабатывающих и продающих шрифты. Самые известные – Parachute, Colophon, Radim Pesko, Commerical Type, Grilli Type, а также российские «Паратайп», Студия Лебедева, Letterhead, Type Today и Brownfox.

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

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

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

Шуточный проект по использованию Comic Sans для логотипов крупных компаний.

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

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

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

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

Известны дизайнеры, которые за всю свою карьеру применяли не более двадцати шрифтов. В качестве основы для создания собственной палитры можно взять FontShop’s 100 Best Typefaces. Если разнообразить этот перечень шрифтов, давно вошедших в классику типографского дела, несколькими новыми, а также выбрать два-три шрифта из самых последних разработок, можно будет решить практически любую задачу.

На примере ниже вы видите, как комбинация из Bembo и шрифтов от Haptic Pro создает органичное сочетание классики и современности.

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

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

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

Как выбрать шрифт для логотипа

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

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

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

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

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

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

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

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

    Какой имидж у моей компании?

    За какие качества ее ценят клиенты?

    Какие черты вы хотели бы подчеркнуть – доступность, креативность, стабильность?

    Какие три слова могут максимально точно описать ваш бренд?

    Каким вы видите своего идеального клиента?

Ответы на эти вопросы помогут вам выбрать именно тот шрифт, настроение которого будет идеально соответствовать вашему бренду и передавать тот посыл, который вы стремитесь донести до ваших клиентов.

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

  • Выбирайте шрифт для логотипа, не основываясь на личных предпочтениях.

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

  • Учтите дух и особенности вашего бизнеса.

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

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

  • Не копируйте конкурентов.

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

  • Будьте оригинальными.

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

  • Выбирайте простые шрифты.

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

  • Как будет выглядеть выбранный шрифт в различных средах.

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

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

  • Избегайте популярных шрифтов.

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

  • Будьте вне времени.

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

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

  • Никаких вычурностей.

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

  • Дайте пространства.

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

  • Сочетание несколько шрифтов.

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

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

  • Используйте инфографику, чтобы правильно сочетать шрифты логотипа.

Выбрать оптимальный шрифт поможет сервис Typegenius. Он предоставляет возможность увидеть и оценить наиболее выигрышные комбинации шрифтов.


Вконтакте

О базовых принципах работы с типографикой.

В закладки

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

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

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

Определите свою цель

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

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

Выбирайте шрифт, соответствующий стилю иллюстраций

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

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

Определите свою аудиторию

Разобравшись с целью дизайна, определитесь с аудиторией. Этот шаг крайне важен, поскольку выбор шрифтов будет зависеть от возраста, интересов и культурного бэкграунда аудитории.

Например, некоторые шрифты лучше подходят для детей. Поскольку они только учатся читать, для них лучше всего подходят легкочитаемые шрифты с крупными и различимыми буквами. Хороший пример такого шрифта - Sassoon Primary. Его создала Розмари Сассун, основываясь на собственных исследованиях того, какие буквы легче всего считываются детьми.

Sassoon Primary

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

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

Ищите вдохновение

Обратите внимание на работы других дизайнеров. Попытайтесь понять, как они определяли облик своей типографики.

Идеи для шрифтов

Если вы не знаете, какой шрифт выбрать, статья The 100 Best Free Fonts из CreativeBloq может быстро настроить вас на нужный лад. В ней автор объясняет, чем мотивирован дизайн каждого из ста представленных шрифтов.

Другой полезный источник идей - это 100 Greatest Free Fonts Collection for 2015 от Awwwards. К тому же, Invision не так давно огромный список ресурсов о типографике. Там источников идей предостаточно.

Чтобы посмотреть, как идеи выглядят на реальных сайтах, зайдите на Typ.io . Там собраны примеры шрифтов со всего интернета. К тому же внизу каждого образца шрифта есть его описание в CSS.

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

Идеи для сочетаний

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

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

Выберите свои шрифты

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

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

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

Сочетание двух шрифтов, контрастирующих друг с другом

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

Для веб-шрифтов хорошо подходят Google Fonts , Typekit , и Font Squirrel . Google Fonts бесплатны, а в Typekit и Font Squirrel есть и бесплатные, и платные шрифты.

Определите размеры шрифтов

Разобравшись с комбинациями шрифтов, займитесь их размерами. Для этого отлично подходит Modular Scale от Тима Брауна, главы отдела типографики Adobe. Фактически Modular Scale - это система для идентификации исторически сложившихся идеальных соотношений размеров шрифтов.

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

Золотое сечение (1:1.618)

1.000 x 1.618 = 1.618

1.618 x 1.618 = 2.618

2.618 x 1.618 = 4.236

4.236 x 1.618 = 6.854

6.854 x 1.618 = 11.089​

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

​Золотое сечение (1:1.618)

11.089 x 1.618 = 17.942

17.942 x 1.618 = 29.03

29.030 x 1.618 = 46.971

46.971 x 1.618 = 75.999

75.999 x 1.618 = 122.966

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

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

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

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

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

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

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

У вашего бренда еще нет фирменного стиля и шрифта?

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

1. Учитывайте целевую аудиторию

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

Разные аудитории — разный дизайн, в том числе и шрифт

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

Скажем, вы — владелец винтажного магазина одежды с приятной и современной атмосферой. Вы можете выбрать традиционный шрифт для заголовков и классический шрифт без засечек для основного текста. К примеру, для заголовков можно взять шрифт вроде Arvo, а для основного текста — Open Sans, известный своей читабельностью. Это придаст всему сайту сбалансированный внешний вид. Кроме того, он будет выглядеть вневременно, что будет отлично сочетаться с вашей компанией в стиле ретро:

Или, скажем, у вас юридическая фирма или бренд элитной косметики, и вы хотите, чтобы внешний вид сайта подчеркивал ваш профессионализм и вызывал доверие потенциальных клиентов. Тогда лучше будет использовать классический и одновременно элегантный шрифт вроде Frank Ruhl Libre или Playfair Display. В глазах потенциальных клиентов это лишний раз подчеркнет вашу надежность и первоклассный уровень сервиса.

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

Использование веб-безопасного шрифта означает, что пользователям не нужно устанавливать какой-либо дополнительный шрифт на компьютер, чтобы текст правильно отображался в их браузере. 10 лет назад было всего 13 семейств шрифтов, которые дизайнеры могли использовать при создании сайтов. В настоящее время золотым стандартом для любого дизайнера является Google Fonts. Эти шрифты корректно отображаются в любых браузерах.

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

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

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

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

Вот, как это выглядит на практике:

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

2. Затем нужно выбрать дополнительный шрифт, который будет использоваться для основного текста. Он должен быть легко читаемым даже на небольших экранах. Таким, к примеру, является шрифт Noto Sans.

3. И, наконец, ваш третий шрифт должен привлекать внимание. Его можно использовать на кнопках целевого действия или выделять с его помощью некоторые части текста. Для этого прекрасно подойдет шрифт вроде Montserrat.

Только грамотная комбинация шрифтов может оказать существенное влияние на внешний вид вашего лендинга.

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

Выше можно увидеть еще два примера грамотного использования шрифтов. Первый лендинг принадлежит кэшбэк сервису. Там используется четкий, но слегка угловатый шрифт Open Sans. Благодаря этому сайт приобретает современный внешний вид. Второй пример — магазин чая и подарков. На его страницах используется более редкий шрифт Bebas Neue Regular, также без засечек, но за счет «вытянутости» по вертикали он выглядит более оригинально. В обоих этих примерах шрифт прекрасно сочетается с остальными элементами дизайна и прекрасно передает ценности бренда. В этом и заключается сила влияния шрифта.

Заключение

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

Высоких вам конверсий!

По материалам: 99designs.com

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

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

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

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

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

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

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

Выбор и применение шрифта зависит от совокупности нескольких факторов и элементов:

  • Тип начертания - ошибочно мы называем эту характеристику «шрифтом», но начертание относится к группам символов, букв и цифр, которые объединены общим дизайном. Например, начертание - это Garamond, Times, Arial; мы же привычно по ошибке называем их «шрифтами».
  • Шрифт - конкретный тип размера, длины, ширины и жирности букв. На практике это выглядит так: Georgia - это начертание, а 9pt Georgia Bold - шрифт.
  • Длина строк - характеристика, которая обозначает расстояние между левым и правым крайним полем и число символов и слов, которые умещаются на этом отрезке.
  • Расстояние между строками - пространство между основными линиями, по которым размещены буквы, выражается в количестве точек.
  • Кернинг - обозначает незаполненное пространство между отдельными символами или буквами. У большинства шрифтов кернинг задается автоматически так, чтобы выбранное начертание и размер выглядели естественно и приятно для глаз.
  • Пробелы и плотность символов - отвечают за плотность и однородность размещения символов в словах и строках по тексту.

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

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

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

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

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

Чтобы достичь совершенства в структурировании текста, надо сначала понять, как организовать информацию, для чего стоит почитать, например, Gestalt’s Principles of Perception («Гештальт-принципы восприятия»).

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

  • схожесть (внешне схожие объекты - по размеру, форме, цвету - воспринимаются вместе);
  • смежность (близость объектов в пространстве и визуальный переход от одного к другому, когда одно событие как будто вызывает другое);
  • замкнутость (несколько объектов образуют вместе фигуру завершенной формы);
  • близость (объекты, расположенные рядом, воспринимаются вместе);
  • фигура и пространство вокруг (когда пространство вокруг фигуры воспринимается как ее фон).

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

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

О чем говорят исследования?

В июле 2012 года в The New York Times был проведен эксперимент под названием «Вы оптимист или пессимист?». Читателям предлагался абзац из книги The Beginning of Infinity, за которым шли два вопроса, подразумевавших ответы «да» или «нет». Интересно, что сами ответы не так сильно интересовали исследователей, как реакции людей на выбранное начертание шрифтов и эмоциональный фон, который несет в себе тот или иной шрифт. Может ли шрифт влиять на доверие к тексту? Это и хотели узнать авторы эксперимента.

Все 40 тыс. участников видели один и тот же абзац в шести разных начертаниях: Baskerville, Helvetica, Comic Sans (профессиональные дизайнеры критикуют Comic Sans или, точнее, просто ненавидят его из-за корявого начертания и широкого распространения в работах любителей. - Прим. ред.) , Computer Modern, Georgia, Trebuchet.

В результате выяснилось следующее. Утверждения и вопросы, напечатанные шрифтом Comic Sans, вызвали наибольшее несогласие. Недалеко ушла и Helvetica: утверждения, написанные этим шрифтом, тоже особо не убедили участников опроса. Зато наибольшее согласие и доверие вызвали утверждения, написанные начертанием Baskerville.

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

Вот почему, по мнению психолога, победил шрифт Baskerville: он более формален и надежен на вид.

А теперь посмотрите на свою страницу, на которой продаются ваши товары. Отражает ли выбранный вами шрифт ваши реальные намерения и то послание, которое вы хотите донести до целевой аудитории?

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

Размер имеет значение?

Касательно размера шрифта также был проведен интересный эксперимент в Usability News. В ходе этого исследования сравнили восемь популярных в интернете шрифтов: Courier New, Georgia, Arial, Century Schoolbook, Times New Roman, Comic Sans, Tahoma, Verdana. Разобрали при этом шрифты размером 10, 12, 14 пунктов. В исследовании принимали участие 60 участников.

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

Быстрее всего люди читали тексты, набранные Times New Roman и Arial.

Также Arial и Courier влияли наилучшим образом на степень восприятия текста, в то время как текст, набранный Comic Sans, доверия не вызывал (показал наихудший результат). Наибольший уровень положительного восприятия вызвали в числе прочих шрифты Tahoma 10 пт, Courier 12 пт и Arial 14 пт.

Дискуссия о Serif и Sans Serif

Несмотря на такие вполне отчетливые результаты, не было четкого ответа на вопрос о том, что лучше использовать: Serif (шрифт с засечками) или Sans Serif (рубленый шрифт, то есть без засечек). Но последний легче воспринимается при чтении, потому что отчетлив и удобен даже при очень маленьком размере букв и символов. А значит, люди могут больше сосредоточиться на содержании текста, чем на его форме и начертании.

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

Еще одно исследование (PDF), проведенное совместно доктором Кевином Ларсоном (Kevin Larson) из Microsoft и доктором Розалиндой Пикар (Rosalind Picard) из MIT, выявило взаимосвязь между настроением и когнитивной производительностью. Были проведены в два этапа измерения трех различных характеристик: сравнительная продолжительность, шкала Лайкерта и задания на распознавание.

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

Объяснение здесь достаточно простое: хорошо и грамотно оформленный и сверстанный текст настолько увлекает своим содержанием (а не формой), что читатель будто «проглатывает» его.

Эксперименты по измерению эффективности текстов со шкалой Лайкерта выявили лишь со второй попытки преимущество хорошей типографики.

В третьей части, где происходило выполнение когнитивных заданий, испытуемым дали задачу со свечой и тест на поиск ассоциаций . Первое задание решили четыре человека в группе с хорошей типографикой, и ни одного - в группе, где текст был набран неудачным шрифтом. Со вторым заданием справились 52% респондентов в группе с хорошей типографикой, и 48% - в группе с плохой (при этом группа с хорошей типографикой еще и затратила на выполнение теста немного меньше времени, чем их коллеги).

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

Как выбрать правильный шрифт для повышения конверсии?

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

  • Помните, что выбранная вами типографика должна дополнять текст, а не подавлять заложенный в нем смысл своей формой. Прочитав текст, люди должны запомнить не шрифт, а призыв к действию или информационный посыл, которые в этом тексте заложены.
  • Всегда помните о двух принципах: взаимосвязь и контраст разных шрифтов в одном тексте. Сочетание двух разных шрифтов в одном тексте должно быть таким, чтобы при переключении между ними у читателя не появлялось ощущение, что его от текста внезапно отвлекли. Рассматривайте пары вроде Helvetica и Arial. А контрастность должна делать шрифты разными, но при этом сохранять в них хотя бы одну общую черту.
  • Не забывайте, что ключ к успеху - в простоте. Не стоит превращать ваш текст в выставку ваших любимых шрифтов.
  • Для поиска идеально подходящего шрифта изучите нишу, которую занимает ваш проект и его аудитория. Нужен ли вам формальный, строгий шрифт? Нужен ли вам крупный шрифт? Изучите рынок и его запросы, факторы, которые побуждают ваших покупателей внимательнее читать надписи и тексты.
  • Выберите типографику такую, чтобы текст внушал доверие, выглядел удобно и при этом легко читался. Внимательно отнеситесь также к пробелам между буквами и словами - они должны быть в меру широкими.
  • Не используйте заглавные буквы в начале каждого слова. 90% всех текстов, которые люди читают в интернете, набраны строчными буквами.
  • Длина строки не должна быть слишком короткой, чтобы не приходилось перескакивать постоянно взглядом на начало строки - это утомляет читателя. И она не должна быть слишком длинной. (Оптимальной шириной текста можно считать 600 пикселей. В «Ловим сетью» установлена именно такая ширина. - Прим. ред. )
  • Плотность слов и строк должна быть такой, чтобы пользователю не казалось, будто весь текст свален в одну кучу.

Хорошая типографика очень важна - в этом был убежден знаменитый перфекционист Стив Джобс

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

Выступая перед выпускниками и студентами Стэнфордского университета в 2005 году, основатель и в то время генеральный директор компании Apple Стив Джобс рассказывал, что в университете не очень интересовался обычными дисциплинами, зато записался на курсы каллиграфии, где изучал шрифты и особенности комбинирования Serif и Sans Serif. Делал он это исключительно для собственного удовольствия - и даже не предполагал, что десять лет спустя, в работе над шрифтами для революционного компьютера Macintosh ему пригодятся именно эти знания и опыт (кстати, есть легенда, что Стив Джобс уволил своего сотрудника за одну-единственную фразу «Шрифт - это не главное». - Прим. ред. ).

Подводя итоги

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

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