How-to: Типографика в дизайне email-писем
Это означает, что донести до них нужную информацию с помощью почтовой рассылки можно только если использовать реальный текст в HTML-версиях писем.
При этом, данный факт вовсе не означает, что можно использовать только Arial и Times New Roman. В сегодняшнем материале мы рассмотрим существующие возможности по работе с шрифтами в email.
Данный материал является переводом статьи из блога Litmus.
Основы типографики
Одна из главных задач при верстке почтовых рассылок заключается в том, чтобы убедиться, что почтовые клиенты и движки рендеринга не делают с письмами ничего странного. Когда дело касается текста, то решить большую часть возможных проблем можно с помощью добавления пары стилей. Например, при использовании подхода 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 или установленный шрифт без засечек.
К сожалению, 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 и некоторые другие клиенты. В частности, в ходе тестов Полу удалось добиться этого, например, в Outlook.com в Firefox.
Читайте также другие материалы от «Печкина»:
