Как безопасно использовать нестандартную типографию в 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 и уже есть почтовые приложения, которые начинают следовать его примеру. Это даст отличные возможности дизайнерам для создания типографии в письмах имеено таким образом, как они этого хотят, а так же дать возможность выделяться своим клиентам на фоне первой волны использования этих свойств. К примеру, теперь вы можете создавать идентичные версии своих логотипов, без использования изображений низкого разрешения, которые могут и не отобразиться.

Как настроить рекламу в Facebook Messenger

Маркетинг влияния не работает? И вот почему

Как настроить микротекст и моментально увеличить конверсии

3 секрета удержания мобильных пользователей

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