Большинство писем в почтовом ящике пользователи если и открывают, то лишь бегло просматривают или сразу закрывают. У нас есть всего несколько секунд, чтобы заинтересовать читателя и мотивировать его дочитать текст до конца.
Привлечёт ли рассылка внимание получателя, зависит не только от содержания письма, но и от его формы. Если воспринимать написанное визуально будет сложно, пользователь с большей вероятностью закроет письмо. На лёгкость восприятия влияют вёрстка и типографика. О последней и поговорим в этой статье. Разберёмся, какие шрифты лучше подходят для email-рассылок и какими принципами стоит руководствоваться, чтобы облегчить чтение письма.
Как работает типографика в email-рассылках
Типографика в оформлении email-рассылок и графическом дизайне — это визуальное представление текста. Она отвечает за:
- выбор конкретных шрифтов, их начертания и плотности,
- расположение текстовых блоков в макете относительно изображений и других элементов,
- сочетание размеров и цветов текста,
- размеры абзацев, длину строки, интерлиньяж,
- набор текста — правильные тире, кавычки и другие нюансы.
Основная задача типографики — сделать письмо легко читаемым и визуально привлекательным. Тексты в email-рассылках с хаотичным набором шрифтов, белыми буквами на салатовом фоне, слишком узкими или широкими интервалами между строк и другими ошибками в типографике читать неудобно. Пользователю потребуется приложить слишком много усилий, чтобы вникнуть в написанное и понять суть.
Помимо повышения читабельности в email-рассылках, типографика помогает создавать визуальную иерархию и управлять вниманием.
Визуальная иерархия — это порядок, в котором получатель будет изучать элементы письма. Обычно она выстраивается от наиболее к наименее важным. Типографика помогает проложить путь пользователя с помощью размеров шрифтов, выделения цветом, расположения текстовых блоков, отступов между ними и другими элементами письма. Например, в письме ниже получатель сначала прочитает заголовок, затем — название книги и кнопку «Читать». Только потом его взгляд упадёт на вводный абзац и аннотацию, если сразу не кликнет по кнопке и не перейдёт в приложение.
Грамотно используя правила, принципы и инструменты типографики, вы сможете повлиять на то, какие элементы письма будут привлекать больше внимания пользователей. Например, сделаете акцент на выгодных условиях, а незначительные детали оставите менее заметными.
Управление вниманием нужно, чтобы пользователь точно заметил и усвоил самые важные посылы письма. Визуальная иерархия — чтобы он изучил их в нужной последовательности.
Читайте также: Удобство и эстетика: что нужно знать про UX/UI-дизайн писем
Как подобрать шрифты для письма
Прежде чем выбирать шрифт для email-рассылки, нужно разобраться, какие вообще бывают шрифты. Всего выделяют 5 больших групп, которые сильно отличаются визуально и сферами применения:
- антиква — шрифт с засечками, чаще используется и лучше подходит для книг и печатной продукции, но встречается и в типографике email-рассылок;
- брусковый — шрифт с визуально тяжёлыми засечками и без контраста между штрихами, встречается в книгах и рекламных материалах;
- гротески — шрифты без засечек, именно они чаще всего используются в типографике сайтов, веб-сервисов и мобильных приложений;
- рукописные — шрифты, которые визуально похожи на текст, написанный от руки, из-за сложности восприятия используются редко и только для выделения отдельных слов или коротких фраз;
- декоративные или акцидентные — класс разнообразных и непохожих друг на друга броских шрифтов, которые используются для привлечения внимания, например, на рекламных баннерах, и совсем не подходят для набора лонгридов.
Чтобы подобрать подходящие шрифты, руководствуйтесь следующими принципами типографики email-рассылок:
- лёгкость чтения с разных экранов. Не набирайте рассылки рукописными и акцидентными шрифтами. Особенно это касается основных абзацев;
- соответствие фирменному стилю. Если у компании есть брендбук, в котором прописаны фирменные шрифты, используйте для рассылки именно их — не ошибётесь;
- визуальная гармоничность. Ограничьтесь двумя шрифтами — по одному для заголовков и основного текста. Если возьмёте больше, письмо будет выглядеть безвкусно. Кроме того, это размоет фокус внимания читателя;
- авторское право. Чтобы не опасаться проблем с законом, используйте общедоступные бесплатные шрифты или покупайте лицензии на авторские;
- доступность на всех устройствах и во всех почтовых клиентах. Это ещё один довод в пользу распространённых и общедоступных шрифтов — они установлены на всех устройствах, поэтому текст нормально отобразится у всех получателей;
- сочетаемость. Выбрав разные шрифты для основного текста и заголовков, следите за тем, чтобы они гармонично смотрелись друг с другом.
Если вы всё-таки выбрали шрифт не из стандартных наборов, и он не установлен у пользователя на устройстве, в письме отобразится стандартная шрифтовая пара — Arial или Tahoma. Чтобы этого избежать, добавьте в шаблон письма html-код, который будет подтягивать нестандартный шрифт из доверенного источника.
Если брендбука нет, а грамотно подобрать шрифты с учётом всех нюансов не получается или не хватает времени, можно сверстать письмо на основе готового шаблона в визуальном конструкторе. Там уже подобраны шрифтовые пары с учётом всех условий, в том числе — доступности на разных устройствах. Найти такие шаблоны можно, например, в каталоге омниканальной CDP-платформы Sendsay. Любой из них легко адаптировать под свою рассылку — настроить брендовые цвета и скорректировать структуру.
Больше про оформление текста мы рассказывали в статье «Как подобрать шрифт для email-рассылки».
На что ещё обратить внимание в типографике email-рассылок
Чтобы типографика помогала повышать эффективность email-рассылки, помимо выбора шрифта стоит проработать и другие детали.
Размер шрифта. Читабельность текста снижают как слишком мелкие, так и слишком крупные буквы. Поэтому с основными текстовыми блоками экспериментировать не стоит, особенно если в рассылке лонгрид. Используйте проверенные и привычные пользователям 12–14 кегли. Заголовки набирают шрифтом крупнее — 18–30 кеглей. Также крупный шрифт можно использовать для коротких и важных фрагментов вроде рекламных слоганов и предложений.
Не стоит в одном макете использовать больше 2–3 разных размеров шрифта. Например, по одному для основного текста, заголовков и рекламных предложений. Если сделаете больше, письмо превратится в пёструю простыню. Внимание пользователя рассеется, ему будет сложно понять, что здесь важное, а что второстепенное.
Цвет текста и его сочетание с фоном. Эти параметры тоже сильно влияют на читабельность письма. Для основных текстовых блоков лучше выбрать один цвет. Не слишком яркий, но хорошо контрастирующий с фоном, чтобы у читателя не уставали глаза и ему не приходилось прилагать усилия для чтения. Так, на светлом фоне комфортнее всего читать тёмно-серый текст.
Отдельные небольшие фрагменты текста можно выделять другим цветом. Будет здорово, если вы возьмёте его из брендбука и будете оформлять такие блоки во всех письмах одинаково. Яркие акценты помогут управлять вниманием, а единый стиль типографики повысит узнаваемость бренда.
Начертание шрифта — это его графическая разновидность по толщине и наклону букв. Чаще всего у шрифта есть 3 начертания — обычное, полужирное или болд и курсивное. Однако встречаются шрифты с большим выбором начертаний — от самого тонкого до самого жирного.
Для основного текста рассылки стоит выбрать золотую середину — читабельность ухудшают как слишком тонкие, так и слишком толстые буквы. Курсив и полужирный текст можно использовать для выделения главного и расстановки акцентов. В этой статье полужирным выделены слова в начале некоторых абзацев — чтобы визуально разделить блоки о разных нюансах типографики в email-рассылках. В письмах болдом можно выделить, например, промокод.
В экспериментах с начертанием тоже важно не перестараться. Большие фрагменты текста болдом или курсивом, равно как и разбросанные по всему тексту отдельные полужирные слова затрудняют чтение, рассеивают внимание, наконец, выглядят безвкусно. Последнее плохо влияет на впечатление, которое производит бренд в рассылках.
Если важных элементов много, то можно постараться выделить их логически — так, чтобы фрагменты с полужирным шрифтом собирали текст в единую картинку.
Например: «Акция действует до 12 декабря. Добавьте товар в корзину и используйте промокод АВС, чтобы получить скидку 25%».
Реже встречаются подчёркнутый и зачёркнутый варианты начертания текста. С ними нужно быть аккуратнее.
Подчёркнутый текст пользователь воспринимает как ссылку, поэтому не стоит использовать этот вариант оформления для других целей. Пользователь будет введён в заблуждение и разочарован.
Зачёркнутый вариант написания используют для выделения блоков снижения цены или изменения условий проведения акции, мероприятия. Их тоже стоит использовать аккуратно — большой объём зачёркнутого текста нечитаем. Кстати, перечёркивание можно использовать и в теме письма, но оно отображается не во всех почтовых клиентах.
Интерлиньяж или межстрочный интервал — тоже часть типографии. От него также зависит, насколько легко пользователю будет читать текст email-рассылки. Ухудшает читабельность как слишком маленький, так и слишком большой интерлиньяж. В первом случае строки слипаются, и пользователю сложно фокусировать внимание на конкретных словах. Во втором — абзац не выглядит единым целым, читателю приходится прилагать усилия, чтобы перейти с одной строки на другую, не потеряв мысль. И от того и от другого быстро устают глаза.
Единственно верного значения интерлиньяжа нет. Его стоит выбирать в зависимости от конкретного шрифта, его размера, длины строки. Простое правило, на которое можно ориентироваться: комфортный для чтения интерлиньяж приблизительно равен 120% от размера шрифта. Если в абзаце вы используете текст размером 12 кеглей, интерлиньяж можно поставить 14–15 кеглей. Это значение стоит корректировать в зависимости от длины строки: если у вас в вёрстке узкие колонки текста, как в примере ниже, интерлиньяж стоит уменьшить. Если длина строки большая — увеличить.
Размер абзацев. Это пункт, конечно, больше относится к созданию самого контента, ведь размеры абзацев определяет автор email-рассылок при написании. Однако текст в документе и на макете выглядит по-разному. Например, автор писал исходя из всей ширины строки, а дизайнер решил использовать двухколоночную вёрстку: справа текст, слева изображение. Из-за короткой длины строки абзац стал выглядеть слишком большим. В этом случае лучше пересмотреть текст: сократить или разбить на несколько абзацев, чтобы он не пугал пользователя полотном текста, и читать его было проще.
Читайте также: Зачем и как лучше всего использовать анимированные gif-изображения в email-рассылках
Выравнивание текста. Основное правило выравнивания текста письма: все элементы должны быть выставлены по единому принципу. Если текст выровнен по левому краю, то и кнопки, и изображения должны быть расположены так же.
Классический вариант выравнивания — слева направо, без растягивания по ширине. Так, пользователь будет читать письмо слева направо, без прерываний и скачков по экрану.
5 важных нюансов типографики в email-рассылках
- Не используйте более двух цветов для текста. Большое количество разноцветных ярких акцентов размоет фокус: прочитать и уловить суть будет тяжело. Кроме того, такие рассылки могут выглядеть безвкусно.
- Размер шрифта — для выделения заголовков и управления вниманием. Основной текст рассылки лучше набрать шрифтом одного размера — универсального и наиболее комфортного для чтения.
- Следите за висячими предлогами и союзами из 1–3 букв. Не стоит оставлять их в конце строки. Это выглядит неаккуратно. К тому же такие слова чаще всего связаны по смыслу со следующими, и понять суть написанного проще, если они находятся на одной строке. Используйте онлайн-типограф, чтобы избежать этого.
- Ставьте правильные тире и «кавычки-ёлочки». Это уже вопрос грамотности: тире и дефис — разные знаки, которые решают разные задачи. А для выделения прямой речи и названий в русском языке используются «ёлочки», «лапки» — только на латинице и для дополнительного выделения внутри «ёлочек». Игнорирование этих правил может негативно сказаться на доверии пользователей и репутации бренда в целом.
- Не переусердствуйте с болдом и курсивом. Эти решения не находятся под абсолютным запретом, однако использовать их стоит только там, где это оправдано. Например, можно выделить пару наиболее важных моментов — тех, на которые пользователь точно должен обратить внимание.
