Loader
Меню

ru

ua

en

Типографика в мейл-маркетинге.

Йемен делится соображениями и учит создавать достойный шрифтовой веб-дизайн для рассылок.

1407
0
следующий пост следующий пост

В 2014 году Ян Константин написал статью “Typographic Design Patterns and Current Practices”. Анна Йемен прочла, вдохновилась и создала новый труд, ориентированный исключительно на типографику для электронной почты. Анна просмотрела примеры хорошей типографики в вебе, отобрала лучшие сайты и, в конце концов, поняла, что делает веб-типографику по-настоящему хорошей.

Йемен делится соображениями и учит создавать достойный шрифтовой веб-дизайн для рассылок.

Статья начнется со сводной таблицы, составленной Анной на основании 50 писем в различных областях.
Таблица учитывает гарнитуры, цвета, размеры и другие параметры:

Методология

Учтите, 50% писем открывают смартфоном. Важно привлечь и удержать внимание пользователя емким выразительным заголовком и парой строчек вступления.

Анна собрала статистику для больших (мониторы ПК и ноутов), средних (450 пикселей) и маленьких (320 пикселей) экранов.

Типографика в мейл-маркетинге.

Автор не искала статистической значимости — просто хотела выявить главные тенденции, популярные и приемлемые решения. Электронные письма отобраны за период с ноября 2014 по январь 2015 года. Работе помогли сервисы: WhatFont; Charcounter; WebPagetest. Йемен решила не расширять базу и не проводить более глубокий анализ.

Типографика в мейл-маркетинге.

Предмет исследования, цель и выводы

Анна взяла за основу точку зрения Яна Константина и сделала 90 основных выводов — эффективных и удобных для применения в работе.

Предмет исследования:

— шрифты с засечками и без засечек для заголовка и тела;
— популярные гарнитуры;
— популярный размер заголовка и тела для ПК и смартфона;
— оптимальный веб-формат строки (количество символов в строчке) для ПК и смартфона;
— популярные настольные шаблоны;
— оптимальный интерлиньяж (межстрочный отступ);
— оптимальная длина абзаца;
— цвета заголовка и тела;
— выравнивание (по левому краю, по центру, выключка по формату);
— размер и цвет шрифта превью и его отображение на смартфонах;
— взаимосвязь заголовков;
— вес (объем) и время загрузки письма;
— соотношение веса (объема) шрифта к графике в письме.

С засечками или без?

74% заголовков без засечек,
26% — с засечками.
64% основного текста без засечек, 36 % — с засечками.

Популярные шрифты без засечек для заголовка:
16% — Helvetica;
14% — Arial. Популярные шрифты с засечками для заголовка:
14% — Georgia;
4% — Merriweather.

Популярные шрифты без засечек для основного текста: 20% — Helvetica или Neue Helvetica; 10% — Arial. Популярные шрифты с засечками для основного текста: 24% — Georgia; 4% — Merriweather или Times.

Шрифты с засечками используют в основном тексте на 10% чаще, чем в заголовках. Для подписей и сносок использовали 5 разных шрифтов с засечками, в три раза больше (15) шрифтов без засечек. В заголовках использовали 24 шрифта, 16 из них только один раз (из 50 просмотренных писем). В основном тексте использовали 20 шрифтов, 11 из них только один раз (из 50 просмотренных писем).

Times New Roman наконец-то стал непопулярным.

Helvetica — самый популярный шрифт заголовков, встречается в письмах Offscreen и TGD. Georgia — самый популярный шрифт основного текста, встречается в письмах Mr Porter и The New York Times. Merriweather и Open Sans (из набора Google Fonts) набирают популярность, встречаются в тиражах iOS Dev Weekly и InVision.

Типографика в мейл-маркетинге.

Ян Константин обратил внимание на всплеск популярности шрифтов без засечек для основного текста — 61,5%. Для электронной почты это всего 36%. Новостные сайты чаще используют шрифты с засечками. Текст писем, как правило, короткий — основной контент расположен на целевой странице.

Редкий вариант оформления — Craig Mod. Шрифт и заголовка, и тела — Lora (из набора Google Fonts). Распространенный вариант оформления — связка Helvetica-Georgia из MailChimp.

Типографика в мейл-маркетинге.

Сервисы, которые помогают выбрать пары шрифтов (латиница): Combining Typefaces; Great Font Combinations; Paul Airy’s newsletter. Кириллица отстаёт, но шрифтовику рунета стоит изучать и запоминать базовые закономерности.

Веб-шрифты можно использовать для оформления писем.

Поделись

предыдущий пост предыдущий пост