Дизайн Шаблоны
~ 15 мин читать
6 комментарии
69697 просмотры
оценить
28 августа 2018

Лучшие шрифты для емейлов: Советы для использования

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 выглядят плохо при печати. Что касается меня, я предпочла бы выбрать последние два шрифта для своих шаблонов электронных писем. Какой из них вы предпочитаете? Не стесняйтесь оставлять комментарии и делиться этой статьей.

rohit dubey 4 месяца назад

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

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

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

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

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

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

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

Hanna Kuznietsova прокомментировал Myron Gould 7 месяцев назад

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!

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

← Предыдущие статьи Следующие статьи →
27 августа
Емейл-кампании к Черной Пятнице и Киберпонедельнику

В этом году Черная пятница, а вместе с ней и начало грандиозных распродаж в сотнях магазинов выпадают на 23 ноября. Это значит, что приближается пора, когда каждый маркетолог мечтает побить прошлогодний рекорд по продажам, а его клиент — ухватить товары по невероятным скидкам. И, чем ближе к ноябрю,  тем сложнее и интереснее становится охота на покупателей в сезон Черной пятницы, Дня благодарения, Киберпонедельника и предрождественских распродаж. 9 советов для подготовки к Черной Пятнице и Киберпонедельнику Не стоит бояться, ведь благодаря...

Дизайн Маркетинг Шаблоны How-to
HR Email Templates_How to Create Beautiful Templates_Featured Image_Stripo
13 августа
Шаблоны писем для HR-менеджеров: как сделать привлекательную рассылку

Итак, вы менеджер по персоналу в поисках подходящего шаблона, чтобы сэкономить время? Как говорят в Одессе, их есть у нас. А еще есть полезные советы по дизайну и контенту электронных писем. Что бы вы ни делали – приветствуете нового сотрудника, сообщаете команде какие-то новости… - вы тратите много времени, если создаете письмо с нуля. Stripo предлагает несколько готовых шаблонов специально для HR, с которыми вы существенно сэкономите время. Общайтесь с сотрудниками проще и намного быстрее. Редактируйте контент наших шаблонов и...

Структура Шаблоны How-to
Будьте всегда в курсе последних новостей в области email маркетинга!