Типографіка в дизайні електронних листів

У розробці дизайну для email-розсилки багато фахівців недостатньо багато уваги приділяють типографіці. Тим не менше, навіть незважаючи на деяку обмеженість електронної пошти як середовища для дизайнерських рішень, робота з типографікою може зробити листа значно краще.

Сьогодні ми представляємо вашій увазі адаптований переклад дослідження Ганни Іман (Anna Yeaman), співзасновниці і директора американського агентства, яке було спочатку опубліковане на сторінках авторитетного ресурсу SmashingMagazine.

image

В минулому році я прочитала пост Яна Костянтина (Jan Constantin) «Тенденції та сучасні методи типографського дизайну» і тут же вирішила провести схожу роботу, але стосовно до поштовій розсилці. У той час я вивчала адаптивну веб-типографіку. Я виділила групу сайтів, які мені сподобалися, і спробувала розібратися, в чому секрет їх типографіки, щоб потім застосувати нові знання до розробки дизайну email-розсилки.

Після того, як я познайомилася з роботою Костянтина, мені захотілося зрозуміти, як інші дизайнери email розсилок використовували адаптивну типографіку. У підсумку я зібрала 50 прикладів поштової розсилки з різних сфер, в яких, на мій погляд, підібрана якісна типографіка, і вирішила перевірити, чи є у них щось спільне. Вихідні дані і результати цієї роботи ви можете подивитися Google-таблице.

Методологія

Враховуючи той факт, що близько 50% всіх електронних листів відкривається з мобільних пристроїв, всі листи, обрані для дослідження, були адаптивними, складалися з однієї колонки основного тексту заголовка. Я зібрала статистику за трьома типами пристроїв в залежності від ширини екрана: великим (ПК), середнім (450 пікселів) і малим (320 пікселів).

image

Google-таблиця з повним оглядом по кожному листу

Я знала, що вибірка з 50 листів навряд чи виявиться статистично значущою. Я лише хотіла виявити ряд загальних тенденцій. Середнім значенням у статті я позначаю математичне очікування. Найпопулярнішим значенням, яке зустрічається найчастіше. Також в декількох випадках я використовую поняття медіанного значення. Всі листи, досліджені в роботі, розсилалися в період з листопада 2014 року по січень 2015 року. В роботі я користувалася такими інструментами, як WhatFont, Charcounter і WebPagetest.

image

Як лист відображається на трьох типах пристроїв в додатку WhatFont

Що мені було цікаво
Я відповідала майже на ті ж питання, що і Костянтин, за рядом винятків. У загальній складності було зроблено близько 90 висновків, і в цьому пості розглянуті лише основні:

  • Наскільки популярні гарнітури з засічками і без зарубок у заголовках і в тілі листа?
  • Які гарнітури використовуються найчастіше?
  • Який розмір шрифту найчастіше зустрічається в тілі листа, і змінюється ця частота при переході з ПК на мобільний пристрій?
  • Як середнє число символів в рядку для кожного типу екрану?
  • Яка найпопулярніша ширина рядка в листі на ПК?
  • Як середнє відношення висоти рядка в тілі листа до розміру шрифту?
  • Як середнє відношення між висотою та довжиною рядка в тілі листа?
  • Використовується в заголовку і в тілі листа один і той ж колір?
  • Які кольори найчастіше використовують для фону?
  • Як вирівнювання тексту в заголовку і в тілі листа в залежності від типу екрану?
  • Який розмір шрифту частіше використовується в заголовках?
  • Прикріплюють чи посилання до заголовків?
  • Які розмір і колір тексту підзаголовку листи і відображається цей текст на мобільних пристроях?
  • Як довго в середньому завантажується лист?
  • Як багато важать веб-шрифти порівняно з картинками?

Шрифти із засічками і без зарубок

  • 74% шрифтів, які використовувалися в заголовках, були без зарубок;
  • 64% шрифтів, які використовувалися в тілі листа, були без зарубок;
  • найпопулярніші шрифти без зарубок у заголовках – Helvetica (16%) і Arial (14%);
  • найпопулярніші шрифти з зарубками у заголовках – Georgia (14%) і Merriweather (4%);
  • найпопулярніші шрифти без зарубок в тілі листа – або Helvetica Neue Helvetica (20%), Arial (10%);
  • найпопулярніші шрифти з зарубками у тілі листа – Georgia (24%), Merriweather і Times (по 4% кожний);
  • Шрифти з зарубками на 10% частіше використовувалися в тілі листа, ніж у заголовках;
  • В тілі листа зустрічалися всього 5 різних шрифтів із зарубками і 15 різних шрифтів без зарубок;
  • У заголовках зустрічалися 24 різних шрифтів типу, з яких 16 зустрічалися по одному разу;
  • В тілі листа зустрічалися 20 різних типів шрифтів, з яких 11 зустрічалися по одному разу;
  • Times New Roman виявився популярним: його не використовували ні в одному з заголовків.
Helvetica стала найпопулярнішим шрифтом у заголовках і використовувалася в 16% випадків, як, наприклад, в розсилках Offscreen і TGD. Georgia найчастіше використовувалася в тілі листа (24%), як, наприклад, в розсилках Mr Porter, New York Times. Набирають популярність дві гарнітури з набору Google Fonts – Merriweather і Open Sans, які можна побачити в розсилці iOS Dev Weekly, InVision.

image

найпопулярніші гарнітури в заголовках і в тілі листа

Костянтин зазначає, що шрифти з зарубками стали використовуватися набагато частіше в основних текстах веб-сайтів (61,5%). Наше дослідження показало, що для листів цей показник становить 36%. Можливо, в своїй роботі він більше вивчав новинні сайти, у яких частіше зустрічаються шрифти з зарубками. Крім того, в розсилці рідко зустрічається багато тексту, так як основний контент зазвичай розташовується на посадковій сторінці. Цікавим прикладом є сайт Крейга Мода (Craig Mod), який використовує шрифт із зарубками Lora з Google Fonts як у заголовках, так і в тілі листа. Найчастіше шрифти із засічками і без зарубок використовуються разом: прикладом може служити класична комбінація Helvetica-Georgia в розсилці MailChimp.

image

В 36% випадків в тілі листа використовуються шрифти з зарубками, в 64% – шрифти без зарубок

Для вибору гарнітури рекомендую прочитати допомога «Комбінуємо гарнітури» і статті «Класні комбінації шрифтів». Крім цього, Підлогу Ейрі (Paul Airy) пишет про те, як комбінувати шрифти email-розсилку. І якщо ви думали, що в листах не зустрічаються веб-шрифти, то ви помиляєтеся.

Тіло листа

На сайті Butterick's Practical Topography пишуть: «У будь-якому проекті першим ділом треба красиво оформити текст і лише потім турбуватися про решту». У багатьох статтях типографіці також кажуть, що починати треба завжди з оформлення основного тексту. Найголовніше – дотримуватися пропорції між розміром шрифту, форматом або довжиною рядка і висотою рядки, враховуючи при цьому ще й ширину екрану пристрою.

Розмір шрифту
  • найпопулярніший (44%) розмір шрифту на ПК – 16 пікселів;
  • Медіанний розмір шрифту на ПК – також 16 пікселів (середнє значення – 15,7 пікселів);
  • В тілі листа, що відкривається з ПК, розмір шрифту змінювався від 13 до 20 пікселів;
  • найпопулярніший (38%) розмір шрифту на мобільних пристроях – 16 пікселів;
  • Медіанний розмір шрифту на мобільних пристроях – також 16 пікселів (середнє значення – 15,58 пікселів);
  • В тілі листа, що відкривається з мобільного пристрою, розмір шрифту змінювався від 13 до 20 пікселів;
  • У 72% випадків при переході з ПК на мобільний пристрій розмір шрифту не змінювався;
  • У решти 28% випадків при переході з ПК на мобільний пристрій текст частіше зменшувався (64%), ніж збільшувався (36%).
Ключовим чинником у виборі розміру шрифту є відстань [від читача] до екрану пристрою. Екран ПК розташовується на відстані витягнутої руки, тому 20-піксельний текст листа від Robocat, набраний шрифтом Helvetica (на фото праворуч), читати простіше, ніж розсилку Patagonia з 14-піксельною Muli (на фото зліва). iA пише, що в своєму додатку Writer при читанні на iPad компанія використовує більш великий шрифт, ніж на iPhone, тому що iPad ми тримаємо трохи далі від себе.

image

На відстані текст розміром 20 пікселів (праворуч) сприймається легше, ніж текст розміром в 14 пікселів (ліворуч)

Формат рядка

Ще один чинник, про який не можна забувати при обліку пропорцій шрифту – це формат рядка, тобто ширина тіла листа. Формат рядка вимірюється або в пікселях, або в кількості символів в рядку – розробники електронних листів зазвичай не працюють з кеглем. Роберт Брингхерст (Robert Bringhurst) радить використовувати у рядку тексту листа з однією колонкою, адаптованого під ПК, від 45 до 75 символів, ідеальний варіант – 66 символів (з урахуванням пробілів).

  • 600 пікселів – найпопулярніша ширина тіла листи для ПК (діапазон – від 480 до 760 пікселів, середнє значення – 623 пікселя);
  • 540 пікселів – середня ширина колонки на ПК;
  • У рядку тексту на ПК в середньому розташовується 78,5 символу;
  • У рядку тексту шириною 450 пікселів в середньому розташовується 53,86 символу;
  • У рядку тексту шириною 320 пікселів в середньому розташовується 39,02 символу;
  • Формат рядка на мобільних пристроях варіюється від 22 до 57 символів;
  • У 76% випадків цей діапазон звужується до 36-46 символів.
Я провела невеличкий експеримент зі шрифтом Georgia розміром 16 пікселів при середньому форматі рядка 540 пікселів. При таких параметрах число символів в рядку буде трохи більше 70, і це не так погано, якщо врахувати, що 75 – максимум. Але в ідеалі краще скоротити кількість символів до 66, при цьому ширина рядка виявляється в районі 480 пікселів.

image

Роберт Брингхерст радить розташовувати в одному рядку від 45 до 75 символів, ідеальний варіант – 66 символів. Джерело: Practical Typography

За підрахунками Костянтина, на рядку веб-сторінки в середньому розташовується 83,9 символу. В нашому дослідженні в рядку тіла листа міститься в середньому 78,5 символу. При перегляді повідомлень на мобільному пристрої середнє число символів скорочується до 39. Typecast рекомендує дотримуватися діапазону 35-40 символів при перегляді листів на звичайному смартфоні. За результатами нашого дослідження, в цей діапазон потрапило 48% листів.

Найпопулярнішим (53%) форматом рядка шаблонів листів, адаптованих для ПК, був варіант завширшки 600 пікселів. В цілому ширина екрану змінювалася від 480 до 760 пікселів. Якщо ви хочете зробити колонку більш широкої, просто збільшити розмір шрифту до тих пір, поки не досягнете оптимального числа символів. Трент Уолтон (Trent Walton) пропонує оригінальне рішення: потрібно помістити символ «*» на дві позначки – 45 і 75 символів. Таким чином, якщо в якийсь момент обидві зірочки опиняються в одному рядку, це означає, що потрібно збільшити шрифт.

Висота рядка

Нижче представлені основні висновки, що стосуються висоти рядка.

  • При розмірі шрифту в 16 пікселів найпопулярнішою висотою рядки була висота в 24 пікселя;
  • Середнє відношення висоти рядка до «висоті» (загальним обсягом тексту склало 1,51 (у Костянтина – 1,46);
  • При 450-піксельної ширині рядка відношення висоти рядка до висоті тексту знижується до 1,49;
  • При 320-піксельної ширині рядка відношення висоти рядка і до висоті тексту знижується до 1,45;
  • 22% компаній, що потрапили в дослідження, зменшують висоту рядка для листів, адаптованих під мобільні пристрої;
  • 52% встановлюють висоту рядка в пікселях;
  • 24% встановлюють висоту рядка у відсотках;
  • Відношення довжини рядка до її висоті в середньому становило 23,1 (у Костянтина – 24,9);
  • Відношення величини відступів між абзацами до висоти рядка в середньому становила 1,38 (у Костянтина – 1,39).
Стандартне правило: висота рядків повинна бути в 1,5 рази більше розміру шрифту. Тобто якщо розмір шрифту – 16 пікселів, значить, висота рядка становитиме 24 пікселя. Проведене дослідження підтверджує це правило: відношення висоти до рядка розміром шрифту склало 1,51. Чим більше довжина рядка, тим більшою можна зробити її висоту.

Тім Браун (Tim Brown) називає таку зміну висоти «плавним» або «текучим». Джейсон Санта Марія (Jason Santa Maria ) пояснює: «Коли ваш погляд доходить до кінця рядка, вам потрібно побачити проміжок між рядками і зрозуміти, де знаходиться наступна рядок, щоб не загубитися… Якщо рядки стають коротшими, значить, їх можна розмістити трохи щільніше. Ми також відзначили зниження цього відношення при переході на мобільний пристрій – воно впало з 1,51 до 1,45.

image

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

52% дизайнерів email розсилок встановлює висоту рядків у пікселях. Деякі компанії, наприклад, Semplice, змінюють висоту рядка для різних елементів листа. 24% виставляють висоту у відсотках. Наприклад, Lagom встановлює висоту 150%. Олівер Райхенштайн (Oliver Reichenstein) вважає, що 140% – «непоганий орієнтир», хоча багато чого залежить від обраної гарнітури. Підлогу Ейрі советует виставляти висоту у відсотках, тому що в пікселях складніше підібрати потрібне співвідношення. Тим не менш, розробники, швидше за все, звикли до пікселях, так як вони підтримуються багатьма поштовими клієнтами.

Колір

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

Кілька колірних комбінацій для заголовка (вгорі) і тіла листа (внизу)

Олівер Райхенштайн пише: «На висококонтрастному екрані краще вибирати або темно-сірий колір основного тексту, або світло-сірий – для фону замість відтінків чорного і білого».

image

#FFFFFF став найпопулярнішим (72%) кольором фону листи

При використанні більш насичених шрифтів Джейсон Санта Марія радить або збільшити висоту рядка, або вибрати більш світлий тон, щоб не навантажувати інший контент. Розробники іноді регулюють колір тексту на різних пристроях, в залежності від того, як відображаються на них шрифти різних розмірів. В Photoshop неможливо чітко визначити, підходить шрифт для розсилки чи ні: доводиться вивчати його поведінку у браузері за допомогою саморобних прототипів, Typecast або Typetester.

Вирівнювання

  • 54% основних заголовків на ПК вирівняні по центру, 46% – по лівому краю;
  • 54% основних заголовків на мобільних пристроях вирівняні по лівому краю, 46% – по центру;
  • 74% творців розсилок вирівнюють основний текст на ПК по лівому краю, решта 26% – по центру;
  • 76% вирівнюють основний текст на мобільному пристрої по лівому краю, решта 24% – по центру.
image

Якщо основний текст вирівняний по центру, то читати буває складніше, так як кожен раз доводиться шукати початок наступного рядка

Користувачі, на яких ми тестували розсилки, постійно говорили, що текст, вирівняний по центру, читати складніше. «Можливо, блоки, в яких багато тексту, читати трохи складніше. Думаю, це тому, що текст вирівняний по центру», – написав один учасник експерименту в UserTesting. Те ж можна сказати і про більш вузьких екранах мобільних пристроїв. Підписи, короткі речення і заголовки, вирівняні по центру, сприймаються нормально, але коли справа доходить до абзаців, текст доводиться вирівнювати по лівому краю. згадується в «Оді центрированному тексту», цілі абзаци ніколи не можна вирівнювати по центру.

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

  • 30 пікселів – самий популярний (18%) розмір в заголовках на ПК (30 пікселів – також і медіанний розмір, а середній розмір – 31,6 пікселя);
  • Розмір шрифту в заголовках на ПК ділилися на дві групи: від 24 до 26 пікселів і від 28 до 36 пікселів;
  • Шрифт в заголовках в середньому був рівно в два рази більші шрифту в тілі листа (31,6 і 15,7 пікселя відповідно);
  • Шрифт в заголовках на ПК в середньому був в 1,2 рази більше висоти рядка (це співвідношення варіювалося від 0,65 до 1,8);
  • Посилання не кріпилися до 62% основних заголовків на ПК;
  • 68% творців розсилок не змінювали розмір шрифту в заголовку при переході з ПК на 450-піксельний формат ширини листа; 87,5% з тих, хто змінював розмір шрифту, зменшували його;
  • 64% вибирали однакові розміри шрифту заголовка на ПК і на мобільних пристроях (один масштаб);
  • На мобільних пристроях для основного заголовка найчастіше обирали розмір в 30 і 32 пікселя (обидва по 12%);
  • Середній розмір шрифту в основному заголовку на мобільному пристрої (320 пікселів) склав 28,48 пікселя (медіанний розмір шрифту був 26,5 пікселя)
  • Відношення розміру шрифту в заголовку до висоти рядка в середньому становила 1,17 для мобільних пристроїв;
  • Тільки 14% використовували в заголовку одні прописні букви (як правило, це були магазини одягу);
  • 72% використовували підзаголовки;
  • Середній розмір шрифту підзаголовків – 27,9 пікселя (для десктопа).
Багато розробники листів не користуються тегами h2, h3 і т. д., тому я фіксувала перший і другий за величиною шрифти в заголовках за допомогою програми WhatFont. Найпопулярніший розмір шрифту в основних заголовках на ПК – 30 пікселів, тоді як у Костянтина цей показник становить 38 пікселей по Мережі в цілому. Можливо, більш дрібний шрифт вибирається для зручності читання як на ПК, так і на мобільних пристроях.

64% використовували однаковий масштаб в заголовках на всіх типах пристроїв. Якщо говорити про решту 36%, то 87,5% з них зменшували масштаб на мобільних пристроях. Приміром, в розсилці від Mr Porter розмір шрифту на мобільному пристрої зменшено з 30 до 25 пікселів – невелика зміна, яке робить стиль більш елегантним, на відміну від громіздких заголовків на ПК.

image

Розмір шрифту заголовка в розсилці Mr Porter знижується з 30 пікселів на ПК до 25 пікселів на мобільному пристрої

Про точні розміри заголовків немає єдиної думки, хоча в десктопної версії шрифт заголовка був в середньому в два рази більше шрифту в тілі листа. Для порівняння, на Typecast пишуть, що їх значення h1 в три рази більше шрифту основного тексту, хоча в інтернеті можна знайти і більш великі заголовки. Якщо ви хочете поекспериментувати з різними співвідношеннями, скористайтеся сервісом Modular Scale. Крім того, є стандартна типографська шкала:

image

Шкала з «Основ стилю в типографіці» Роберта Брингхерста. Зображення: Retinart

В якості альтернативи використання розміру шрифту для візуального виділення, Марко Дугоньич (Marko Dugonjić ) пропонує міняти стиль тексту: наприклад, курсив, всі прописні або капітель [англ. small caps]. Подивіться його демо-варіант (розділ «Виділення зі зміною стилю»). Цей підхід особливо корисний на мобільних пристроях, де менше простору для великих заголовків. Ще один варіант – перейти на вузький шрифт. Заголовки є творчим майданчиком для дизайнерів. Тут у них з'являється більше варіантів для розмірів шрифтів і вирівнювання, а також більше можливостей використовувати веб-шрифти, на відміну від тексту в тілі листа.

Текст під заголовком

Записи під заголовком знаходяться вгорі листа. Це перший текст, який користувачі зазвичай бачать на своїх смартфонах, разом з ім'ям відправника і темою. У своєму дослідженні я розмежовую поняття інструктивної написи, наприклад, «Дивитися онлайн», і уривка тексту, який більш інформативний і найчастіше доповнює тему листа. Litmus докладно розглядає це питання у своєму огляді і приводить в ньому таблицю додатків, які відображають текст під заголовком.

  • 66% творців розсилок використовують текст під заголовком на ПК;
  • 36% включають в нього тільки інструкції, 33% – інструкції і уривок листа, 30% – лише уривок;
  • найпопулярніший розмір тексту під заголовком на ПК – 11 пікселів (33%), далі 12 пікселів (18%) і потім 10 пікселів (12%) (середнє значення – 12,3 пікселя);
  • Розмір шрифту тексту під заголовком варіюються від 9 до 18 пікселів;
  • Відношення розміру тексту під заголовком до розміру основного тексту в середньому становило 0,78;
  • Відношення розміру тексту під заголовком до висоти рядка на ПК в середньому становила 1,11;
  • 76% використовували в тексті під заголовком гарнітури без зарубок;
  • найпопулярнішим шрифтом без зарубок був Arial, з зарубками – Georgia;
  • У текстах під заголовком використовувалися 22 різних кольори, найпопулярніший – #000000, потім #999999;
  • 82% підтримували текст під заголовком на мобільних пристроях, 18% його приховували;
  • найпопулярніший розмір тексту під заголовком на мобільних пристроях – 11 пікселів (40%) далі 16 пікселів (22%) і потім 14 пікселів (18%) (середній розмір шрифту – 12,9 пікселя);
  • Розміри шрифтів тексту під заголовком на мобільних пристроях варіювалися від 8 до 16 пікселів;
  • 71% зберігали розмір при переході на мобільні пристрої, 22% збільшували шрифт, 7% зменшували;
  • Відношення розміру тексту під заголовком до розміру основного тексту на мобільному пристрої в середньому становила 0,85.
image

Текст під заголовком відображається разом з ім'ям відправника і темою листа

Продуктивність

  • Час, за який відображався перший елемент листа, в середньому становила 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 Fonts, можна побачити, що їх середній обсяг становить 28 КБ (формат WOFF) на один шрифт. Якщо врахувати, що більшість учасників дослідження використовувало по три шрифту, то сума сходиться (середній обсяг завантаженого шрифту становив 69,7 КБ). Хоча веб-шрифти іноді можуть стати причиною для занепокоєння, вони займають лише 9,8% загального обсягу листи. Порівняйте їх з зображеннями, які займають 79,8% від всього листа.

Гай Поджарный (Guy Podjarny) отмечаетзображення несуть основне навантаження в листі. Корисний інструмент, про який ви могли не знати – Litmus. Він показує кількість елементів, розмір і час завантаження під час попереднього перегляду.

image

<Зображення в середньому складають 79,8% від загального обсягу листи (середній обсяг завантаженого зображення становить 568 КБ)

image

Згідно цій стрічці, лист H&M завантажується за 4,095 секунди, тобто в цей момент щось тільки починає з'являтися на екрані

Висновок

Спочатку я хотіла дізнатися, як сайти на кшталт iA, Fray, Medium і Pelican Books створюють такі «еталонні» приклади підбору типографіки, та спробувати використати їх ідеї як основу для розробки гайдлайнов по дизайну email розсилок. Наприклад, може існувати чіткий зв'язок між розміром шрифту і величиною відступу на мобільних пристроях?

В процесі дослідження і після того, як я по-іншому подивилася на їх сайти, я зрозуміла, що жоден з наведених наборів співвідношень не буде універсальним. Як пояснює Тім Браун, хорошу типографіку не можна просто скопіювати, тому що вона залежить від гарнітури.

image

Незважаючи на те, що розмір шрифту для веб-сторінки слід вибирати лише з визначеного діапазону, розробники і тут знаходять простір для творчості

Тим не менш, проведене дослідження дає деяку основу для розробки дизайну електронних листів: наприклад, якщо за розмір основного тексту береться 16 пікселів при висоті рядка 24 пікселя, вам залишається лише вибрати відповідну гарнітуру і відрегулювати довжину рядка. Особливо корисними виявилися знайдені пропорції, поради з вибору співвідношень між розмірами шрифтів для різних типів екранів і деякі основні положення кшталт «плавного» зміни висоти. Також варто заглянути в Google-таблицу з результатами дослідження, тому що вони цінні самі по собі і містять роботи експертів в області типографіки, у яких є чому навчитися.

Основні висновки

Нарешті, нижче наводиться огляд найбільш важливих відкриттів, зроблених в ході дослідження. Будь ласка, не приймайте на віру цю статистику. Не обов'язково слідувати тенденціям, описаним тут. Важливо уявляти, як в принципі виглядають шаблони чужих листів, щоб потім створити свій стиль і зробити його більш читабельним.

  • 74% використовують шрифти без зарубок в основних заголовках, 64% використовують шрифти без зарубок в тілі листа;
  • Середній розмір шрифту в тілі листа при перегляді на ПК – 15,7 пікселя, при перегляді з мобільного пристрою – 15,58 пікселя;
  • Середня ширина листа для ПК становить 623 пікселя;
  • Середнє число символів в рядку листа, відкритого на ПК, – 78,5, при ширині листа в 450 пікселів – 53,86;
  • Довжина рядка в листі, відкритому на мобільному пристрої, варіюється від 22 до 57 символів;
  • Відношення висоти до рядка розміром шрифту на ПК в середньому становила 1,51 і знижувалося до 1,45 на мобільному пристрої (320 пікселів);
  • Відношення довжини рядка до її висоті в середньому становило 23,1;
  • 76% тексту на мобільних пристроях вирівняно по лівому краю;
  • Розміри шрифтів у заголовках десктопних версій ділилися на дві групи: від 24 до 26 пікселів і від 28 до 36 пікселів;
  • Розмір шрифту в основному заголовку на мобільному пристрої (320 пікселів) в середньому становив 28,48 пікселя;
  • Розмір шрифту тексту під заголовком на ПК в середньому становив 12,3 пікселя, на мобільному пристрої – 12,9 пікселя;
  • Розмір шрифту в заголовках був вдвічі більше розміру шрифту в тілі листа (31,6 і 15,7 пікселя відповідно);
  • Відношення розміру шрифту тексту під заголовком до розміру шрифту основного тексту становило 0,78 на ПК, на мобільних пристроях – 0,85;
  • Середній час, за який завантажується перший елемент листи, склало 0,94 секунди;
  • Загальне число HTTP-запитів в середньому склало 24.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.