Типографика в email-рассылках

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

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

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

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

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

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

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

Из чего состоит типографика?

Давайте рассмотрим ключевые элементы типографики:

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

Шрифт, с другой стороны, относится к гарнитуре, которая имеет определенный размер, стиль и вес. Например, Baskerville Old Face Bold является шрифтом. Поэтому в следующий раз, когда кто-то спросит вас о вашем любимом шрифте, знайте, что на самом деле это может означать гарнитуру.

Шрифты можно разделить на 2 типа: с засечками и без засечек. Шрифты с засечками (serif) легко отличить по расширению, который имеет каждый символ:

Наиболее распространенные шрифты этой категории - Times New Roman и Georgia.

Большая часть веб-типографики использует шрифты без засечек (Sans Serif), так как у них более современный и читабельный вид. По данным smashingmagazine.com, в 74% случаях в заголовках рассылок используется шрифт без засечек.

2. Длина строки: часто рассчитывается как количество слов или символов в строке, длина строки обозначает расстояние, занимаемое блоком текста, расположенным между правым и левым полями.

3. Межстрочный интервал: также известный как интерлиньяж, относится к расстоянию между базовыми линиями соседних строк. Базовая линия - это воображаемая линия, на которой лежит текст (линии).

4. Кернинг: интервал между отдельными символами или буквами.

5. Кегль: условный размер шрифта; расстояние от нижней части строчной буквы р до верхней части заглавной буквы Р.

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

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

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

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

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

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

Есть несколько правил, которых стоит придерживаться при выборе шрифта.

1. Используйте безопасные гарнитуры 

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

Стандартно для рассылок используют следующие шрифты без засечек: Arial, Impact, Lucida Grande, Tahoma, Verdana и Helvetica.

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

2. Гарнитура в письмах должна быть легко читаема

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

3. Используйте веб-шрифты

Веб-шрифты, которые не следует путать с безопасными шрифтами, становятся все более распространенными. Они полагаются на метод, отличный от первого: загрузка гарнитур из Интернета, в отличие от отдельных компьютеров, почтовых клиентов и провайдеров. Наиболее распространенный источник веб-шрифтов — Google Fonts. Самые популярные почтовые сервисы, включая Gmail и Outlook, без проблем отображают их.

4. Не используйте больше 2-х гарнитур

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

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

• они из различных категорий, но имеют одинаковую высоту строчных знаков и ширину глифов;
• основной текст набран шрифтом без засечек, а заголовки и темы - с засечками.

Эти 2 принципа помогут вам выбрать правильный шрифт. По мере того, как вы будете развивать навыки выбора шрифтов, вы разработаете свои собственные правила. Здесь нет «неправильных» или «правильных ответов».

Как почтовые клиенты отображают шрифты

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

Согласно litmus.com, следующие почтовые клиенты поддерживают веб-шрифты:

• iOS Mail 
• Apple Mail 
• Android (почтовый клиент по умолчанию, а не приложение Gmail) 
• Outlook 2000 
• приложение Outlook.com 
• Thunderbird

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

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

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

Если вы проверите html вашего письма, вы найдете примерно такой код:

style = "font-family: 'Montserrat', Arial, sans-serif;”

В приведенном примере, если шрифт Montserrat не установлен на устройстве, почтовый клиент переходит к следующему указанному шрифту Arial

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

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

Как выбрать запасные шрифты

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

• Если основной шрифт - с засечками, ваш резервный шрифт также должен иметь засечки. Обратите внимание, как отличается площадь текстового блока с основным и резервным шрифтом, например Roboto и Arial:

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

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

Цвет гарнитуры в рассылках

Высококонтрастный текст на фоне всегда легче читать. Самые распространенные цвета - черный #000000 и серый #333333 (16%). По данным SmashingMagazine, в рассылках используется 28 разных оттенков серого цвета.

Чек-лист - еще раз о главном

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

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