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