28 квітня 2020

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

Oksana Zhylka Guest Writer

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

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

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

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

Arial
Helvetica
Times New Roman
Verdana
Courier / Courier New
Tahoma
Georgia
Palatino
Trebuchet MS
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 році. Результати вражаючі. Ви витрачаєте майже в два рази більше часу на читання декоративного шрифту, ніж за промовчанням:

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

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

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

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

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

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

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

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

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

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

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

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

Відступи

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кольори

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

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

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

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

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

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