3 ради по правильному використанню шрифтів в електронних листах +5
- 21.07.16 6:23 •
- lol_wat •
- # 306082 •
- Хабрахабр •
- Переклад •
- 3 •
- 3200
- такий же як Forbes, тільки краще.
Безумовно, одним з найбільш важливих елементів проектування є друкований текст. А графічне оформлення і стиль тексту називають типографікою. При правильному підході типографіка може перетворити ваші електронні листи. Однак проблема полягає в тому, що не всі шрифти відображаються у всіх поштових скриньках і на всіх пристроях. Для початку потрібно визначитися з межами «веб-безпеки».
«Небезпечні» шрифти і як ними користуватися
Певні шрифти будуть коректно відображатися абсолютно на всіх пристроях і у всіх поштових клієнтів. Це так звані «веб-безпечні» шрифти:
- Arial
- Courier
- Georgia
- Helvetica
- Lucida Sans
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
А оскільки вони відображаються всюди, то ви можете сміливо використовувати їх в своїх email-маркетингових кампаніях. Єдиним недоліком цих шрифтів є їх вельми обмежена кількість.
В такому випадку, що залишається робити проектувальникам інтерфейсів? На щастя, існує кілька способів вирішення цієї проблеми.
По-перше, при грамотній верстці листів потрібно використовувати не тільки шрифти, а й зображення, відступи, прогалини, працювати з текстом і т. П. Про це ми поговоримо пізніше.
По-друге, вийти за межі «веб-безпеки» можна, набираючи текст нестандартними шрифтами. Одним з популярних способів є використання веб-шрифтів, які викачуються при відкритті повідомлення, наприклад, з сервісу Google web fonts. Формування «шрифтових CSS стеків» дозволяє пристрою переключитися на більш поширений альтернативний шрифт.
А тепер давайте повернемося до проектування електронних листів і типографике. Правильно підібрати шрифт для кампанії email-маркетингу вам допоможуть 3 ради.
Рада №1: Виберіть правильний шрифт для основного тексту листа
Зображення взято з сайту w3schools.com
Які шрифти рекомендується використовувати при верстці електронних листів в якості альтернативи для Arial і Helvetica? Georgia або Verdana. «Що стосується електронних листів, ми зазвичай переглядаємо пару абзаців», - йдеться в статті. - Широке відстань між буквами значно прискорює читання ... А Серіф допомагають розрізнити букви між собою ».
У своїй поштовій скриньці ми знайшли кілька хороших прикладів використання шрифтів із зарубками. Глобальне освітнє компанія General Assembly. як правило, використовує шрифт Georgia для основного тексту листа:
Британська компанія Dunhill, що спеціалізується на виробництві чоловічих товарів класу люкс, також віддає перевагу Georgia:
І кулінарний сайт The Kitchn робить вибір на користь шрифту Georgia:
Але ми також виявили безліч листів, в яких були використані шрифти сімейства sans serifs. Найчастіше шрифти без зарубок вибирають для невеликих блоків тексту (1 або 2 рядки) або великих заголовків, як в цьому листі від сайту Canopy:
Американський бренд спортивного одягу преміум-класу Lululemon також віддає перевагу шрифту без зарубок:
За загальним правилом, якщо основний текст листа складається з довгих блоків, слід використовувати шрифти із зарубками. Шрифти Georgia і Verdana роблять текст більш зручним для читання. Однак для коротких листів і окремих уривків тексту більше підходять шрифти без зарубок.
Рада №2: Виділіть заголовок за допомогою комбінування шрифтів або зміни стилю шрифту
а) Для заголовка використовуйте той же шрифт, що і для основного тексту листа, але більшого розміру (і / або застосуйте інший колір і стиль, наприклад, виділивши його жирним або набравши лише великими літерами).
Використання одного і того ж шрифту для заголовка і змісту робить лист простим і зрозумілим. Таке однаковість надає бренду впізнаваність за умови, що ваші заголовки візуально відрізняються від основного тексту розміром і / або стилем шрифту або відокремлюються пропуском. Крім того, ваш лист буде коректно відображатися в будь-якому поштовому клієнті.
Розмір шрифту заголовків повинен перевищувати розмір шрифту основного тексту як мінімум в два рази, при цьому заголовок і блоки контенту відокремлюються символом нового рядка для поліпшення читабельності. Саме за таким принципом компанії Canopy, The Kitchn і Lululemon оформляють заголовки своїх листів.
б) Для заголовка виберіть шрифт, який відрізняється від шрифту основного тексту листа (і / або застосуйте інший колір і стиль, наприклад, виділивши його жирним або набравши лише великими літерами).
Різниця шрифтів заголовка і основного тексту листа створює приємний візуальний контраст. «Найпопулярнішим принципом комбінування шрифтів є поєднання рубленого шрифту для заголовка і шрифту з зарубками для основного тексту, - повідомляється в Smashing Magazine. - Користуючись цією класичною комбінацією, майже неможливо помилитися ». Секрет полягає в тому, щоб не поєднувати шрифти, які відрізняються великою кількістю унікальних характеристик. Це може привести до небажаного конфлікту в типографике. Як правило, «веб-безпечні» шрифти не дуже витіюваті, тому ви можете з легкістю комбінувати практично будь-який шрифт сімейства serif з рубаним шрифтом.
До «веб-безпечним» шрифтів із зарубками відносяться:
- Courier
- Georgia
- Times New Roman
До «веб-безпечним» шрифтів без зарубок відносяться:
- Arial
- Helvetica
- Lucida Sans
- Tahoma
- Trebuchet
- Verdana
Навіть при комбінуванні різних шрифтів, розмір шрифту заголовка все одно повинен перевищувати розмір шрифту основного тексту мінімум в два рази (він може також відрізнятися за кольором або насиченості). Вищезгаданий email від General Assembly - відмінний приклад поєднання шрифту Arial в заголовку і Georgia в основному тексті листа.
в) Наберіть заголовок нестандартним шрифтом і вставте його в лист у вигляді картинки.
Багато брендів використовують логотипи та заголовки листів як можливість представити свій фірмовий стиль. Їх типографіка може бути настільки унікальною, що вони вважають за краще розміщувати шрифти в листи у вигляді зображень, а не тексту. Нестандартний шрифт в такому випадку рекомендується вставляти в зображення, оскільки інакше він може не відобразитися в деяких поштових програм. З іншого боку, при складанні листа не варто цілком покладатися на зображення, так як деякі поштові скриньки за замовчуванням блокують їх завантаження. Тим не менш, деякі компанії йдуть на цей ризик, виходячи з контенту своїх листів і аудиторії. Так, наприклад, інтернет-магазин дизайнерських предметів інтер'єру Sight Unseen, поміщає в свої листи зображення з фірмовим заголовком:
Надайте своєму бренду індивідуальність, просто помістивши логотип вашого бренду і нестандартний шрифт в початок повідомлення, а для інших заголовків і основного тексту листа використовуйте «веб-безпечний» шрифт.
Правило №3: Правильно оформляйте посилання
Компанія Lululemon дотримувалася такого підходу при складанні свого листа. Його заголовок, описова частина і кнопка призову до дії пов'язані між собою, тому читачі можуть натиснути практично на будь-який елемент листи, щоб отримати більш детальну інформацію. Незважаючи на те, що посилання візуально не виділяються, інстинктивний клік перенаправляє передплатників на веб-сайт Lululemon. Таким чином, лист не перевантажується підкресленням або новими квітами, а дизайн залишається простим і елегантним.
Експериментуючи з оформленням посилань в своїх листах, постарайтеся знайти баланс, який відповідає вашому бренду і підкреслює його естетику. Переконайтеся, що посилання в вашому листі гранично прості і лаконічні.
На закінчення: Кращі практичні прийоми
- Для основного тексту листа вибирайте «веб-безпечний» шрифт. Якщо в листі багато тексту, спробуйте використовувати шрифт із зарубками.
- Для заголовка використовуйте шрифт без зарубок. Розмір шрифту заголовка повинен перевищувати розмір шрифту основного тексту.
- Збільште ефективність посилань, прив'язуючи до листа якомога більше інформації, не порушуючи при цьому дизайн.
Інші матеріали в блозі «Пєчкіна»:
Ви можете допомогти і перевести трохи коштів на розвиток сайту