Как безопасно использовать нестандартную типографию в HTML письмах

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

Возможно вы уже сталкивались с таким, что вы придумали отличную типографическую идею, которая отлично работает на вебе и использовалась в вашей недавней email рассылке. Применили всё это дело и ушли из офиса, довольные собой и результатами вашей работы. Но потом внезапно вы получаете несколько звонков от клиентов, которые заявляют о том, те прекрасные веб шрифты, которые вы выбрали вместе с ними, были заменены на стандартный Times New Roman в их мобильном клиенте, через который они и читают свои рассылки. Как такое случилось?

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



Безопасные шрифты для писем

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



Запасные шрифты

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

Самые распространение email программы используют следующие запасные шрифты:

Apple Mail – Helvetica

Gmail – Arial

Microsoft Outlook – Calibri

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

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

К примеру, если мы хотим использовать жирный Georgia с запасным шрифтом Times New Roman, вместо стандартного Calibri у пользователей Microsoft, нам надо использовать следующий код.

<style type=”text/css”>

.text {

font-family: Georgia, Times New Roman, serif;

}

</style>



<td class=”text” style="font-family: Georgia, Times New Roman, serif;”>
I’m keeping it safe by using email-safe fonts!</td>

Но конечно же у Outlook 2007/2010/2013 свой подход к этим вещам и вообще своё видение решения проблемы. Поэтому мы добавим несколько строк специально для него.

<!--[if mso]>

<style type=”text/css”>

.text {

font-family: Georgia, Times New Roman, serif;

}

</style>

<![endif]-->



<td class=”text” style="font-family: Georgia, Times New Roman, serif;”>
I’m keeping it safe by using email-safe fonts!</td>

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



Нестандартные пользователи

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

На данный момент веб шрифты поддерживаются следующим списком программ, которые кстати входят в десятку самых используемых email клиентов. И так, это – iOS Mail, Apple Mail, Android (не не Gmail клиент), Outlook 2000, Outlook.com приложение, Thunderbird.

Существует несколько отличных библиотек для шрифтов, таких как Envato Elements, Typekit и Google fonts, который кстати поддерживает веб шрифты, в которых есть действительно красивые бесплатные варианты. После выбора шрифта, сервис даст вам уникальную ссылку, которую вы можете использовать тремя разными способами для добавления в ваше письмо.

Ниже мы покажем, как использовать шрифта от Google под названием Roboto, но вы также можете использовать свои собственные шрифты, просто сменив ссылку в месте, где располагается путь к самому шрифту. Обязательно убедитесь в том, что используемый вами метод применяется в тэге <style> самого письма.

<link>

Этот метод предпочтителен для Google Fonts и поддерживается всеми почтовыми клиентами, перечисленными выше.

<link href=
"https://fonts.googleapis.com/css?family=Roboto" 
rel="stylesheet" type="text/css">


И конечно же, вот специальный код для Outlook

<!--[if mso]>

<link href="https://fonts.googleapis.com/css?family=Roboto" 
rel="stylesheet" type="text/css"> <![endif]-->

@import

Если вы предпочитаете CSS или самые простые варианты, то это должно быть именно вашим выбором

@import url('https://fonts.googleapis.com/css?family=Roboto');


@font-face

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

@font-face {

font-family: "My-roboto-font";

font-style: normal;

font-weight: 400;

src: local('Roboto Regular'), local(
'Roboto-Regular'), url("Roboto-Regular.ttf") format('truetype');

}



.roboto {

font-family: "My-roboto-font", Verdana, sans-serif;

}

</style>

Всегда используйте инлайновый CSS в добавление к примеру выше, вместе с специальным кодом для Outlook.



Что нас ждет дальше?

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

Недавно Gmail стал поддерживать CSS свойства, такие как font-feature-settings, font-kerning вместе с column-count и уже есть почтовые приложения, которые начинают следовать его примеру. Это даст отличные возможности дизайнерам для создания типографии в письмах имеено таким образом, как они этого хотят, а так же дать возможность выделяться своим клиентам на фоне первой волны использования этих свойств. К примеру, теперь вы можете создавать идентичные версии своих логотипов, без использования изображений низкого разрешения, которые могут и не отобразиться.

Узнайте какой вы email маркетолог

Объясняем, что же такое Bounce Rate

Что нужно знать при выборе eСommerce платформы

Email маркетинг советы. Как правильные цвета увеличивают вовлечение

Получай лучшие статьи по
интернет-маркетингу на
свою почту