В прошлом году я прочитал пост Яна Constantin в ”

типографских шаблонах проектирования и тока Practices ¹ ” и ведущий прямо вперед хотел сделать что-то подобное с электронной почтой.В то время я учился реагировать typography в Интернете, пытаясь сломать сайты я любил, чтобы понять, что сделал типографии работу так хорошо, то попытке применить эти выводы к электронной почте дизайну .

Увидев работу Constantin, я также хотел исследовать, как другие почтовые дизайнеры обработки отзывчивый typography.Итак, я собрал 50 писем в различных отраслях промышленности, что я думаю делать хорошую работу с типографией, чтобы увидеть, если возникли какие-либо модели.Вы можете пропустить прямо к Google Doc, показывая исходные данные и results __15 | 2 .

Методология Link

Учитывая, что около 50% писем открываются на mobile ³ все электронные письма в исследовании необходимо реагировать, есть один столбец живой текста, вместе с заголовком,Я собрал статистику по три ширины: полную ширину (настольных), среднего размера (450 пикселей) и малых (320 пикселей) .

⁴

С образца группы 50, я не ожидал статистической значимости;Я просто хотел, чтобы выявить некоторые тенденции.По “среднем” Я имею в виду mean;наиболее популярным является значение, которое чаще всего встречается;а в некоторых случаях Отмечу, медиану или среднее значение.Все электронные письма были направлены в период с ноября 2014 года и января 2015 года, когда я проводил эту работу.Я такие инструменты, как WhatFont ⁶ , Charcounter ⁷ и WebPagetest ⁸ .У меня не было времени, чтобы утроить проверить его;не стесняйтесь E-Mail me ^{9 | __3 ничего шаткий .}

¹⁰

То, что я был заинтересован в Link

Я посмотрел на многие из тех же точек, как Constantin, хотя они не идентичны.Есть около 90 Выводы В целом, таким образом, я просто хочу, чтобы выделить некоторые основные моменты:

• Как популярными являются засечек и без-serif? Шрифтов в заголовках и копия тела
• Какой typefaces наиболее часто используются
• Что является самым популярным размер шрифта для основного текста, и это меняет с рабочего стола на мобильный
• Что такое среднее число символов в line? На каждой ширины
• Что является самым популярным ширина рабочего стола templates
• Что такое среднее соотношение высоты строки для основного текста
• Что такое среднее отношение высоты к длине линии линии в копии тела
• Ли заголовки тот же color как копирование тела
• Что фона популярны
• Как заголовки и основной текст выровнены по различным видовых экранах
• Что является самым популярным размер шрифта для headings
• Ли заголовки, связанные
• Какой размер и цвет текста заголовка предварительно, и это скрыто от мобильного
• Как долго это взять среднее по электронной почте load
• Сколько делает средний weigh
• Сколько веса веб fonts добавить по сравнению с изображениями

Засечками Или без засечек? Link

• 74% использовали без засечек для их первичного heading 26% засечек .
• 64% использовали без засечек для их тела copy и 36% засечек .
• Самые популярные без засечек heading шрифты Helvetica: (16%), Arial (14%)
• Наиболее популярные засечек отправиться шрифты: Грузия (14%) и Merriweather (4%)
• Самые популярные без засечек тело copy шрифты: Helvetica Neue Helvetica и (20%), Arial (10%)
• Самые популярные шрифты с засечками для тела: Грузия (24%), Merriweather и времена (4%)
• Засечки были использованы на 10% больше для основного текста, чем для заголовков .
• Только 5 различных шрифтов с засечками были использованы в копии тела, по сравнению с 15 различных Sans-засечек .
• 24 различных шрифтов заголовков были использованы (16) только один раз .
• Были использованы 20 различных шрифтов копирования тела (11 только один раз) .
• Times New Roman не был популярен;она не была использована еще раз в рубрике шрифтом .

Helvetica был самым популярным заголовок шрифт в целом, используется на 16%, как показано на Offscreen __38 | 13 | и __42 TGD __44 | | 14__1 ‘ы бюллетеней.Грузия была любимым местом для копию тела (24%), видели в г Porter ¹⁵ и Нью-Йорк Times ^{16 | __41 “бюллетени.Два шрифты Merriweather и открытых Sans, из Google Fonts, ползут в, и можно увидеть IOS Dev Weekly 17 и InVision 18 ‘ы тиражи .}

¹⁹

Константин отметил всплеск в использовании засечек для основного текста в Интернете (61,5%), в то время как это исследование положил его на 36% для электронной почты.Он, возможно, включены более новостные сайты, которые, как правило, чтобы исказить засечками.Вы также не видите столько долго-форма записи в email потому что основная часть содержания, как правило, находится на целевой странице.Тем не менее, одним прекрасным примером является Крейг Mod ²¹ , которые использует засечками Lora из Google Fonts как для заголовков и основного текста.Чаще Sans-засечки и засечки смешиваются, как это классическое сочетание, Helvetica-Грузия из MailChimp __33 | 22 .

²³

Чтобы помочь вам выбрать шрифт, есть Объединение Typefaces ²⁵ Карманный справочник и статья “ Большой шрифт Combinations ²⁶ .”Кроме того, newsletter__2 Пола Эри | 27 смотрит на спаривания шрифта в электронной почте.И если вы думали, что мы can’ т использование веб-шрифты в электронной почте, также, Вы можете actually ²⁸ .

Тело Копировать Link

Практическая Типография states__1 Butterick в | 29 , “Начало каждого проекта, делая основной текст хорошо выглядеть, то беспокоиться об остальных.” Рекомендация построить из копии тела повторяют всегоиз типографии статей я прочитал.Что Ключевым моментом здесь является поддержания proportions между размером шрифта, мера (длина линии) и ведущий (высота строки) в различных видовых шириной .

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

• 16 пикселей был самым популярным настольные тело size, используется на 44% .
• 16 пикселей была размер шрифта средний тело рабочего стола (в среднем составлял 15,7 пикселей) .
• Копия тела на рабочем столе в диапазоне от 13 до 20 пикселей .
• 16 пикселей был самым популярным мобильная тело шрифта size, используется на 38% .
• 16 пикселей была средний мобильный размер шрифта тела (15.58 пикселей была средняя) .
• Копия тела на мобильный телефон в диапазоне от 13 до 20 пикселей .
• 72% оставили то же size__19 шрифта тела | по настольных и мобильных .
• Из 28%, что изменилось, 64% меньше, пошел и 36% пошли bigger .

Чтение distance является ключевым фактором при выборе размера шрифта.На рабочем столе, с вытянутой руки между мной и монитором, 20 пикселей копия тела Robocat установим в Helvetica (справа) является более удобным для чтения, чем Патагонии 14-пиксельной Мули (слева). МкА explains ³⁰ как, его автор приложения, он сделал вид размера больше на Ipad, чем на iPhone, потому что вы держите IPad немного дальше .

³¹

Мера Link

Другая переменная иметь в виду, для правильных пропорциях является measure ³³ , то есть ширина кузова типа, измеренная здесь в пикселях или символов в строке, потому что разработчики электронной обычно дон’т работы в EMS.Брингхёрст рекомендует 45 до 75 characters __12 | 34 для настольного странице в один столбец, с 66 символов (считая буквы и пробелы), которые идеально подходят .

• 600 пикселей является самым популярным для рабочего стола ширина templates (623 пикселей является средним, и 480 к 760 пикселей является диапазон) .
• 540 пикселей является Средняя width настольных колонок .
• 78,5 является среднее число characters за линию на столе .
• 53.86 среднее число символов на 450 пикселей .
• 39.02 среднее число символов на 320 пикселей .
• Мера варьировались от 22 до 57 символов на mobile .
• 76% упал в 36 до 46 символов диапазоне .

Я сделал быстрый тест, используя набор Грузия на 16 пикселей при средней степени 540 пикселей, и это дает нам количество символов в 70-е годы.Не плохо, потому что 75 является верхней части диапазона.В идеале, однако, мы хотим, чтобы быть ближе к 66 персонажей, давая нам меру вокруг 480 пикселей .

³⁵

Константин обнаружил, что веб-сайты средние 83,9 символов в строке, в то время как это исследование найдено настольных письма в среднем 78,5 символы.Для мобильной электронной почты, мы опускаем вниз 39 символов в среднем в line.Приведение рекомендует придерживаться между 35 и 40 characters __71 | 38 на типичном смартфона;48%электронные письма в этом исследовании упал в этом диапазоне .

Настольные электронные письма становятся уже в последние годы в связи с поглощением масштабируемых макетов, который помогает нам оставаться в пределах от 45 до 75 символов.600 пикселей был самым популярным ширина шаблонов настольных в этом исследовании, используемой 53%;В целом, ширины варьировались от 480 до 760 пикселей.Если вы хотите более широкий столбец, а затем просто увеличить размер шрифта, пока вы не нажмете оптимальное количество символов, Трент Уолтон имеет приятный трюк с помощью двух asterisks ³⁹ — первые знаки 45-символа,и второй исполняется 75-.Так что, если в любой момент в две звездочки на той же строке текста, он знает, что это время, чтобы увеличить размер шрифта.Острота

Ведущий Link

Ниже приведены результаты для ведущих, или высота строки .

• С размером шрифта 16 пикселей, А 24 пикселей по высоте линия большинство popular .
• 1.51 было среднее __17 рабочего стола | соотношение между высотой строки и тела copy (Константин нашел 1.46) .
• Соотношение между высотой строки и копии тела падает до 1,49 в 450 пикселей .
• Соотношение между высотой строки и копии тела падает до 1,45 в 320 пикселей .
• 22% затянув их высоту строки на мобильный .
• 52% установить высоту строки в pixels .
• 24% установить высоту строки в percentages .
• Средняя длина линии разделены по высоте линии составил 23,1 (Константин прибыл в 24,9) .
• 1.38 было среднее соотношение расстояния между пунктом, чтобы выровнять высоту (Константин был 1.39) .

Классический правило, чтобы сделать линию высота | 1.5__18 раз размер копии тела.Так, шрифт тело 16-пиксель умножается на 1,5 дает нам высоту строки 24 пикселей.Это исследование было пятно на: The средний коэффициент высоты строки с размером тела был 1.51.Чем шире мера, тем щедрее вы можете быть с высоты строки .

Тим Браун называет это расплавленного leading __52 | 40 | __7 или жидкости высотой строки.Джейсон Санта-Мария explains ⁴¹ , “Как ваш глаз попадает в конце длинной линии текста он нуждается, что подушка, чтобы добраться до следующей, не заблудиться … Если ваши линии короче Васможно упаковать их в немного крепче “Мы не видим сокращение в высоту строки на мобильный, упав с 1.51 до 1.45 .

⁴²

52% почтовых дизайнеров установить высоту строки в пикселях.Некоторые, как Semplice __18 | 44 , изменили свое высоту строки на разных точек останова.24% использовали проценты.Например, Lagom __24 | 45 установить свою копию тела до 150%. Оливер Reichenstein ⁴⁶ дает 140% как “хороший ориентир” — многое зависит от гарнитуры.Пол Эйри рекомендует использовать percentages __36 | 47 по высоте линии в электронной почте, потому что пиксели более неловко, чтобы установить пропорционально.Тем не менее, разработчики, как правило, застрял с пикселями, потому что они оказывают последовательно по электронной почте клиентам .

Цвет Link

• # 000000 (чистый черный) был самое популярное color для основного текста (20%), далее следуют # 333333 (16%) .
• 28 разных оттенков были использованы для основного текста, большинство из которых не совсем черный .
• 56% использовали цвет и тот же текст заголовков и тела copy .
• 26% использовали светлый оттенок серого для основного текста, чем для заголовков, 4% пошли темнее, а 14% использовали другой цвет .
• 72% использовали #FFFFFF (чистый белый) в качестве цвета фона .
• 48% не имели никаких связей в организме, 20% были цветные, 18% были подчеркнуты, а цвета, 10% были подчеркнуты, и 4% были другие .
• # 000000 было самым популярным цветом для первичных заголовков (24%), далее следуют # 333333 (16%) .
• 40% средних товарных позиций используется цвет, кроме основной единице (например, более светлый оттенок серого) .

⁴⁸

Оливер Reicheinstein states ⁵⁰ “С экранов высокого контраста это предпочтительнее выбрать либо темно-серый для текста или светло-серый цвет для background, а жесткий черный на белом”.В то время как тонкие изменения в оттенках серого можно добавить контрастность и текстуру, копию тела, который понижен слишком далеко может быть трудно читать .

⁵¹

Джейсон Санта-Мария рекомендует давать шрифты с тяжелее типографская color ⁵³ а больше высота строки или светлее hue, так что они не сокрушить остального содержимого.Разработчики иногда настроить цвет текста через видовых экранов из-за способа шрифты оказать разных размеров.Это невозможно точно оценить тип в Photoshop;Вы должны глазное яблоко в браузере, используя либо самодельные prototypes ⁵⁴ , Typecast ⁵⁵ или Typetester ⁵⁶ .

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

• 54% центр 46% левый выровнять их первичный headline__23 рабочего стола | .
• 54% левый выравнивания и 46% их центр первичного мобильного heading .
• 74% левый выравнивания и 26% их центр настольные телаcopy .
• 76% левый выравнивания и 24% их центр мобильная copy .

⁵⁷

При тестировании письма с пользователями, обратная связь была всегда, что выровнен по центру копия тело труднее read.”Может быть, некоторые разделы, как, что, где есть довольно много текста, просто немного трудно читать.Я думаю, это потому, что текст выровнен по центру “, сказал один из участников с помощью UserTesting __29 | | 59__10 .Длина короче линия на мобильный преувеличивать вопрос.Подписи, нечетные короткое предложение и заголовки были в порядке, но как только вы получите в пунктах, придерживаться левой краю текста.Как уже упоминалось в “ Ода центру Text ⁶⁰ ,” целые абзацы не должны быть сосредоточены .

Средний размер заголовков Link

• 30 пикселей является самым популярным размером для первичные заголовки на desktop, используется на 18% (также 30 пикселей была средний размер, и 31,6 пикселей был средний размер) .
• Были две основные группировки для заголовков на рабочем столе: от 24 до 26 пикселей и 28 до 36 pixels
• 2.0 была средняя отношение копии тела к первичной heading (31,6 и 15,7) .
• 1.2 была средняя соотношение первичных заголовков к линии height на рабочем столе (от 0,65 до 1,8) .
• 62% первичных з …
  
  Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров
  
  
  
  Главная → Вебдизайн → 24.08.2015 by design.smashingmagazine.com