Веб-шрифты в email-рассылках: взгляд дизайнера

Успех любого email-письма зависит от того, насколько корректно отображается его дизайн.

Более 70% пользователей удалят письмо в течение трех секунд или быстрее, если оно некорректно отображается на их устройстве — вне зависимости от того, что это за устройство. Еще 15% просто отпишутся от рассылки.

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

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

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

## Веб-шрифты против «безопасных» шрифтов: в чем разница?

Здесь легко запутаться, поэтому давайте определим принципиальное различие. Хотя некоторые стили пересекаются, веб-шрифты (Web Fonts, WF) и «безопасные» шрифты (Web Safe Fonts, WSF) — это не одно и то же.

С точки зрения адаптивного дизайна, WF и WSF работают по-разному при взаимодействии с почтовыми клиентами, браузерами и устройствами.

### Веб-безопасные шрифты (Web-safe fonts)

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

Все верно: веб-безопасные шрифты предустановлены практически на каждом компьютере, ноутбуке, планшете или телефоне. Дизайнеры чувствуют себя уверенно, используя WSF, потому что знают, что каждое устройство отобразит их правильно. Многие крупные компании, такие как American Apparel и Target, до сих пор используют WSF — короче говоря, эти шрифты остаются надежными.

### Веб-шрифты (Web fonts)

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

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

#### Почему это важно?

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

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

## Плюсы и минусы веб-шрифтов

Вы уже знаете, что безопасные шрифты — это эталон стабильности и доступности (если это ваш приоритет), но как насчет веб-шрифтов?

Как сделать лучший выбор? Давайте взвесим все «за» и «против».

### Плюс/минус: большинство клиентов их поддерживают, но есть одно огромное исключение

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

Большинство клиентов их поддерживают, включая:

— IOS Mail

— Apple Mail

— Android

— Outlook.com (веб-версия)

— Outlook 2000

— Thunderbird

Заметили что-то в этом списке?

Gmail, занимающий около 28% рынка, поддерживает не все WF. Это не значит, что Gmail вам не подходит: он поддерживает некоторые из них — Google Sans, Roboto, Roboto Draft и Sans-serif. Однако важно тщательно подходить к выбору веб-шрифтов.

### Плюс: соответствие логотипу и графике бренда

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

### Плюс: можно выбрать «резервный» шрифт (Plan B)

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

### Минус: они могут выглядеть иначе

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

### Минус: их может быть трудно читать

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

## Лучшие практики использования веб-шрифтов

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

### Понимайте (и сегментируйте) свою аудиторию

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

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

### Уделяйте особое внимание размеру

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

### Выбирайте подходящий резервный шрифт

Если что-то пойдет не так, у большинства провайдеров есть свой «аварийный» шрифт:

— Apple: Helvetica

— Gmail: Arial

— Outlook: Calibri

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

Также учитывайте эстетику. Если вы выбрали для заголовков sans-serif шрифт вроде Roboto, не стоит выбирать в качестве резервного Times New Roman с засечками — это будет смотреться неуместно.

### Используйте мультимедиа вместо текста

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

Единственный нюанс: подписчик должен разрешить отображение картинок.

### Начните с Google Fonts

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

### Добавьте веб-ссылку

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

### Тестируйте, тестируйте и еще раз тестируйте

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

## Заключение

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