Всё, что нужно знать о шрифтах в рассылках

Несколько лет назад Рос Ходжекисс — супервумен email-маркетинга — написала популярный пост о шрифтах электронной почты. Недавно команда Campaign Monitor обновила эту статью силами двух других самородков от маркетинга — Джастина Ху (Justin Khoo) и Джайны Мистри (Jaina Mistry). Ну а мы решили перевести статью, потому что она суперполезная.

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

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

Вероятно, врассылках выиспользуете именно безопасные шрифты. Arial, Verdana, Georgia, Times New Roman иCourier, они исчитаются «безопасными». Тоесть, шрифтами, пригодными для «живого текста» (live text) вимейлах. Это стандартные шрифты, которые корректно отображаются наразных компьютерах, устройствах иоперационных системах.

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

Самый популярный ипростой виспользовании источник веб-шрифтов— Google Fonts. Оннесодержит некоторые популярные примеры, но там можно найти действительно интересные варианты, доступные бесплатно. Да, совершенно бесплатно. Ктомуже, вы можете загрузить любой шрифт накомпьютер, если верстаете письма вAdobe Photoshop или Sketch.

Чтобы использовать веб-шрифты в своих email-кампаниях, обратитесь к любому email-билдеру. Например, Litmus или Campaign Monitor. Мощные билдеры предлагают множество шрифтов, пригодных для email-кампаний и поддерживаемых большинством почтовых клиентов. А если шрифт не поддерживается, он будет автоматически заменён подходящим резервным вариантом — без усилий с вашей стороны. Кроме того, любой хороший email-билдер предложит полезные услуги за дополнительную плату.

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

Информация кразмышлению: большинство лицензий наиспользование веб-шрифтов вэлектронных письмах основаны начисле открытий вмесяц.

Как и другие элементы email-дизайна, веб-шрифты не на 100% совместимы со всеми почтовыми клиентами.

— Apple Mail— Lotus Notes 8— iOS Mail— Outlook 2011 for Mac— Outlook 2016— Android App— Android Mail 2.3, 4.2, 4.4

— Lotus Notes 7, 8.5 — Gmail — Yahoo! — Outlook.com, 2003, 2007, 2010, 2013 — Thunderbird — AOL — Blackberry — Alto — IBM Notes 9

Фактическая поддержка шрифта зависит отпочтового клиента иоттого, как шрифт встроен вemail.

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

Сегодня метод @import неподдерживается вAOL через IE11 иAndroid2.3.

<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">

Метод <link> полностью поддерживается почтовыми клиентами, перечисленными выше. Услуги веб-шрифтов будут предоставляться созначением href, чтобы вымогли выбрать нужный вариант. Если выразмещаете собственный, значение href придётся изменить натот адрес, покоторому находится шрифт.

<style type="text/css"> @media screen </style>

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

Впримере выше формат шрифта WOFF был импортирован. Онсчитается одним изнаиболее поддерживаемых форматов для email.

Получить версию WOFF-шрифта отGoogle Fonts можно только через Safari или Internet Explorer. Найдите нужный шрифт ивыберите его, нажав насимвол «+». Внижней части экрана появится чёрная полоса— нажмите нанеё.

Выувидите URL выбранного шрифта (выделен наскриншоте). Скопируйте иоткройте его вSafari или Internet Explorer. Сделав это, выувидите код, который нужно вставить вимейл.

Нопомните, если использовать метод всочетании сGoogle Fonts, URL вбудущем может измениться. Следите заэтим.

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

<td style wp-block-image">

Ещё один вопрос, который важно учитывать— «чувство шрифта». Если ваш выбор— шрифт сзасечками (например, Times New Roman), торезервные варианты тоже должны быть сзасечками. Аналогично при выборе шрифта без засечек (как Arial). Эти принципы гарантируют, что общий вид рассылки неизменится при форс-мажорных ситуациях. Дизайн ваших писем должен быть единым для всех клиентов.

Браво, Outlook! Онвсегда оригинален, неправдали? Даже если выправильно установили резервный шрифт, этот клиент отобразит неего, а… Times New Roman.

Хорошая новость втом, что обойти эту проблему несложно. Просто встройте вemail следующий код: