- PVSM.RU - https://www.pvsm.ru -
В разработке дизайна для email-рассылок [1] многие специалисты недостаточно много внимания уделяют типографике. Тем не менее, даже несмотря на некоторую ограниченность электронной почты как среды для дизайнерских решений, работа с типографикой может сделать письма значительно лучше.
Сегодня мы представляем вашему вниманию адаптированный перевод исследования Анны Иман (Anna Yeaman), соосновательницы и директора американского агентства, которое было изначально опубликовано на страницах авторитетного ресурса SmashingMagazine.
В прошлом году я прочитала пост [3] Яна Константина (Jan Constantin) «Тенденции и современные методы типографского дизайна» и тут же решила провести похожую работу, но применительно к почтовой рассылке. В то время я изучала адаптивную веб-типографику. Я выделила группу сайтов, которые мне понравились, и попыталась разобраться, в чем секрет их типографики, чтобы потом применить новые знания к разработке дизайна email-рассылки.
После того, как я познакомилась с работой Константина, мне захотелось понять, как другие дизайнеры email-рассылок использовали адаптивную типографику. В итоге я собрала 50 примеров почтовой рассылки из разных сфер, в которых, на мой взгляд, подобрана качественная типографика, и решила проверить, есть ли у них что-то общее. Исходные данные и результаты этой работы вы можете посмотреть в Google-таблице [4].
Учитывая тот факт [5], что около 50% всех электронных писем открывается с мобильных устройств, все письма, выбранные для исследования, были адаптивными, состояли из одной колонки основного текста и заголовка. Я собрала статистику по трем типам устройств в зависимости от ширины экрана: большим (ПК), средним (450 пикселей) и маленьким (320 пикселей).
Google-таблица с полным обзором по каждому письму
Я знала, что выборка из 50 писем вряд ли окажется статистически значимой. Я лишь хотела выявить ряд общих тенденций. Средним значением в статье я обозначаю математическое ожидание. Самым популярным значением – то, которое встречается чаще всего. Также в нескольких случаях я использую понятие медианного значения. Все письма, исследованные в работе, рассылались в период с ноября 2014 года по январь 2015 года. В работе я пользовалась такими инструментами, как WhatFont, Charcounter и WebPagetest.
Как письмо отображается на трех типах устройств в приложении WhatFont
Я отвечала почти на те же вопросы, что и Константин, за рядом исключений. В общей сложности было сделано около 90 выводов, и в этом посте рассмотрены лишь основные:
Helvetica стала самым популярным шрифтом в заголовках и использовалась в 16% случаев, как, например, в рассылках Offscreen [6] и TGD [7]. Georgia чаще всего использовалась в теле письма (24%), как, например, в рассылках Mr Porter [8] и New York Times [9]. Набирают популярность две гарнитуры из набора Google Fonts – Merriweather и Open Sans, которые можно увидеть в рассылке iOS Dev Weekly [10] и InVision [11].
Самые популярные гарнитуры в заголовках и в теле письма
Константин отмечает, что шрифты с засечками стали использоваться намного чаще в основных текстах веб-сайтов (61,5%). Наше исследование показало, что для писем этот показатель составляет 36%. Возможно, в своей работе он больше изучал новостные сайты, в которых чаще встречаются шрифты с засечками. Кроме того, в рассылке редко встречается много текста, так как основной контент обычно располагается на посадочной странице. Интересным примером является сайт [12] Крейга Мода (Craig Mod), который использует шрифт с засечками Lora из Google Fonts как в заголовках, так и в теле письма. Чаще всего шрифты с засечками и без засечек используются вместе: примером может служить классическая комбинация Helvetica-Georgia в рассылке MailChimp [13].
В 36% случаев в теле письма используются шрифты с засечками, в 64% – шрифты без засечек
Для выбора гарнитуры рекомендую прочитать пособие [14] «Комбинируем гарнитуры» и статью [15] «Классные комбинации шрифтов». Помимо этого, Пол Эйри (Paul Airy) пишет [16] о том, как комбинировать шрифты в email-рассылке. И если вы думали, что в письмах не встречаются веб-шрифты, то вы ошибаетесь [17].
На сайте Butterick’s Practical Topography пишут [18]: «В любом проекте первым делом надо красиво оформить основной текст и только потом беспокоиться об остальном». Во многих статьях по типографике также говорят, что начинать нужно всегда с оформления основного текста. Самое главное – соблюдать пропорции между размером шрифта, форматом или длиной строки и высотой строки, учитывая при этом еще и ширину экрана устройства.
Ключевым фактором в выборе размера шрифта является расстояние [от читателя] до экрана устройства. Экран ПК располагается на расстоянии вытянутой руки, поэтому 20-пиксельный текст письма от Robocat, набранный шрифтом Helvetica (на фото справа), читать проще, чем рассылку Patagonia с 14-пиксельным Muli (на фото слева). iA пишет, что в своем приложении Writer при чтении на iPad компания использует более крупный шрифт, чем на iPhone, потому что iPad мы держим чуть дальше от себя.
На расстоянии текст размером 20 пикселей (справа) воспринимается легче, чем текст размером в 14 пикселей (слева)
Еще один фактор, о котором нельзя забывать при учете пропорций шрифта – это формат [19] строки, то есть ширина тела письма. Формат строки измеряется либо в пикселях, либо в количестве символов в строке – разработчики электронных писем обычно не работают с кеглем. Роберт Брингхерст (Robert Bringhurst) советует [20] использовать в строке текста письма с одной колонкой, адаптированного под ПК, от 45 до 75 символов, идеальный вариант – 66 символов (с учетом пробелов).
Я провела небольшой эксперимент со шрифтом Georgia размером 16 пикселей при среднем формате строки в 540 пикселей. При таких параметрах число символов в строке будет чуть больше 70, и это не так плохо, если учесть, что 75 – максимум. Но в идеале лучше сократить число символов до 66, при этом ширина строки оказывается в районе 480 пикселей.
Роберт Брингхерст советует располагать в одной строке от 45 до 75 символов, идеальный вариант – 66 символов. Источник: Practical Typography
По подсчетам Константина, на строке веб-страницы в среднем располагается 83,9 символа. В нашем исследовании в строке тела письма содержится в среднем 78,5 символа. При просмотре писем на мобильном устройстве среднее число символов сокращается до 39. Typecast рекомендует [21] придерживаться диапазона 35-40 символов при просмотре писем на обычном смартфоне. По результатам нашего исследования, в этот диапазон попало 48% писем.
Самым популярным (53%) форматом строки в шаблонах писем, адаптированных для ПК, был вариант шириной в 600 пикселей. В целом ширина экрана изменялась от 480 до 760 пикселей. Если вы хотите сделать колонку более широкой, просто увеличивайте размер шрифта до тех пор, пока не достигнете оптимального числа символов. Трент Уолтон (Trent Walton) предлагает [22] оригинальное решение: нужно поместить символ «*» на две отметки – в 45 и 75 символов. Таким образом, если в какой-то момент обе звездочки оказываются в одной строке, это значит, что шрифт нужно увеличить.
Ниже представлены основные выводы, касающиеся высоты строки.
Стандартное правило: высота строки должна быть в 1,5 раза больше размера шрифта. То есть если размер шрифта – 16 пикселей, значит, высота строки составит 24 пикселя. Проведенное исследование подтверждает это правило: отношение высоты строки к размеру шрифта составило 1,51. Чем больше длина строки, тем большей можно сделать ее высоту.
Тим Браун (Tim Brown) называет такое изменение высоты «плавным» или «текучим». Джейсон Санта Мария (Jason Santa Maria ) поясняет [23]: «Когда ваш взгляд доходит до конца строки, вам нужно увидеть промежуток между строками и понять, где находится следующая строка, чтобы не потеряться… Если строки становятся короче, значит, их можно разместить немного плотнее». Мы также отметили снижение этого отношения при переходе на мобильное устройство – оно упало с 1,51 до 1,45.
Высота строки в рассылке NYT Cooking снижается с 30 пикселей на ПК до 25 пикселей на смартфоне (отношение высоты строки к размеру шрифта снижается с 1,6 до 1,5)
52% дизайнеров email-рассылок устанавливает высоту строк в пикселях. Некоторые компании, например, Semplice [24], меняют высоту строки для разных элементов письма. 24% выставляют высоту в процентах. К примеру, Lagom [25] устанавливает высоту 150%. Оливер Райхенштайн (Oliver Reichenstein) считает [26], что 140% – «неплохой ориентир», хотя многое зависит от выбранной гарнитуры. Пол Эйри советует [27] выставлять высоту в процентах, потому что в пикселях сложнее подобрать нужное соотношение. Тем не менее, разработчики, скорее всего, привыкли к пикселям, так как они поддерживаются многими почтовыми клиентами.
Несколько цветовых комбинаций для заголовка (вверху) и тела письма (внизу)
Оливер Райхенштайн пишет [26]: «На высококонтрастном экране предпочтительнее выбирать либо темно-серый цвет для основного текста, либо светло-серый – для фона вместо оттенков черного и белого».
#FFFFFF стал самым популярным (72%) цветом для фона письма
При использовании более насыщенных шрифтов Джейсон Санта Мария советует либо увеличить высоту строки, либо выбрать более светлый тон, чтобы не нагружать остальной контент. Разработчики иногда регулируют цвет текста на разных устройствах в зависимости от того, как отображаются на них шрифты разных размеров. В Photoshop невозможно четко определить, подходит шрифт для рассылки или нет: приходится изучать его поведение в браузере с помощью самодельных прототипов [28], Typecast [29] или Typetester [30].
Если основной текст выровнен по центру, то читать бывает сложнее, так как каждый раз приходится искать начало следующей строки
Пользователи, на которых мы тестировали рассылки, постоянно говорили, что текст, выровненный по центру, читать сложнее. «Возможно, блоки, в которых много текста, читать чуть сложнее. Думаю, это потому, что текст выровнен по центру», – написал один участник эксперимента в UserTesting. То же можно сказать и о более узких экранах мобильных устройств. Подписи, короткие предложения и заголовки, выровненные по центру, воспринимаются нормально, но когда дело доходит до абзацев, текст приходится выравнивать по левому краю. Как упоминается [31] в «Оде центрированному тексту», целые абзацы никогда нельзя выравнивать по центру.
Многие разработчики писем не пользуются тегами h2, h3 и т.д., поэтому я фиксировала первый и второй по величине шрифты в заголовках с помощью приложения WhatFont. Самый популярный размер шрифта в основных заголовках на ПК – 30 пикселей, тогда как у Константина этот показатель составляет 38 пикселей по Сети в целом. Возможно, более мелкий шрифт выбирается для удобства чтения как на ПК, так и на мобильных устройствах.
64% использовали одинаковый масштаб в заголовках на всех типах устройств. Если говорить об оставшихся 36%, то 87,5% из них уменьшали масштаб на мобильных устройствах. К примеру, в рассылке от Mr Porter [32] размер шрифта на мобильном устройстве уменьшен с 30 до 25 пикселей – небольшое изменение, которое делает стиль более элегантным, в отличие от громоздких заголовков на ПК.
Размер шрифта заголовка в рассылке Mr Porter снижается с 30 пикселей на ПК до 25 пикселей на мобильном устройстве
О точных размерах заголовков нет единого мнения, хотя в десктопной версии шрифт заголовка был в среднем в два раза больше шрифта в теле письма. Для сравнения, на Typecast пишут [21], что их значения h1 в три раза больше шрифта основного текста, хотя в интернете можно найти и более крупные заголовки. Если хотите поэкспериментировать с разными соотношениями, воспользуйтесь сервисом Modular Scale [33]. Кроме того, есть стандартная типографская шкала:
Шкала из «Основ стиля в типографике» Роберта Брингхерста. Изображение: Retinart
В качестве альтернативы использования размера шрифта для визуального выделения, Марко Дугоньич (Marko Dugonjić ) предлагает менять стиль текста: например, курсив, все прописные или капитель [англ. small caps]. Посмотрите его демо-вариант [34] (раздел «Выделение со сменой стиля»). Этот подход будет особенно полезен на мобильных устройствах, где меньше пространства для крупных заголовков. Еще один вариант – переключиться на узкий шрифт. Заголовки являются творческой площадкой для дизайнеров. Здесь у них появляется больше вариантов для размеров шрифтов и выравнивания, а также больше возможностей использовать веб-шрифты, в отличие от текста в теле письма.
Записи под заголовком находятся вверху письма. Это первый текст, который пользователи обычно видят на своих смартфонах, вместе с именем отправителя и темой. В своем исследовании я разграничиваю понятия инструктивной надписи, например, «Смотреть онлайн», и отрывка текста, который более информативен и зачастую дополняет тему письма. Litmus подробно рассматривает этот вопрос в своем обзоре [35] и приводит в нем таблицу приложений, которые отображают текст под заголовком.
Текст под заголовком отображается вместе с именем отправителя и темой письма
Первоначально я включила в свое исследование производительность, так как часто слышала о том, как веб-шрифты ее снижают. Если взглянуть на список [36] 20 лучших шрифтов Google Fonts, можно увидеть, что их средний объем составляет 28 КБ (формат WOFF) на один шрифт. Если учесть, что большинство участников исследования использовало по три шрифта, то сумма сходится (средний объем загруженного шрифта составлял 69,7 КБ). Хотя веб-шрифты иногда могут стать причиной для беспокойства, они занимают всего 9,8% общего объема письма. Сравните их с изображениями, которые занимают 79,8% от всего письма.
Гай Поджарный (Guy Podjarny) также отмечает [37], что изображения несут основную нагрузку в письме. Полезный инструмент, о котором вы могли не знать – Litmus. Он показывает число картинок, размер и время загрузки во время предварительного просмотра.
<Изображения в среднем составляют 79,8% от общего объема письма (средний объем загруженного изображения составляет 568 КБ)
Согласно этой ленте, письмо H&M загружается за 4,095 секунды, т.е. в этот момент что-то только начинает появляться на экране
Изначально я хотела узнать, как сайты вроде iA, Fray, Medium и Pelican Books создают такие «эталонные» примеры подбора типографики, и попытаться использовать их идеи как основу для разработки гайдлайнов по дизайну email-рассылок. К примеру, может ли существовать четкая связь между размером шрифта и величиной отступа на мобильных устройствах?
В процессе исследования и после того, как я по-другому взглянула на их сайты, я поняла, что ни один из приведенных наборов соотношений не будет универсальным. Как поясняет Тим Браун, хорошую типографику нельзя просто скопировать, потому что она зависит от используемой гарнитуры.
Несмотря на то, что размер шрифта для веб-страницы следует выбирать лишь из определенного диапазона, разработчики и здесь находят пространство для творчества
Тем не менее, проведенное исследование дает некоторую основу для разработки дизайна электронных писем: например, если за размер основного текста берется 16 пикселей при высоте строки в 24 пикселя, вам остается лишь выбрать подходящую гарнитуру и отрегулировать длину строки. Особенно полезными оказались найденные пропорции, советы по выбору соотношений между размерами шрифтов для различных типов экранов и некоторые основные положения вроде «плавного» изменения высоты. Также стоит заглянуть в Google-таблицу [38] с результатами исследования, потому что они ценны сами по себе и содержат работы экспертов в области типографики, у которых есть чему научиться.
Наконец, ниже приводится обзор самых важных открытий, сделанных в ходе исследования. Пожалуйста, не принимайте на веру эту статистику. Не обязательно следовать тенденциям, описанным здесь. Важно представлять, как в принципе выглядят шаблоны чужих писем, чтобы потом создать свой стиль и сделать его более читабельным.
Автор: Pechkin.com
Источник [39]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/interfejsy/142462
Ссылки в тексте:
[1] email-рассылок: https://pechkin.com/
[2] Image: https://habrahabr.ru/company/pechkin/blog/304038/
[3] пост: https://www.smashingmagazine.com/2013/05/17/typographic-design-patterns-practices-case-study-2013/
[4] Google-таблице: https://docs.google.com/spreadsheets/d/1gRIJW-8v3eYJSFgVVGxhksy3tm1027MAbeUGMSeN3Lo/edit#gid=0
[5] факт: https://emailclientmarketshare.com/
[6] Offscreen: http://brizkdesign.cmail2.com/t/ViewEmail/r/114D5B7C07F349C62540EF23F30FEDED/C136737EBF3C476CF99AA49ED5AF8B9E
[7] TGD: http://us4.campaign-archive2.com/?u=567793a28afe72c2577b85061&id=fbc4d00667&e=9504e0d7b0
[8] Mr Porter: https://email.mrporter.com/pub/sf/ResponseForm?_ri_=X0Gzc2X%3DWQpglLjHJlYQGjrfy6Aszf2zfuuzaaJFrXcwze7zfJa0fzdyS0NFEBVXMtX%3DWQpglLjHJlYQGnSIfv7nH2TkjwAbknXBzeJDyW9OvMRfoMzda4&_ei_=Em5t4MqWx20mfgAgv3m6LyQYSjGa1HI_Mwje0h22wLOvb8wBdJ-49UPaAN_jE1w
[9] New York Times: http://www.nytimes.com/indexes/2014/12/30/newsletter/subscription-1/index.html?nl=nickkristof&emc=edit_nk_20141230
[10] iOS Dev Weekly: http://stylecampaign.com/blog/blogmails/Type-study/dev-weekly/dev-weekly.htm
[11] InVision: http://invisionapp-1.hs-sites.com/weekly-digest-prototyping-with-sketch-content-first-collabing-in-the-cloud-testing-onboarding?ecid=ACsprvvfw3l7Ue46R4-lF4wCbjXZSrMPdryQlzGWWLmOl5jRHeojCsUBj6yZU0UIofB2xdFW1UDR&utm_campaign=Weekly+Digest&utm_source
[12] сайт: http://stylecampaign.com/blog/blogmails/Type-study/craig-mod/roden.htm
[13] MailChimp: http://us5.campaign-archive1.com/?awesome=no&u=7e093c5cf4&id=f7d75f99ea
[14] пособие: https://typekit.files.wordpress.com/2016/04/combiningtypefaces.pdf
[15] статью: http://designmodo.com/great-font-combinations/
[16] пишет: http://us4.campaign-archive2.com/?u=00194e641f365c79871912856&id=230e9498e5&e=d274356b59
[17] ошибаетесь: https://www.campaignmonitor.com/dev-resources/will-it-work/webfonts/
[18] пишут: http://practicaltypography.com/typography-in-ten-minutes.html
[19] формат: http://www.markboulton.co.uk/journal/five-simple-steps-to-better-typography
[20] советует: http://webtypography.net/2.1.2
[21] рекомендует: http://typecast.com/blog/a-more-modern-scale-for-web-typography
[22] предлагает: http://trentwalton.com/2012/06/19/fluid-type/
[23] поясняет: https://vimeo.com/34178417#t=28m14s
[24] Semplice: http://us5.campaign-archive2.com/?u=264f27914faa0461d11277ff4&id=a60d81aafa&e=f8b8cd489f
[25] Lagom: http://us1.campaign-archive1.com/?u=550a26743b858682f557a61e5&id=be8b81dd0c&e=106142239b
[26] считает: https://ia.net/know-how/responsive-typography-the-basics
[27] советует: http://us4.campaign-archive1.com/?u=00194e641f365c79871912856&id=1b0c8bc3ba&e=d274356b59
[28] прототипов: http://blog.fontdeck.com/post/23601339698/body-text-tester
[29] Typecast: https://typecast.com/
[30] Typetester: https://www.typetester.org/
[31] упоминается: http://practicaltypography.com/centered-text.html
[32] Mr Porter: http://stylecampaign.com/blog/blogmails/Type-study/Porter/Porter.htm
[33] Modular Scale: http://www.modularscale.com/
[34] демо-вариант: http://webdesign.maratz.com/lab/subheads/?v=02a
[35] обзоре: https://litmus.com/blog/the-ultimate-guide-to-preview-text-support
[36] список: https://docs.google.com/spreadsheets/d/1d1BCe5XtqOCoWnSgWDyReeJ9r28269aZbTj206ia3yQ/edit#gid=1384682620
[37] отмечает: http://www.guypo.com/performance-implications-of-responsive-design-book-contribution/
[38] Google-таблицу: https://docs.google.com/spreadsheets/d/1gRIJW-8v3eYJSFgVVGxhksy3tm1027MAbeUGMSeN3Lo/edit?pref=2&pli=1#gid=0
[39] Источник: https://habrahabr.ru/post/304038/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best
Нажмите здесь для печати.