4 совета по типографике для дизайнеров email-рассылок

Если мы чему-то и научились как дизайнеры email-рассылок за последние несколько лет, так это тому, что письма на основе изображений ненадёжны в лучшем случае и приводят к разочарованию, гневу и отпискам в худшем. Как показывают последние исследования, до 43% подписчиков отключают отображение изображений. Хотя стилизованный ALT-текст может смягчить некоторые проблемы, единственный надёжный способ донести ваше сообщение до подписчиков — использовать настоящий текст в HTML-коде ваших кампаний.

**Полное руководство по веб-шрифтам в email**

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

Если вы слишком долго полагались на письма на основе изображений (да, раньше они были стандартным решением для большинства компаний), возможно, вы не знаете о последних достижениях в типографике для email. Мы больше не ограничены использованием Arial и Times New Roman, и веб-шрифты — это лишь верхушка айсберга возможностей. В этой статье мы рассмотрим основы типографики в email и узнаем несколько полезных советов от дизайнера Пола Эйри о том, как вывести текст на новый уровень в наших дизайнах.

## Основы типографики

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

или GTFO**, поэтому почти все стили применяются на уровне ячеек таблицы.

`

Здесь размещается текст.

`

Для этой ячейки таблицы мы рекомендуем добавить следующие CSS-стили, скорректированные под ваши предпочтения: color, font-family, font-size, font-weight и line-height.

`

Здесь размещается текст.

`

После объявления эти стили обеспечат корректное отображение текста даже в самых «враждебных» почтовых приложениях. Кроме того, если мы размещаем каждый элемент контента в отдельной ячейке таблицы, мы можем легко стилизовать эти компоненты так, как нам нужно, не беспокоясь о проблемах наследования. Если нам нужно выделить определённый фрагмент текста внутри большого блока, мы можем обернуть его в тег span и использовать встроенные стили:

`

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

`

Хотя в приведённых выше примерах мы используем Arial (да, знаю, знаю…), вы можете выйти за рамки этих базовых шрифтов — по крайней мере, в некоторых почтовых клиентах. Давайте посмотрим, как это сделать.

## Использование веб-шрифтов

В августе мы провели вторую ежегодную конференцию по дизайну email. Одним из наших любимых докладов был «HTML-типографика в email» от дизайнера Пола Эйри. В своём выступлении Пол подробно рассмотрел более продвинутые аспекты типографики и их поддержку в email.

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

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

«`

«`

Затем во встроенных стилях мы можем добавить шрифт в объявление font-family:

`

Здесь размещается текст.

`

Теперь в почтовых клиентах, поддерживающих веб-шрифты, текст будет отображаться с использованием выбранного нами шрифта. А в остальных клиентах текст будет отображаться с использованием альтернативных шрифтов — в данном случае Helvetica, Arial или универсального sans-serif.

К сожалению, Outlook не переключится на альтернативные шрифты (в этом нет ничего удивительного!). Вместо этого он проигнорирует наш стек шрифтов и отобразит текст с использованием Times New Roman. К счастью, мы можем учесть это поведение, используя CSS-класс для таргетинга текста, а затем с помощью условных комментариев предоставить Outlook альтернативный стек шрифтов, который он действительно будет использовать.

«`

Здесь размещается текст.

«`

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

## Несколько колонок без ячеек таблицы

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

Решение — использовать новое CSS-свойство column-count. Предупреждаем: мы находимся на Диком Западе — поддержка column-count очень ограничена среди почтовых клиентов (и в вебе, если на то пошло). Однако это элегантное решение, которое корректно откатывается в почтовых клиентах без поддержки.

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

`

Здесь размещается текст.

`

Теперь, сколько бы контента мы ни добавили, он будет естественно перетекать между двумя колонками. А при отсутствии поддержки column-count откатится к одноколоночному макету. Как мы уже упоминали, поддержка не самая лучшая.

Это один из тех случаев, когда применение стилей к тегу абзаца действительно работает в вашу пользу. В своих тестах Пол обнаружил, что при использовании column-count для абзаца работают AOL Mail и Outlook.com в Firefox, помимо ранее упомянутых почтовых клиентов.

Пол фактически использует этот приём в своём собственном информационном бюллетене Type E.

## Лишь верхушка айсберга

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

## ПРОВЕРЯЙТЕ ТИПОГРАФИКУ В ВАШИХ КАМПАНИЯХ

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