Типографика в дизайне писем

Типографика — это искусство подавать текст, его графическое оформление. Главные инструменты — шрифты и вёрстка. Они позволяют структурировать текст и сделать его удобным для чтения и восприятия. Какие можно выделить особенности типографики в дизайне писем и как их применять на практике? Читайте в адаптированной статье исследования Анны Йеман, опубликованного в блоге компании StyleCampaign.

По мотивам публикации Яна Константина «Типографика в дизайне: основы и современные практики» Анна решила провести исследование в области емейл-рассылки. В нём были изучены 50 рассылок разной направленности, которые Анна выделила как примеры хорошей типографики. Исследование нацелено выяснить, что объединяет вёрстку этих рассылок и какие можно выделить тренды. В этой таблице собраны все данные по изученным рассылкам.

Методология исследования

Около 50% электронных писем открывают с мобильных устройств. Поэтому все рассылки из исследования состоят из одной колонки с текстом и заголовком. Тестировались данные по трём типам устройств с разной шириной экрана: на весь экран (версия для десктопа), средней ширины (450 пикселей) и узкий экран (320 пикселей).

Было выбрано только 50 рассылок, поэтому нельзя говорить о какой-то статистике, но можно выявить тренды. Все емейлы отправлены в период с ноября 2014 по январь 2015. Для анализа использовались такие инструменты, как WhatFont, Charcounter и WebPagetest.

В приложении WhatFont видно, как письмо отображается на трёх типах устройств

Что мы хотим узнать?

Результаты исследования Анны Йеман во многом совпадают с результатами Яна Константина. Было сделано около 90 выводов о типографике в дизайне писем. Можно выделить несколько основных вопросов:

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

Шрифт с засечками или без?

В 74% случаях в заголовках рассылок используется шрифт без засечек.

В 64% случаях в теле письма используется шрифт без засечек.

Самые популярные шрифты без засечек, используемые в заголовках, — Helvetica (16%), Arial (14%); с засечками — Georgia (14%) и Merriweather (4%).

Самые популярные шрифты для заголовков и текстов

В работе Яна Константина отмечается большая популярность шрифтов с засечками в основном тексте на веб‑страницах (61,5%). А исследование Анны Йеман показало, что в рассылках его применяют только 36% компаний. Вероятно, Константин рассматривал в основном новостные сайты, в которых чаще всего встречаются шрифты с засечками. А в рассылке не так много текста — большая часть информации выносится на отдельные лендинги.

Часто можно встретить шрифты с засечками и без в рамках одного текста. Отличный пример — рассылка MailChimp: шрифт Helvetica используется в заголовках и подзаголовках, а Georgia — в теле письма.

В 64% рассылок в теле письма используется шрифт без засечек, в 36% — с засечками

Главное правило типографики в дизайне писем — всегда начинайте с оформления текста и только потом обращайте внимание на всё остальное. Соблюдайте пропорции между размером шрифта, длиной и высотой строки. И учитывайте их для экранов любой ширины.

Размер шрифта

Самый популярный размер шрифта для ПК — 16 пикселей, он используется в 44% случаев.

16 пикселей — медианный размер шрифта для десктопа, 15,7 пикселей — средний.

Диапазон размеров шрифта на экране ПК — от 13 до 20 пикселей.

Самый популярный размер шрифта на мобильных устройствах — 16 пикселей, он используется в 38% рассылок.

16 пикселей — медианный размер шрифта для отображения на мобильных устройствах, 15,8 пикселей — средний.

Размер шрифта на мобильных устройствах варьируется от 13 до 20 пикселей.

28% компаний используют разный размер шрифта для десктопной и мобильной версии. Из них 64% для мобильных устройств шрифт уменьшают, 36% — увеличивают.

При выборе размера шрифта в первую очередь ориентируйтесь на расстояние от глаз читателя до экрана устройства. Монитор компьютера располагается на расстоянии вытянутой руки. Поэтому гораздо удобнее читать текст в 20 пикселей, как на картинке справа (рассылка Robocat, шрифт Helvetica), чем текст в 14 пикселей, как на картинке слева (рассылка Muli и шрифт Patagonua).

Шрифт размером 20 пикселей (справа) с большого расстояния читается проще, чем шрифт в 14 пикселей (слева)

Длина текстовой строки

Длина строки — ширина тела письма, которая измеряется в количестве пикселей или символов на строку текста (значение em обычно не используется в емейл-вёрстке). Разработчик Роберт Брингхерст рекомендует использовать для одноколоночной вёрстки на экране персонального компьютера от 45 до 75 символов (буквы + пробелы), а в идеале 66 символов.

• 600 пикселей — наиболее популярная ширина тела письма для десктопа (в рассылках данного исследования используется ширина от 480 до 760 пикселей, в среднем — 623 пикселя).
• 540 пикселей — средняя ширина колонки для десктопа.
• Длина строки — в среднем 78,5 символов.
• Для рассылки шириной 450 пикселей среднее количество символов — 53,86; для экрана в 320 пикселей — 39,02 символов.
• Длина строки в мобильной версии 22–57 символов.
• У 76% длина строки укладывается в диапазон 36–46 символов.

Если в текстовом поле шириной 540 пикселей ввести текст шрифтом Georgia и размером 16 пикселей, получится около 70 символов. Чтобы приблизиться к идеалу в 66 символов, ширину текстового поля нужно сократить до 480 пикселей.

Роберт Брингхерст рекомендует использовать от 45 до 75 символов в одной строке, в идеале — 66 символов

Ян Константин в своей работе выяснил, что средняя длина строки для веб-сайтов составляет 83,9 символов. В данном исследовании средняя длина строки в рассылке на десктопе составила 78,5 символов. А при отображении на экране мобильного устройства — 39 символов. Сервис Typecast, который занимается типографикой в дизайне сайтов, рекомендует на мобильных девайсах сохранять длину строки в пределах 35–40 символов. Около 48% рассылок из данного исследования попадают под это правило.

Самая популярная ширина шаблона рассылки оказалась 600 пикселей, она наблюдается у 53% рассылок. В целом ширина варьировалась в диапазоне 480–760 пикселей. Хотите расширить тело письма и не выйти за рамки предпочтительного количества символов? Увеличьте размер шрифта.

Высота строки

Самая популярная высота строки — 24 пикселя при размере шрифта 16 пикселей.

Отношение высоты строки к размеру шрифта — в среднем 1,51 (результат Константина — 1,46).

Отношение высоты строки к размеру шрифта снижается до 1,49 при ширине строки 450 пикселей; при ширине 320 пикселей падает до 1,45.

22% компаний используют адаптивный дизайн и уменьшают высоту строки при открытии рассылки на мобильном устройстве.

52% компаний устанавливают высоту строки в пикселях, 24% — в процентах.

Отношение длины строки к её высоте — в среднем 23,1 (по данным Константина — 24,9).

Отношение отступа между абзацами к высоте строки — в среднем 1,38 (у Константина — 1,39).

Исследование подтверждает золотое правило — высота строки должна быть в 1,5 раза больше размера шрифта. Получается, при размере шрифта в 16 пикселей высота строки должна составлять 24 пикселя (16 х 1,5 = 24).

Когда взгляд доходит до конца строки, ему проще найти следующую строку, если междустрочное расстояние пропорционально размеру шрифта. Чем короче строки, тем меньше может быть междустрочное расстояние. Как отмечено в исследовании, при переходе с экрана ПК на мобильное устройство отношение высоты строки к размеру шрифта снижается с 1,51 до 1,45.

Высота строки в рассылке NYT Cooking уменьшается с 30 пикселей на десктопе до 25 пикселей на мобильном устройстве (отношение высоты строки к размеру шрифта снижается с 1,6 до 1,5)

Разработчики предпочитают выставлять высоту строки в пикселях, так как их поддерживает большинство почтовых клиентов. Однако, работая с процентами, проще подобрать нужное соотношение. Классической считается высота строки в 140–150%, но это не универсальная цифра, многое зависит от выбранной гарнитуры.

Цвет

Чёрный #000000 — самый популярный цвет текста в рассылке (используется в 20% примеров), за ним следует сумеречный серый #333333 (16%).

В текстах используется 28 разных оттенков серого, большинство из них приближаются к ненасыщенному чёрному цвету.

У 56% компаний цвета заголовков и основного текста совпадают.

У 26% компаний оттенок основного текста светлее, чем заголовок, у 4% — темнее, у 14% — разные цвета.

72% компаний выбрали белый цвет #FFFFFF в качестве фона.

48% не включают гиперссылки в текст, 20% включают и выделяют их цветом, 18% подчёркивают и выделяют цветом, 10% только подчёркивают.

#000000 — самый популярный цвет для основного заголовка (24%), за ним следует #333333 (16%).

В 40% случаев оттенок подзаголовков отличается от основного заголовка.

Цветовые пары для заголовка (сверху) и основного текста письма (снизу)

Оливер Райхенштайн отмечает, что на экранах высокого контраста лучше выбирать тёмно-серые оттенки для текста и светло-серые оттенки для фона рассылки вместо классического сочетания «чёрное на белом».

Цвет #FFFFFF — самый популярный для фона письма

Выравнивание текста

54% компаний выравнивают главные заголовки для десктопной версии по центру, 46% — по левому краю.

Для мобильной версии наоборот — 46% компаний выравнивают главные заголовки по центру, а 54% — по левому краю.

Основной текст в десктопной версии выравнивают по левому краю 74% компаний, по центру — 26%. В мобильной версии соотношение 76% на 24%.

Текст с выравниванием по центру читать сложно, поскольку приходится искать глазами начало новой строки

Подписи, заголовки и короткие тексты с выравниванием по центру читаются легко. Но если абзац длинный, то текст лучше выравнивать по левому краю.

Средний размер шрифта в заголовках

Самый популярный размер текста в основном заголовке — 30 пикселей, его используют для десктопной версии около 18% компаний.

30 пикселей — медианный размер текста в основном заголовке, средний — 31,6 пикселей.

Размеры шрифта в основном заголовке для ПК разделились на две группы — 24‑26 пикселей и 28‑36 пикселей.

Размер шрифта в основном заголовке в среднем в два раза больше, чем размер шрифта в основном тексте (31,6 к 15,7).

Отношение основного заголовка к основному тексту на ПК в среднем равно 1,2 (варьируется от 0,65 до 1,8).

К 62% основных заголовков в десктопной версии не установлены ссылки.

При переходе с десктопа на версию с шириной экрана 450 пикселей у 68% рассылок меняется размер шрифта в заголовке; 87,5% из них шрифт уменьшали.

В 64% случаев размер шрифта в заголовках на ПК и на мобильных устройствах совпадает.

В мобильной версии чаще всего использовался размер заголовка 30 и 32 пикселя (оба в 12% случаев).

Средний размер шрифта основного заголовка на мобильном устройстве (при ширине экрана 320 пикселей) — 28,48 пикселя (медианный размер 26,5 пикселя).

Отношение размера шрифта в заголовке к высоте строки на мобильных устройствах — в среднем 1,17.

Около 14% набирают заголовки прописными буквами (чаще всего магазины одежды).

72% используют подзаголовок.

Средний размер шрифта подзаголовка на десктопе — 27,9 пикселей.

Размер шрифта заголовка в рассылке Mr. Porter при открытии на смартфоне снижается с 30 до 25 пикселей

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

Типографская шкала из работы Роберта Брингхерста «Основы стиля в типографике»

Чтобы выделить заголовок и при этом не увеличивать размер шрифта, попробуйте изменить стиль текста — наберите заголовок курсивом или прописными буквами. Можно даже использовать более узкий шрифт. Такой подход пригодится для дизайна рассылки под мобильные версии.

Текст в прехедере

66% используют прехедер в десктопной версии.

36% используют только завлекающие надписи, 33% инструкции и отрывок из начала письма, 30% — только отрывок.

Самый популярный размер прехедера для десктопной версии — 11 пикселей, его используют 33% компаний, затем 12 и 10 пикселей (у 18% и 12% компаний соответственно).

Размер шрифта в прехедере на десктопе — в среднем 12,3 пикселя.

Диапазон размеров для десктопа — 9–18 пикселей.

Отношение размера шрифта в прехедере к размеру основного текста в теле письма — 0,78.

Отношение высоты строки к тексту в прехедере на десктопе — в среднем 1,11.

76% используют шрифт без засечек.

Самый популярный шрифт без засечек — Arial, с засечками — Georgia.

Всего используется 22 цвета текста в прехедере, от чёрного до серого.

82% отображают прехедер в мобильной версии, 18% — нет.

В мобильной версии чаще всего используется размер прехедера 11 пикселей (в 40% случаев), затем 16 и 14 пикселей (22% и 18% соответственно).

Средний размер шрифта в мобильной версии — 12,9 пикселей (против 12,3 на десктопе).

Диапазон размеров на мобильных устройствах — 8–16 пикселей.

У 71% рассылок размер прехедера остаётся неизменным в обеих версиях, 22% компаний увеличивают размер прехедера, 7% — уменьшают.

Отношение размера текста в прехедере к размеру основного текста в теле письма в мобильной версии — 0,85.

Прехедер отображается вместе с именем отправителя и темой письма

Прехедер расположен в верхней части письма, в самом начале HTML-кода. Поэтому он отображается в почтовых клиентах рядом с темой письма. А в большинстве смартфонов прехедер так же заметен, как имя отправителя и тема. Одни компании подтягивают инструктивные элементы из письма, такие как «Открыть в браузере». Другие компании подтягивают в прехедер начало основного текста письма или сниппет сообщения.

Скорость загрузки

1215 — средний индекс времени загрузки рассылки (лучше, если эта величина <1000, что наблюдается у 43% рассылок).

Средняя загрузка базовой версии письма — 0,94 секунды.

Время полной загрузки емейла — 2,64 секунды.

Среднее количество HTTP-запросов — 24.

Среднее количество запросов к изображениям — 13,7 (57% от всех запросов).

Средний вес полностью загруженной рассылки — 711 Кб.

Средний вес картинок из рассылки — 568 Кб.

Картинки составляют в среднем 79,8% веса всего письма.

Картинки весят от 9 Кб до 4,4 Мб, около 50% рассылок используют картинки весом до 200 Кб.

Средний вес веб-шрифтов — 69,7 Кб (9,5% от всего веса емейла).

Около 30% компаний используют веб-шрифты (самые популярные — Open Sans и Merriweather).

Многие утверждают, что веб-шрифты могут замедлить загрузку письма. Средний вес шрифта из 20 самых популярных Google-шрифтов — 28 Кб. В рассылках из данного исследования чаще всего использовалось 3 шрифта в одной рассылке со средним весом 69,7 Кб для одного письма. Получается, шрифты занимают 9,8% от веса всего письма, в то время как доля картинок — 79,8%.

Изображения составляют около 79,8% от веса всего письма

Сервис Webpagetest позволяет протестировать скорость загрузки всех элементов письма.

Загрузка первого элемента письма от H&M началась только спустя 4,095 секунды

Выводы

Изначально целью исследования было выявить универсальные принципы типографики в дизайне рассылок. Однако выяснилось, что хорошую типографику нельзя просто скопировать. Для каждой рассылки идеально своё собственное соотношение различных показателей. А если познакомиться с рассылками других компаний, создать индивидуальный шаблон будет проще.

Исследование также подтвердило многие золотые правила. Например, что высота строки должна быть в 1,5 раза больше размера шрифта. Не лишними оказались советы по «плавному» сокращению высоты строки при переходе на мобильную версию. В общем, каждый найдёт для себя что-нибудь новое и сможет применить в своей практике.