В 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 просмотренных писем).
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. Кириллица отстаёт, но шрифтовику рунета стоит изучать и запоминать базовые закономерности.
Веб-шрифты можно использовать для оформления писем.