Дизайн Шаблон
~ 15 хв читати
10 коментарі
159159 перегляди
оцінити
24 жовтня 2019

Ліпші шрифти для емейлів: Поради використання

Stripo / Blog / Ліпші шрифти для емейлів: Поради використання

Однією з найяскравіших проблем в процесі створення електронного листа є вибір шрифту. Розмір, колір, форма, відстань … Чи має значення? Так, це так, але найголовніше – вибрати той, який легко читати, всі інші функції шрифту незначні.

Дивіться наше коротке відео про шрифти, їх різновиди, як застосувати декоративні шрифти у редакторі Stripo. Та головне – як підібрати “той самий” шрифт для ваших шаблонів емейл-повідомлень:

При виборі шрифту для вашого листа є два варіанти. Перший варіант – вибір веб-безпечного шрифту, який є стандартним і включений за замовчуванням для більшості ОС і який використовується в більшості поштових клієнтів.

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

  1. Arial
  2. Helvetica
  3. Times New Roman
  4. Verdana
  5. Courier / Courier New
  6. Tahoma
  7. Georgia
  8. Palatino
  9. Trebuchet MS
  10. Geneva

Наступний варіант – вибрати веб-шрифт, але є багато ризиків, що він не буде відображатися належним чином, тому що поштовий клієнт не підтримує цей шрифт. В останньому випадку веб-шрифт буде відображений, як шрифт обраний за замовчуванням.  

Нижче наведено список шрифтів для найпопулярніших поштових клієнтів:

  • iCloud Mail використовує Helvetica як шрифт.
  • Gmail приймає Arial.
  • Microsoft Outlook часто використовує Calibri.
  • Outlook 2007/2010/2013 використовує Times New Roman в якості резервного шрифту.

Як правильно вибрати шрифт для електронного листа?

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

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

Насправді, є тільки два варіанти вибору шрифту. Ви можете вибрати веб-безпечний шрифт і бути впевненим, що він буде однаковим для всіх або додати веб-шрифт і сподіватися на те, що кожна людина використовує ті поштові клієнти, які їх підтримують, що практично неможливо, оскільки Gmail, Yahoo Mail і Outlook 2007 / 10/13/16 не підтримують веб-шрифти і, чесно кажучи, не всі користувачі iPhone і iPad можуть їх бачити. Тому ми не рекомендуємо використовувати веб-шрифти, щоб не пошкодити призначений для користувача інтерфейс.

Головною особливістю шрифту вашого контенту, як було згадано вище, є читаність. Що можна додати? Ще одна важлива функція, яка є частиною зручного читання, – це зрозумілість. Це не зовсім те ж саме. В одному шрифті деякі символи можуть бути розбірливими, а деякі ні. Зрозуміло, чіткий текст краще і швидше читати, тому зверніть увагу, чи всі символи видно, зрозумілі і своєрідні.

Експеримент по зручності читання шрифтів було надано Норбертом Шварцем і Хёнжін Сонг в 2010 році. Результати вражаючі. Ви витрачаєте майже в два рази більше часу на читання декоративного шрифту, ніж за промовчанням:

email font experiment, clear fonts are better to read

Який вибрати шрифт Serif або Sans Serif?

Ще один момент – вибрати шрифт serif чи sans serif. У чому різниця між ними?

difference between serif and sans serif fonts

Шрифти Serif можуть бути визначені як шрифти з невеликою лінією в кінці кожного символу. Найпопулярніші шрифти із зарубками – Times New Roman і Georgia.

Шрифти Sans serif – це ті, у яких немає декоративної лінії в кінці кожного символу. Найпопулярнішими Sans serif шрифтами є Arial, Trebuchet MS і Helvetica.

В ході вивчення теми я знайшла кілька джерел, в яких стверджувалося, що шрифти із зарубками найбільш підходять для електронних листів, але я думаю, що це неправда. Виходячи з припущення, що електронні листи спостерігаються тільки в Інтернеті, використовуючи екран монітора або мобільного телефону, кращими шрифтами є sans serif. Легше читати символи без зарубок з екрану.

Ще один цікавий факт полягає в тому, що стаття про дизайн електронних листів в блозі Beefree, яка рекомендує використовувати шрифти serif для об’ємних листів, використовує шрифт sans serif як шрифт блогу:

sans serif is better for screens

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

Розмір шрифту

Якщо ви міняєте шрифт, переконайтеся, що той, який ви вибрали, не виглядає менше попереднього. Часто різні шрифти мають різну висоту символів, тому однаковий шрифт 14px буде відрізнятися від обраного сімейства шрифтів.

Кращою практикою є використання шрифтів 14px і більш для користувачів комп’ютерів, і 16px для тих, хто використовує мобільні пристрої. Якщо ви використовуєте адаптивний шаблон, переконайтеся, що розмір символів буде автоматично збільшено для мобільної версії електронного листа  

Я створила шаблон електронного листа в Stripo, який дозволяє порівнювати різні розміри цих же шрифтів. Ось результати:

how to choose a font for emai and to find the best font size? fonts sizes comparison examples

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

Відступи

Вкрай важливо створювати інтервали між абзацами, а також між текстовими рядками. Зверніть увагу, якщо у вашого шрифту досить прогалин між рядками. Найбільш широко використовувана висота лінії варіюється від 22px до 24px. Іншими словами, ідеальна висота лінії для електронних повідомлень використовується 1,5em, що становить 24px.

Ще одна річ – звернути увагу на прогалини між символами. Немає кращого рішення, яке переважно використовувати: вузький просторовий шрифт або широкий.

Georgia і Times New Roman забезпечують занадто вузькі прогалини між символами, що значно впливає на читаність. На мій погляд, гарну відстань між символами має шрифт Courier, а також Courier New. Можливо, тому останні два шрифту настільки популярні в 2017 році. 

Використовуйте інтервали між елементами електронного листа. Якщо в тексті є зображення, переконайтеся, що у вас є інтервали до і після зображення, що значно покращує читаність. Звичайно, краще вирівняти такі графічні елементи, як зображення.

Ось приклад, де прогалини не враховувалися:

bad email font and spacing, paragraphs

Можете уявити, що це тільки один абзац з листа, який містить понад 1500 слів? Очевидно, що краще сказати менше, ніж більше. 

Ось ще один приклад:

grey is worse than black for reading, email design , text color

Це ще гірше, тому що шрифт сірий, що призводить до поганої видимості, шрифт замалий і, звичайно, у мене немає коментарів про прогалини. Так, вони існують, але це не допоможе. Пропозиції занадто довгі.

Посилання та кнопки

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

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

Одна з кращих практик – зробити посилання одного кольору з логотипом. Це виглядає чудово, перевірте це:

color identity, the best fonts for logo, text and links

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

Є два шрифту, які краще підходять для кнопок: Georgia і Verdana. Приємно використовувати Georgia і для заголовків і підзаголовків. Це виглядає здорово! Фактично, єдине, що ви повинні перевірити перед відправкою електронного листа, це те, як колір тексту співпадає з фоном кнопки і переконайтеся, що він досить помітний для читання. Перевірте також, чи правильно текст знаходиться на кнопці, він не повинен перетинати края кнопки.

Ось приклад, де кнопка виглядає круто:

the best font for email banner and button design

Ось приклад перевикористання кнопок і посилань:

too many links and buttons in email design

Текст на банерах

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

Головне, про що вам варто турбуватися при створенні банера для електронного листа – це підкреслить індивідуальність бренду. Ви можете використовувати будь-який шрифт, але краще вибрати який читається. Не пишіть занадто багато тексту на банері. Повинні бути тільки привітальні слова, які пробуджують інтерес і мотивують користувачів продовжувати читати.

Ось два цікаві приклади. Один – з чіткими і простими шрифтами:

clear font for email banner, the best fonts for emails

Ще один банер, який використовує декоративний шрифт:

decorative font on email banner, the best email fonts

Який з них прийняти за натхнення і власний дизайн електронного листа – це тільки ваш вибір.

Кольори

Єдиним правилом, яким ви повинні слідувати, є використання кольорів тільки для демонстрації ідентичності бренду. Якщо у вас є ідея зробити барвистий текст, просто залиште осторонь цю точку зору, тому що це зробить текст нечитабельним. 

Зазвичай в електронному листі можна використовувати тільки 3 кольори. Перший призначений для маркування заголовка, наступний – для решти тексту, а синій – для відображення посилань. Це все! Ви можете навіть зменшити цю кількість до двох кольорів, роблячи заголовок тим же кольором, але підкреслюючи його різним розміром або шрифтом.

Якщо ви хочете підкреслити одну пропозицію або фразу, просто використовуйте жирний шрифт, використання іншого кольору неоднозначно. Зазвичай для контенту електронного листа дизайнери використовують чорні або темно-сірі кольори. Це краще для читання. Єдиний виняток – коли у вас чорний фон. У цьому випадку використовуйте білий шрифт. Не використовуйте світло-сірий шрифт, тому що важко передбачити різні настройки діапазону контрастності.

HTML-теги для форматування тексту

Зазвичай, веб-безпеки шрифти оголошуються в CSS, так що це буде не простий HTML, а будуть кілька HTML-тегів для форматування тексту, я сподіваюся, що все це ви знали раніше, але, тим не менш, ось вони:

  • Для використання жирного шрифту:
    <strong> </strong> або <b> </b>
  • Для створення точкового списку в електронній пошті використовуйте цю структуру:
    <ul>
        <li>перший пункт</li>
        <li>другий пункт</li>
        <li>третій пункт</li>
    </ul>
  • Для використання курсивного, щоб підкреслити текст:
    <i> </i> або <em> <em>
  • Для додавання невеликого тексту того ж шрифту, який ви використовуєте:
    <small> </small>
  • Виділити текст із жовтим (за замовчуванням) заповненням:
    <mark> </mark>
  • Відзначити цей текст, який був вилучений, але не замінений:
    <del> </del>
  • А ці теги дозволяють визначити абзац:
    <p> </p>

Рекомендації по впровадженню веб-безпечних шрифтів

Завдяки багатьом експериментам, проведених маркетингової командою eSputnik, кращими шрифтами для електронних листів є Arial і Tahoma. Arial є найвдалішим шрифтом серед тих, хто налаштував маркетингову кампанію по електронній пошті. Tahoma відмінно виглядає як в об’ємних повідомленнях, так і в невеликих текстах

Я створила шаблон електронного листа в редакторі Stripo з тим же текстом і розміром 18 пікселів для кожного шрифту. У редакторі електронного листа Stripo немає Palatino і Geneva, але є спеціальні шрифти, такі як Roboto і Open Sans, яких за замовчуванням немає для більшості ОС, і краще визначити резервний шрифт, якщо ви їх використовуєте.

Отже, ось результати, просто порівняйте ці шрифти і виберіть той, який відповідає всім вашим потребам:

the best font for email, web safe fonts comparison

 

Як ви можете бачити, Georgia і Times New Roman занадто вузькі. Courier New є широким, але, можливо, навіть занадто широким для електронного листа. Arial легше ніж Helvetica. Неможливо розповісти про шрифти Verdana і Tahoma. Georgia і Verdana виглядають погано при друку. Що стосується мене, я вважаю за краще б вибрати останні два шрифту для своїх шаблонів електронних листів. Який з них ви віддаєте перевагу? Не соромтеся залишати коментарі та ділитися цією статтею.

Khairom Munawwar Baharom 4 місяці тому

Hi Hannah. Do Montserrat font can go multi-platform on email? (Gmail, Outlook, etc..)

Ганна Кузнєцова прокоментував Khairom Munawwar Baharom 4 місяці тому

Khairom, Thank you for your question. Unfortunately, it is not a websafe font. I just uploaded Montserrat to my account, sent an email to some email addresses. Only Apple Mail and Apple iPhone Mail (Native Mail on iOS) did not replace Montserrat with a default font. Others did replace it with the default fonts. Tests with Email on Acid just confirmed that Montserrat gets to be replaced by Gmail and Outlook.

Martin Schenk 5 місяців тому

Für deutsche Texte ist Verdana und Tahoma nicht empfehlenswert, da die abschließenden Anführungszeichen "verkehrt" dargestellt werden.

Ганна Кузнєцова прокоментував Martin Schenk 5 місяців тому

Vielen Dank für Ihren wertvollen Kommentar. Wir haben die notwendigen Änderungen an unserem Artikel vorgenommen. Viel glück

rohit dubey 10 місяців тому

Thanks for sharing this amazing content. This is really helpful for us.

Ганна Кузнєцова прокоментував rohit dubey 10 місяців тому

Rohit Dubey, We're glad to hear you find this helpful. You might be interested to know that you can upload custom fonts to your projects with Stripo. https://stripo.email/blog/add-use-custom-fonts-stripo/ Have a great day!

Marcia Bosscher 1 рік тому

What font are you using for this post? I like it!

Ганна Кузнєцова прокоментував Marcia Bosscher 1 рік тому

Marcia, Thank you. We are flattered to know. It's Montserrat, 16px. For your convenience, to detect fonts on other websites, you can use this tool http://whatfontapp.com/ Have a good day

Myron Gould 1 рік тому

I found this article to be a very helpful refresher. Thank you!

Ганна Кузнєцова прокоментував Myron Gould 1 рік тому

Myron, We're glad you liked it. You may be also interested in reading Paul Airy's post to find out which of the web-safe fonts is best for email accessibility. http://createsend.com/t/d-ABFFF5F25EC93A19 Also, we're glad to say that you can upload custom fonts with Stripo. If you have any questions about custom, web-safe and accessible fonts, or if you have any questions regarding our tool, please feel free to contact us at any time. Thank you for your interest in our blog!

Вас також може зацікавити

← Попередні статті Наступні статті →
10 днів тому · 7 хв читати
Stripo. Адаптивність повідомлень

Адаптивність повідомлення для мобільних пристроїв вже не унікальна можливість, а частина необхідного функціоналу, саме тому в Stripo ви можете користуватися бібліотекою адаптивних шаблонів, які вже готові до використання, а повідомлення, створені на їх основі, коректно відображатимуться на будь-яких пристроях. Але так часто буває, що потрібно вирішити нестандартну задачу з відображення на  мобільному пристрої. Саме про адаптацію піде мова нижче. 1. Адаптивне зображення Найпростіша функція, якою ви можете користуватися, — “Адаптивне зображення”. Включивши цю опцію, ви убезпечите себе від зайвого горизонтального скролу...

Структура Шаблон How-to
21 березня · 8 хв читати
Як створити емейл-шаблон для Outlook за допомогою Stripo

Донедавна було дуже складно, майже неможливо створити HTML емейл-розсилку через Outlook, щоб повідомлення відображалися коректно. Stripo знайшов вихід. Але навіщо ж вам відправляти повідомлення через Outlook, якщо ви можете зробити розсилку за допомогою GetResponse, eSputnik або будь-якого іншого сервісу. Чому ми вирішили додати прямий експорт в Outlook Більшість користувачів питалися, як експортувати повідомлення у цей поштовик. Наші розробники розпочали працювати над проектом. І ось вже ми готові до релізу цієї опції. Згідно зі статистикою Litmus, на цю мить 7% користувачів мережі віддають перевагу...

Маркетинг Шаблон How-to
Будьте завжди в курсі останніх новин у сфері email-маркетингу