• Дизайн
• 4 мин на чтение
• 8495

Что нужно знать о типографике в email

Артур Кох, занимающийся созданием и верстком email писем, рассказал в блоге на Medium о том, почему типографика в электронных рассылках очень важна и про нее никогда не стоит забывать.

В данный момент я работаю над принципиально новой версией своего замечательного фреймворка для верстки писем и типографика — это очень важный аспект. Расскажу об основных моментах.

Plain/text

Среди технически подкованного населения бытует мнение, что html письма должны умереть. Но это мнение имеет ряд недостатков:

1. Мы не можем ограничить ширину строки для более комфортного чтения письма
2. Мы не можем использовать иконки соцсетей и фотографии, которые способствуют упрощению коммуникации с читателем
3. Мы не можем слать маркетинговый bullshit

Ограничиваем длину строки сохраняя адаптивность без медиазапросов

<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center"><tr><td>
<![endif]-->

<table width="600" style="width:100%; max-width:600px;" align="center"><tr><td>

...

</td></tr></table>

<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->

Шрифты

Каждая платформа(с которой просматривается письмо) имеет свои дефолтные шрифты, что не всегда удобно и уместно:

• Windows: Times
• Windows Phone: Segoe
• iOS и OSX: Helvetica на старых версиях, San Francisco на новых
• Android: Roboto

Оставлять этот набор нативным не очень практично, так как Times выбивается из общего ритма наличием засечек. Поэтому в качестве стандартного решения, обычно, выбирается семейство Arial, Helvetica, sans-serif; Но этот вариант достаточно глуп, в виду того, что Arial присутствует на всех платформах, а Helvetica не присутствует на Windows вовсе. Следовательно мы нигде не получим Гельветику.

Я же предлагаю использовать более интересный вариант:

font-family: '-apple-system', 'roboto', Helvetica, Arial, sans-serif;

На выходе мы получаем условную нативность без богомерзкого Times.

Форматирование

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

Задавая форматирование важно указывать максимальное количество стилей для элементов, чтобы избежать нативных сюрпризов.

Заголовки:

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: '-apple-system', 'roboto', Helvetica, Arial, sans-serif;
    display: block;
    font-weight: bold;
    Margin: 1em 0;
    text-align: left;
}

h1 {
    font-size: 24px;
    line-height: 27px;
}

Блочность задается для того, потому что, например, в light версии gmail заголовки являются инлайновыми. Margin указывается с большой буквы для того, чтобы обойти “вырезание” этого свойства некоторыми версиями Outlook.

Все вышеперечисленное также касается и абзацев текста.

Ссылки

Оформление ссылки выглядит следующим образом:

<a href="#" target="_blank" style="color:#ff9900 !important; 
text-decoration:underline;"><span style="color:#ff9900;">Click Me</span></a>

Подобная конструкция защищает ссылки от их окрашивания в нативные цвета почтовых клиентов.

Начертания

Начертания текста предпочтительнее всего указывать короткими html тегами типа <b>, <i>, <s> при этом инлайново описывая эти начертания через CSS

<b style="font-weight:bold;">Bold Text</b>
<i style="font-style:italic;">Italic Text</i>
<s style="text-decoration:line-through;">Deleted Text</s>

На современных платформах и почтовых клиентах font-weight можно варьировать от 100 до 900, если это позволяет шрифт. Для старых платформ рекомендуется оставлять fallback:

font-family: '-apple-system', 'roboto', Helvetica, Arial, sans-serif;
font-weight: normal;
font-weight: 300;

Списки

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

Выравнивание

Выравнивать блочные элементы можно следующими способами:

<div align:center;>Centered Text</div>

<p align="center">Centered Text</p>
<p style="text-align:center;">Centered Text</p>

<h1 style="text-align:center;">Centered Text</h1>

<td align="center"><p align="center">Centered Text</p></td>
<td style="text-align:center;">Centered Text</td>

А инлайновые и табличные вот так:

<center>Centered Text</center>

<center><table align="center">....</table></center>

Правое выравнивание в большинстве случаев нежелательно по той простой причине, что это не вписывается в адаптивные письма. Проблему придется решать медиазапросами. А верстать письма на медиазапросах — дилетанство.

Есть лишь один уместный пример использования правого выравнивания — табличные данные:

<table width="100%">
<tr>
<td>Black Dildo</td>
<td align="right">80 USD</td>
</tr>
</table>

Блочная модель

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

• Форматирование для блочных элементов и ячеек таблиц
• Вертикальный Margin(c большой буквы) для блочных элементов
• padding только для ячеек таблиц
• Все стили инлайним

Вопросы?

Если у вас есть вопросы, то можете присылать их мне на [email protected], без проблем отвечу. А при большом количестве таковых с удовольствием напишу FAQ.

Источник: medium.com

• #email
• #верстка
• #письмо
• #советы

• Поделиться
• 0
• 0