[Перевод] How-to: Типографика в дизайне email-писем09.06.2015 16:03

Исследования показывают, что в почтовых программах до 43% email-подписчиков отключено отображение картинок. Это означает, что донести до них нужную информацию с помощью email-рассылки можно только если использовать реальный текст в HTML-версиях писем.

При этом, данный факт вовсе не означает, что можно использовать только Arial и Times New Roman. В сегодняшнем материале мы рассмотрим существующие возможности по работе с шрифтами в email.

Основы типографикиОдна из главных задач при верстке почтовых рассылок заключается в том, чтобы убедиться, что почтовые клиенты и движки рендеринга не делают с письмами ничего странного. Когда дело касается текста, то решить большую часть возможных проблем можно с помощью добавления пары стилей. Например, при использовании подхода можно применять их на уровне ячейки в таблице: Здесь какой-то текст. К ячейкам можно применять CSS-стили, описывающие цвет текста (color), используемый шрифт (font-family), его вес (font-weight) и высоту строки (line-height). Some copy goes here. Если объявить эти стили, то текст будет адекватно рендериться даже в самых «враждебных» почтовых клиентах. Если хранить каждую часть контента в своей ячейке, то эти компоненты можно стилизовать без необходимости заботиться о проблемах наследования. Если, например, нужно поработать с конкретным участком текста в большом блоке, то этот нужный текст можно завернуть в и использовать инлайн-стили: Здесь какой-то текст. Привлекаем внимание к контенту с помощью стилей шрифта В примерах выше мы использовали Arial (да-да), но ничто не мешает пойти дальше. Давайте посмотрим, как это можно сделать.Использование веб-шрифтов Данный метод хорошо описал дизайнер Пол Эйри (Paulr Airy). Его суть заключается в использовании веб-шрифтов, которые не установлены на устройстве пользователя. Делается это с помощью их включения в CSS. В вебе этот метод давно и успешно применяется, но среди email-дизайнеров только набирает популярность.Существует несколько способов включения веб-шрифтов, но Пол рекомендует использовать внешний файл со стилями, который используется для «вытягивания» шрифтов с сайтов вроде Google Web Fonts.

Затем в инлайн-стилях можно добавить нужный шрифт в декларацию font-family: Здесь какой-то текст. Теперь в почтовых клиентах, которые поддерживают веб-шрифты, текст будет отображаться с помощью выбранного заранее шрифта. В противном случае, будут использоваться перечисленные альтернативные шрифты — у нас это Helvetica, Arial или установленный шрифт без засечек.К сожалению, Outlook не станет отображать наши альтернативные шрифты (кто бы сомневался, конечно). Вместо этого, он проигнорирует все относящиеся к ним стили и отобразит текст с помощью Times New Roman. Но и с этим можно справиться с помощью специального CSS-класса — он будет выделять нужный текст через условные комментарии передавать Outlook информацию об используемом наборе шрифтов.

Здест какой-то текст. Теперь вместо Times New Roman по-умолчанию письма будут отображаться с помощью Arial или другого установленного шрифта без засечек.Многоколоночный вид без табличных ячеек Пол также говорит о нежелательности использования для размещения текста несколько колонок-столбцов. Однако поскольку большинство писем верстают в табличном формате, в котором всегда есть столбцы, то напрашивается простое использование соседних ячеек для отображения текста. Но что, если нам нужно добиться «перетекания» текста из одного столбца в другой, вместо «хардкодинга» контента в конкретные ячейки? Здесь на помощь приходит CSS-свойство column-count. Но важно помнить: с этого момента мы вступаем на дикие земли, в которых редко можно встретить приложение, поддерживающее column-count.

С помощью этого свойства можно задать число столбцов, на между которыми будет разбиваться текст. Вот как выглядит код:

Здесь какой-то текст. Теперь вне зависимости от объёма текста, он будет естественным образом разбит между двумя столбцами. В том случае, если почтовая программа, в которой открывается письмо, не поддерживает column-count, сообщение отобразится в одноколоночном виде.Как сказано выше, с поддержкой как раз все не очень хорошо:

Иногда с помощью различных лайфхаков (например, применение стилей к тегу параграфа) удается заставить отображать письма с column-count и некоторые другие клиенты. В частности, в ходе тестов Полу удалось добиться этого, например, в Outlook.com в Firefox.Читайте также другие материалы от «Печкина»: