Исследования показывают, что в почтовых программах до 43% email-подписчиков отключено отображение картинок. Это означает, что донести до них нужную информацию с помощью email-рассылки можно только если использовать реальный текст в HTML-версиях писем.
При этом, данный факт вовсе не означает, что можно использовать только Arial и Times New Roman. В сегодняшнем материале мы рассмотрим существующие возможности по работе с шрифтами в email.
Основы типографики
Одна из главных задач при верстке почтовых рассылок заключается в том, чтобы убедиться, что почтовые клиенты и движки рендеринга не делают с письмами ничего странного. Когда дело касается текста, то решить большую часть возможных проблем можно с помощью добавления пары стилей. Например, при использовании подхода
<td> можно применять их на уровне ячейки в таблице:<td>Здесь какой-то текст.</td>
К ячейкам можно применять CSS-стили, описывающие цвет текста (color), используемый шрифт (font-family), его вес (font-weight) и высоту строки (line-height).
<td style=”color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;”>Some copy goes here.</td>
Если объявить эти стили, то текст будет адекватно рендериться даже в самых «враждебных» почтовых клиентах. Если хранить каждую часть контента в своей ячейке, то эти компоненты можно стилизовать без необходимости заботиться о проблемах наследования. Если, например, нужно поработать с конкретным участком текста в большом блоке, то этот нужный текст можно завернуть в
<span> и использовать инлайн-стили:<td style=”color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;”>Здесь какой-то текст. <span style=”font-weight: bold; font-style: italic;”>Привлекаем внимание к контенту</span> с помощью стилей шрифта</td>
В примерах выше мы использовали Arial (да-да), но ничто не мешает пойти дальше. Давайте посмотрим, как это можно сделать.
Использование веб-шрифтов
Данный метод хорошо описал дизайнер Пол Эйри (Paulr Airy). Его суть заключается в использовании веб-шрифтов, которые не установлены на устройстве пользователя. Делается это с помощью их включения в CSS. В вебе этот метод давно и успешно применяется, но среди email-дизайнеров только набирает популярность.
Существует несколько способов включения веб-шрифтов, но Пол рекомендует использовать внешний файл со стилями, который используется для «вытягивания» шрифтов с сайтов вроде Google Web Fonts.
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
Затем в инлайн-стилях можно добавить нужный шрифт в декларацию
font-family:<td style=”color: #444444; font-family: ‘Open Sans’, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;”>Здесь какой-то текст.</td>
Теперь в почтовых клиентах, которые поддерживают веб-шрифты, текст будет отображаться с помощью выбранного заранее шрифта. В противном случае, будут использоваться перечисленные альтернативные шрифты — у нас это Helvetica, Arial или установленный шрифт без засечек.
| Поддержка веб-шрифтов в почтовых клиентах через ссылку на внешний файл стилей |
|
| Apple Mail 6 |
 |
| Lotus Notes 8 |
|
| Outlook 2000 |
|
| Outlook 2011 on Mac |
|
| Thunderbird |
|
| iPad |
|
| iPhone |
|
| Android 2.3 |
|
| Android 4.2 |
|
К сожалению, Outlook не станет отображать наши альтернативные шрифты (кто бы сомневался, конечно). Вместо этого, он проигнорирует все относящиеся к ним стили и отобразит текст с помощью Times New Roman. Но и с этим можно справиться с помощью специального CSS-класса — он будет выделять нужный текст через условные комментарии передавать Outlook информацию об используемом наборе шрифтов.
<!--[if mso]>
<style type=”text/css”>
.body-text {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->
<td class=”body-text” style=”color: #444444; font-family: ‘Open Sans’, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;”>Здест какой-то текст.</td>
Теперь вместо Times New Roman по-умолчанию письма будут отображаться с помощью Arial или другого установленного шрифта без засечек.
Многоколоночный вид без табличных ячеек
Пол также говорит о нежелательности использования для размещения текста несколько колонок-столбцов. Однако поскольку большинство писем верстают в табличном формате, в котором всегда есть столбцы, то напрашивается простое использование соседних ячеек для отображения текста. Но что, если нам нужно добиться «перетекания» текста из одного столбца в другой, вместо «хардкодинга» контента в конкретные ячейки?
Здесь на помощь приходит CSS-свойство column-count. Но важно помнить: с этого момента мы вступаем на дикие земли, в которых редко можно встретить приложение, поддерживающее column-count.
С помощью этого свойства можно задать число столбцов, на между которыми будет разбиваться текст. Вот как выглядит код:
<td style=”-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;”>Здесь какой-то текст.</td>
Теперь вне зависимости от объёма текста, он будет естественным образом разбит между двумя столбцами. В том случае, если почтовая программа, в которой открывается письмо, не поддерживает column-count, сообщение отобразится в одноколоночном виде.
Как сказано выше, с поддержкой как раз все не очень хорошо:
| Поддержка почтовыми клиентами многоколоночности через column-count |
|
| Apple Mail 6 |
|
| Outlook 2011 on Mac |
|
| AOL Mail (Explorer) |
|
| AOL Mail (Chrome) |
|
| iPad |
|
| iPhone |
|
| Android 2.3 |
|
| Android 4.2 |
|
Иногда с помощью различных лайфхаков (например, применение стилей к тегу параграфа) удается заставить отображать письма с column-count и некоторые другие клиенты. В частности, в ходе тестов Полу удалось добиться этого, например, в Outlook.com в Firefox.