Дизайн Шаблоны
~ 15 мин читать
10 комментарии
140747 просмотры
оценить
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 году. Результаты поразительны. Вы тратите почти в два раза больше времени на чтение декоративного шрифта, чем выбранного по умолчанию:

HTML email fonts experiment, clear fonts are better to read

Какой выбрать шрифт Serif или Sans Serif?

Еще один момент — выбрать шрифт с засечками и без засечек. В чем разница между ними?

difference between serif and sans serif HTML email 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 as most readable email font

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

Размер шрифта

Если вы меняете шрифт, убедитесь, что тот, который вы выбрали, не выглядит меньше предыдущего. Часто разные шрифты имеют разную высоту символов, поэтому одинаковый шрифт 14px будет отличаться из-за выбранного семейства шрифтов.

Лучшей практикой является использование шрифтов 14px и более для пользователей компьютеров и 16px для тех, кто использует мобильные устройства. Если вы используете адаптивный шаблон, убедитесь, что размер символов будет автоматически увеличен для мобильной версии электронного письма.

Я создала шаблон электронного письма в Stripo, который позволяет сравнивать разные размеры этих же шрифтов. Вот результаты:

How to choose a font for email and to find the best font size? Email font size comparison examples

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

Отступы

Крайне важно создавать промежутки между абзацами, а также между текстовыми строками. Обратите внимание, если у вашего шрифта достаточно пробелов между строками. Наиболее широко используемая высота линии варьируется от 22px до 24px. Другими словами, идеальная высота линии для электронных сообщений используется 1,5em, что составляет 24px.

Еще одна вещь — обратить внимание на пробелы между символами. Нет решающего мнения, что лучше использовать: шрифт с узким пространствои или с широким.

Georgia и Times New Roman обеспечивают слишком узкие пробелы между символами, что значительно влияет на читаемость. На мой взгляд, хорошее расстояние между символами имеет шрифт Courier, а также Courier New. Возможно, поэтому последние два шрифта настолько популярны в 2017 году. 

Используйте интервалы между элементами электронного письма. Если в тексте есть изображение, убедитесь, что у вас есть интервалы до и после изображения, что значительно улучшает читаемость. Конечно, лучше выровнять такие графические элементы, как изображения.

Вот пример, где пробелы не учитывались:

Bad html email fonts and spacing, paragraphs

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

Вот еще один пример:

Grey is worse than black for reading, email design, email font color

Это еще хуже, потому что шрифт серый, что приводит к плохой видимости, шрифт слишком мал и, конечно, у меня нет комментариев о пробелах. Да, они существуют, но это не поможет. Предложения слишком длинные.

Ссылки и кнопки

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

Кнопки — это те же ссылки, но у них есть более интерактивная форма для пользователей. Лучше использовать и то, и другое в письме. Если вы даете ссылку, чтобы прочитать статью, сделайте ее текстовой ссылкой, и если вы дадите ссылку, чтобы опробовать имеющийся у вас продукт, просто используйте кнопки.

Одна из лучших практик — сделать ссылки одного цвета с логотипом. Это выглядит великолепно, проверьте это:

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

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

Есть два шрифта, которые лучше подходят для кнопок: Georgia и Verdana. Приятно использовать Georgia и для заголовков и подзаголовков. Это выглядит здорово! Фактически, единственное, что вы должны проверить перед отправкой электронного письма, это то, как цвет текста совпадает с фоном кнопки и убедитесь, что он достаточно заметен для чтения. Проверьте также, правильно ли текст находится на кнопке, он не должен пересекать края кнопки.

Вот пример, где кнопка выглядит круто:

Best font for emails - banner and button design

Вот пример переиспользования кнопок и ссылок:

too many links and buttons in email design

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

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

Главное, о чем вам стоит беспокоиться при создании баннера для электронного письма — это подчеркнуть индивидуальность бренда. Вы можете использовать любой шрифт, но лучше выбрать читаемый. Не пишите слишком много текста на баннере. Должны быть только приветственные слова, которые пробуждают интерес и мотивируют пользователей продолжать читать.

Вот два интересных примера. Один — с четкими и простыми шрифтами:

Сlear font for email banner, the best font for emails

Еще один баннер, который использует декоративный шрифт:

Decorative font on email banner, the best font for emails

Какой из них принять за вдохновение и собственный дизайн электронного письма — это только ваш выбор.

Цвета

Единственным правилом, которым вы должны следовать, является использование цветов только для демонстрации идентичности бренда. Если у вас есть идея сделать красочный текст, просто оставьте в стороне эту точку зрения, потому что это сделает текст нечитаемым. 

Обычно в электронном письме можно использовать только 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 emails, web safe fonts comparison

 

Как вы можете видеть, Georgia и Times New Roman слишком узкие. Courier New является широким, но, возможно, даже слишком широким для электронного письма. Arial легче чем Helvetica. Невозможно рассказать о шрифтах Verdana и Tahoma. Georgia и Verdana выглядят плохо при печати. Что касается меня, я предпочла бы выбрать последние два шрифта для своих шаблонов электронных писем. Какой из них вы предпочитаете? Не стесняйтесь оставлять комментарии и делиться этой статьей.

Khairom Munawwar Baharom 2 месяца назад

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

Hanna Kuznietsova прокомментировал Khairom Munawwar Baharom 2 месяца назад

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 3 месяца назад

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

Hanna Kuznietsova прокомментировал Martin Schenk 3 месяца назад

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

rohit dubey 9 месяцев назад

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

Hanna Kuznietsova прокомментировал rohit dubey 9 месяцев назад

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 10 месяцев назад

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

Hanna Kuznietsova прокомментировал Marcia Bosscher 10 месяцев назад

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!

Hanna Kuznietsova прокомментировал 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!

Вас также может заинтересовать

← Предыдущие статьи Следующие статьи →
6 дней назад · 15 мин читать
10 примеров тизерных емейл-кампаний

Промо-рассылки и анонсы выглядят примерно одинаково и не всегда работают, потому что клиенты к ним привыкли и им эти емейлы не интересны. Поэтому мы расскажем, как стать интересными для клиентов. И покажем, как оживить ваши рекламные кампании, создавая высокопроизводительные емейл-тизеры. Почему они срабатывают? Ответ: они по-настоящему интригуют и формируют интерес к вашей продукции. Стратегия успешной тизерной емейл-кампании Естественно, перед началом любой кампании вы должны тщательно продумать стратегию. Какую именно стратегию? При помощи тизерных рассылок мы обычно пытаемся анонсировать три типа...

Дизайн Маркетинг Шаблоны How-to
Email-Design-Trends_Stripo
06 февраля · 14 мин читать
12 топ-трендов дизайна рассылок в 2020 году

Каждый год приносит нам свежие идеи дизайна рассылок. Некоторые из них стоит опробовать прямо сейчас. Мы сделали подборку трендов, благодаря которым ваши письма засияют новыми красками. Результаты опроса, проведенного Litmus, и прогнозы специалистов Email on Acid, а также лучшие примеры дизайна писем в наших входящих, говорят о таких трендах этого года: AMP компоненты в рассылках, или динамический контент; персонализация; интерактивность; контент в режиме реального времени; анимации; оптимизация писем под темную тему; 3-D изображения; иллюстрации; кастомные шрифты, или типографика как элемент письма; автоматизация...

Дизайн Маркетинг Шаблоны
Будьте всегда в курсе последних новостей в области email маркетинга!