Найкращі шрифти для розсилок: поради та хитрощі

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

У цій статті ми розповімо, як вибрати найкращий професійний шрифт для розсилки.

Створюйте елегантні листи за допомогою Stripo в найкоротші терміни, використовуючи наші готові шаблони

Ознайомитися

 

Шрифти HTML-листів: основні правила, яких треба дотримуватися

Вибираючи оптимальний шрифт, слід враховувати три базових правила:

1. Не використовуйте більше двох шрифтів

Якщо ви використовуєте занадто багато шрифтів, ваш лист виглядатиме щонайменше перенасиченим. Для листа достатньо одного або двох шрифтів. Ідеальний варіант — взагалі використовувати лише один шрифт, але різних розмірів: більший — для виділення заголовка, а менший — для решти контенту.

2. Уникайте використання більше ніж двох стилів шрифту

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

При цьому ніколи не підкреслюйте текст і не використовуйте курсив — це суперечить правилам доступності листів.

3. Приділіть окрему увагу читабельності вибраного шрифту

Основний параметр шрифту вашого контенту — читабельність. Це поняття означає можливість відрізнити одну літеру від іншої. Звичайно, розбірливий текст легше й швидше читається, тому перевірте, чи всі символи чіткі, розбірливі та добре помітні.

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

І ще про розбірливість... Існують два основних типи шрифтів: із зарубками та без. Давайте подивимось, який із них краще використовувати для email-розсилок.

Який шрифт вибрати: із зарубками чи без?

Так, ці типи (гарнітури) теж впливають на розбірливість шрифтів електронних листів. Чим вони відрізняються?

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

Шрифти Sans Serif (без зарубок) — це ті, що не мають такої декоративної лінії в кінці символу. Найпопулярніші веб-безпечні шрифти цього типу — Arial, Trebuchet MS та Helvetica.

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

Веб-безпечні шрифти

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

1. Arial

Розроблений у 1982 році, входить до всіх версії Microsoft, починаючи з Windows 3, та до Apple Mac OS X. Відображається усіма поштовиками. За рахунок термінальних діагональних вирізів має менш механічний вигляд у порівнянні з іншими шрифтами сімейства Sans-Serif.

2. Helvetica

Один із найпопулярніших шрифтів без зарубок. Має закруглені рядкові літери і широкі прописні. Розроблений у 1957 році.

3. Times New Roman

Має високі, дещо стиснуті рядкові літери з короткими спадними і висхідними. Створений на замовлення «The Times» у 1931 році.

4. Verdana

Розроблений для читання тексту на екранах з низькою роздільною здатністю. Головна особливість — високі й широкі рядкові літери.

5. Courier / Courier New

Розроблений у 1955 році, подібний до Times New Roman, але заточений під моноширинний шрифт. Courier New має важчі крапки й коми, ніж оригінальний Courier. Останній є стандартним шрифтом для екранних написів у кіноіндустрії.

6. Tahoma

Схожий на Verdana, але має вужчі літери, малі проміжки та інтервали. Використовується як дефолтний шрифт екрану для версій Windows 95, 2000 та XP.

7. Georgia

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

8. Palatino

Спочатку розроблений для заголовків, реклами та преси. Ширший за інші олд-стайл шрифти із зарубками.

9. Trebuchet MS

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

10. Geneva

Редизайн шрифту Helvetica. Головна відмінність — додано базовий набір лігатур.

Ці шрифти вважаються найбільш читабельними для електронної пошти.

Кастомні шрифти

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

Нагадуємо, що ви можете завантажувати кастомні шрифти до свого акаунта Stripo та використовувати їх у розсилках.

Але при цьому ми дуже рекомендуємо попередньо тестувати їхнє відображення в різних комбінаціях поштовиків, девайсів та ОС. Це можна зробити за допомогою нашого вбудованого інструменту тестування.

Важливо зазначити:

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

Ось перелік дефолтних шрифтів для найпопулярніших поштовиків:

• iCloud Mail використовує Helvetica як дефолтний;

• Gmail застосовує Arial;

• Microsoft Outlook у версіях палеоліту та ранньої бронзової доби нерідко використовує Calibri;

• Outlook 2007/2010/2013 використовує Times New Roman як резервний.

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

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

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

Виберіть будь-який із них на ваш смак і використовуєте в усіх email-кампаніях, щоб ваші листи завжди були розбірливими та відповідали стилю бренду.

Ми рекомендуємо одразу вибирати шрифти та їхні розміри, щойно ви розпочинаєте роботу з новим шаблоном — налаштування будуть одразу застосовані до всього листа. Це суттєво заощадить час, оскільки ви позбудетеся потреби налаштовувати шрифт для кожної частини листа окремо.

Чи знаєте ви, що в Stripo можна встановлювати різні розміри шрифтів для мобільних та десктопних пристроїв? Наприклад, ви використовуєте 14 пікселів для десктопної версії та 16 пікселів, якщо лист відкривається на смартфоні.

Налаштування розміру шрифту для десктопних пристроїв

• увійдіть до вкладки «Оформлення»;

• перейдіть до розділу «Загальні налаштування»;

• виберіть необхідний шрифт із випадаючого меню. Кастомні шрифти, які ви додали до свого профілю Stripo раніше, також відображаються у цьому списку;

• встановіть міжрядковий інтервал;

• у розділі «Смуги» встановіть різні розміри шрифту для всіх частин листа (крім банерів) і колір шрифту;

• у розділі «Заголовки» треба ще раз вибрати шрифт — можливо, він буде іншим. Тут ви також встановлюєте розмір шрифту для заголовків 1, 2 і 3;

• у розділі «Кнопка» встановіть колір і розмір шрифту кнопки.

Спробувати Stripo

Налаштування розміру шрифту для мобільних

• увійдіть до вкладки «Оформлення»;

• перейдіть до розділу «Адаптивність»;

• встановіть розміри шрифту для хедерів і футерів, областей контенту, пунктів меню і кнопок.

Міжрядковий інтервал

Міжрядковий інтервал — це відстань по вертикалі між рядками. Він вимірюється у відсотках від розміру шрифту.

Ви можете встановити бажаний інтервал для своїх листів у тих самих вкладках і розділах, у яких щойно налаштовували розмір шрифту.

Деякі джерела стверджують, що найкращий міжрядковий інтервал — 150%.

Але якщо врахувати рекомендації щодо доступності листів, то оптимальний інтервал варіюється від 150% до 200%.

(текст листа з одиничним інтервалом)

(текст листа з інтервалом 1,6)

Посилання

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

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

(Джерело: лист від Epilepsy Foundation)

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

Хоча з міркувань доступності листів ми дуже не рекомендуємо підкреслювати посилання — це дезорієнтує людей з дислексією.

Кнопки

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

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

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

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

Ось той випадок, коли кнопка виглядає бездоганно:

(Джерело: email-шаблон Stripo)

Важливо зазначити:

За допомогою Stripo до кнопок можна навіть додавати пробіли, щоб між текстом і межами кнопки залишався вільний простір. Це робить їх більш читабельними.

Як це зробити? Попрацюйте над параметрами внутрішніх відступів у вкладці «Кнопка».

Ви також можете окремо налаштувати розмір шрифту кнопок для мобільної версії.

Для цього вам потрібно:

• увійти до вкладки «Оформлення»;

• перейти до розділу «Адаптивність»;

• встановити розмір тексту кнопки, щоб зробити його розбірливим на мобільних екранах. Оптимальний розмір — 16px або більше;

• увімкнути «Кнопки на всю ширину», щоб зробити кнопки більш широкими на смартфонах. Повнорозмірні кнопки мають більше шансів бути поміченими.

Текст поверх банера

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

Зверніть увагу, що при цьому краще вибирати розбірливий шрифт і не писати занадто багато тексту на банері. Будьте лаконічними.

Утім вибір насамперед залежить від ваших ідей та стилю дизайну.

Використання декоративних шрифтів для банерів у Stripo

• після завантаження і редагування зображення банера клікніть значок «Текст» над шаблоном, щоб перейти до роботи з текстом кнопки;

• введіть свій текст на банері;

• потім виділіть текст банера і виберіть у випадаючому списку потрібний шрифт.

Приєднатися до Stripo

Колір шрифту

Тут є лише два правила, про які слід пам’ятати:

1. Дотримуйтесь мінімальної кількості кольорів

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

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

Приклад вдалого поєднання кольорів у листі.

(Джерело: лист від Victoria's Secret)

2. Використовуйте контрастні кольори

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

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

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

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

А тим, хто полюбляє кодувати листи з нуля, можуть знадобитися нижченаведені теги.

• для використання жирного шрифту:

<strong> text here </strong> or <b> text here </b>

• для створення маркованого списку:

<ul>

    <li> point 1 </li>

    <li> point 2 </li>

    <li> point 3 </li>

</ul>

• для використання курсиву:

<i> text here </i> or <em> text here <em>

• для додавання дрібного тексту тим самим шрифтом, яким ви користуєтеся:

<small> text here </small>

• щоб виділити текст жовтою (за замовчуванням) заливкою:

<mark> text here </mark>

• а це — щоб відмітити абзац:

<p> text here </p>

Написання тексту справа наліво

Понад 550 мільйонів людей розмовляють мовами, в яких використовується написання справа наліво. Режим RTL (Right to Left) — це дещо більше, ніж просто зворотний порядок слів.

Наприклад, тут не потрібно обертати числа, іноземні слова і т.д. Всі знаки пунктуації, які ви зазвичай ставите в кінці рядка, фактично починають її. Ми не будемо заглиблюватися в деталі: ви можете ознайомитися з усіма рекомендаціями щодо режиму RTL у нашому блозі, стаття «Як за допомогою Stripo писати текст листа справа наліво».

У ній ми також розповідаємо, як активувати режим RTL у Stripo, щоб ви могли використовувати в розсилках RTL-сценарії без навичок програмування.

Вимоги доступності

Якщо коротко, то існує кілька причин, щоб дотримуватися цих рекомендацій:

• щоб наші листи могли читати люди з колірною сліпотою;

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

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

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

Отже, ось базові рекомендації зі створення доступних текстів:

1. Враховуйте контрастність кольорів.

2. Уникайте вирівнювання за центром — вирівнювання має бути за лівим краєм, щоб полегшити сприйняття тексту для дислексиків.

3. Завжди додавайте символи пунктуації в кінці кожного пункту маркованого списку. Так, це може суперечити правилам граматики, але в такий спосіб ми зробимо листи більш розбірливими — і принаймні одну людину щасливішою.

4. Дотримуйтеся розміру шрифту 14px або більше.

5. Не підкреслюйте текст.

6. Уникайте курсиву, якщо вам треба виділити частину тексту. Тільки жирний шрифт, тільки хардкор!

7. Не використовуйте суцільний капс!

Детальнішу інформацію про те, як створити доступний лист, ви знайдете у нашому блозі в спеціальній статті про доступність.

Який шрифт краще використовувати для розсилок?

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

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

Helvetica — найпопулярніший шрифт в англомовних країнах. На другому місці Arial.

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

Я створила в редакторі Stripo шаблон із однаковим текстом і розміром (18px), але різними шрифтами.

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

На завершення

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

• Georgia і Times New Roman занадто вузькі;

• Courier New широкий… може, навіть, занадто широкий для електронного листа;

• Arial легший за Helvetica;

• Verdana й Tahoma неможливо розрізнити.

І ще раз. Окрім правильного вибору шрифту, в жодному разі не можна забувати про вищевикладені вимоги доступності.