Дизайн Шаблоны
~ 18 мин читать
16 комментарии
383034 просмотры
оценить
28 апреля 2020

Лучшие шрифты для рассылок: советы и хитрости

Stripo / Blog / Лучшие шрифты для рассылок: советы и хитрости

Одна из самых серьезных проблем в процессе создания электронных писем — правильно выбрать шрифт. Вес, высота, ширина, цвет, форма, интервал… Все ли здесь имеет значение? Да, важно все, но самое главное — выбрать читабельный шрифт. Все остальные параметры второстепенны.

Посмотрите наше небольшое видео о лучших шрифтах для электронных писем, их типах, веб-безопасных шрифтах и применении декоративных шрифтов с помощью Stripo. И самое важное — о правильном выборе шрифта для шаблонов.

Создавайте полностью адаптивные письма любой сложности

Как правильно выбрать шрифт для рассылки?

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

При выборе оптимального шрифта следует учитывать три базовых правила:

1. Не более двух шрифтов, причем — взаимодополняющих

Если вы используете слишком много шрифтов, ваше письмо будет выглядеть как минимум перенасыщенным — а в худшем случае получится «миксер мне в глаза». Для одного письма достаточно одного или двух шрифтов. В идеале вообще используется всего один шрифт, но разных размеров: больший — для выделения заголовка, а меньший — для остального контента.

2. Перед отправкой тестируйте кастомные шрифты на разных девайсах

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

Обратите внимание: вы можете проводить скриншот-тесты непосредственно в нашем редакторе. Мы предоставим вам скриншоты отображения ваших писем и шрифтов в них в 90 популярных окружениях.

 тест письма в Stripo

Прежде чем отправлять рассылку, взгляните на нее глазами получателей

3. Уделите особое внимание читабельности

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

Читабельность (или разборчивость) — это возможность отличать одну букву от другой. Естественно, разборчивый текст лучше и быстрее читается, поэтому проверьте, все ли символы четкие, хорошо заметные и различимые.

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

image5

Веб-безопасные шрифты

Вот ТОП-10 веб-безопасных шрифтов, также известных как email-безопасные. Их вы можете использовать со 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 как запасной.

Какой шрифт выбрать: с засечками или без?

Еще один важный момент — выбор шрифта: с засечками или без. Чем они отличаются?

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

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

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

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

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

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

image3-1Лучший размер шрифта для писем — 14px и крупнее для десктопных компьютеров и 16px при использовании мобильных девайсов.

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

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

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

  • перейдите в раздел «Общие настройки»;

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

  • установите межстрочный интервал;

Оформление-интервал

  • в разделе «Полосы» установите разные размеры шрифта для всех частей письма (кроме баннеров) и цвет шрифта;

Оформление-полосы

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

Оформление-заголовки

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

Оформление-кнопка

Попробовать Stripo

Настройка размера шрифта для мобильных

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

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

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

Оформление-адаптивность

Поработайте над отображением ваших писем на мобильных, и они будут легко читаемыми на любом устройстве

Межстрочный интервал

Межстрочный интервал — это расстояние по вертикали между строками. Он измеряется в процентах от размера шрифта.

Вы можете установить желаемый интервал для своих писем в тех же вкладках и разделах, в которых только что настроили размер шрифта.

Некоторые источники утверждают, что лучший межстрочный интервал — 150%.

Но если учесть рекомендации по доступности писем, то оптимальный интервал варьируется от 150% до 200%.

1-точечный интервал.

(текст письма с одиночным интервалом)

1- и 6-точечный интервал.

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

Ссылки

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

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

image9

(Источник: письмо от Designmodo)

Можно также подчеркнуть ссылки, если вы посчитаете это нужным или если такие ссылки соответствуют дизайну вашего письма.

Подчеркивание ссылокХотя из соображений доступности писем мы очень не советуем подчеркивать ссылки — это дезориентирует людей с дислексией.

Кнопки

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

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

Для кнопок лучше всего подходят два шрифта: Georgia и Verdana. Также Georgia — отличное решение для заголовков и подзаголовков. Выглядит действительно круто!

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

Вот тот случай, когда кнопка смотрится отлично:

Лучшие шрифты для баннеров в письмах

(Источник: email-шаблон Stripo)

Важно отметить:

В Stripo можно даже добавить пробелы в кнопки. Они называются «внутренние отступы».

Отступы руЭто добавит дополнительное пространство между текстом и границей кнопки и сделает ее текст более разборчивым.

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

Для этого вам нужно:

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

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

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

  • включить «Кнопки на всю ширину», чтобы сделать кнопки шире на мобильных устройствах. У полноразмерных кнопок больше шансов быть замеченными.

Кнопки на всю ширину РУ

Делайте кнопки CTA заметными и интерактивными на любом устройстве

 

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

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

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

image10

(Пример письма с читабельным шрифтом)

image12

(Пример письма с декоративным шрифтом)

Какой выбрать? Все зависит от ваших идей и от стиля дизайна.

Использование декоративных шрифтов в Stripo

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

Stripo-Добавление текста в баннер

  • введите свой текст в поле «Заголовок» на баннере;

  • затем выделите текст баннера и выберите из выпадающего списка нужный шрифт.

Настройка-Баннер-Шрифты

Присоединиться к Stripo

Цвет шрифта

Здесь достаточно соблюдать всего два правила:

1. Придерживайтесь минимального количества цветов

Используйте только те цвета, которые присутствуют в цветовой схеме вашего бренда. Хотите использовать более трех цветов? Забудьте и думать об этой идее — она сделает текст нечитаемым.

Вы можете даже уменьшить количество цветов до двух, сделав хедер того же цвета, но выделив его другим размером или шрифтом.

Если вы хотите выделить какое-то предложение или фразу, просто используйте жирный шрифт: выделять другим цветом — так себе решение.

2. Используйте контрастные цвета

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

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

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>

Рекомендации по доступности

Если вкратце, то мы должны учитывать эти рекомендации по нескольким причинам:

  • чтобы наши письма могли читать люди с цветовой слепотой;

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

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

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

Итак, вот рекомендации по доступности писем:

  1. Учитывайте контрастность цветов.

  2. Избегайте выравнивания по центру — выравнивание должно быть по левому краю.

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

  4. Придерживайтесь размера шрифта 14px и крупнее.

  5. Не подчеркивайте текст.

  6. Избегайте курсива, если вам нужно выделить часть текста. Только жирный шрифт!

  7. Не используйте СПЛОШНОЙ КАПС! Это примерно как кричать на ухо в микрофон!

Подробности о том, как создать доступное письмо, вы узнаете в нашем блоге в специальной статье о доступности.

Лучшие способы применения веб-безопасных шрифтов

Многочисленные эксперименты, проведенные маркетинговой командой eSputnik, показали, что лучшие шрифты для электронной почты — Arial и Tahoma. Arial признан самым убедительным шрифтом для тех, кто организовывает маркетинговые кампании. Tahoma отлично смотрится как в массивных, богатых контентом письмах, так и в коротких сообщениях.

Helvetica — самый популярный шрифт в англоязычных странах. На втором месте Arial.

Да, предпочтения могут отличаться в зависимости от языковых особенностей конкретной страны.

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

Я сделала в редакторе Stripo шаблон с одинаковым текстом и размером (18px), но разными шрифтами. В редакторе Stripo нет Palatino и Geneva, зато есть кастомные шрифты, например, Roboto и Open Sans, которые используются как дефолтные некоторыми почтовиками.

И вот результаты — просто сравните шрифты и выберите тот, который максимально соответствует вашим потребностям:

Выбор шрифтов емейла

Не тратьте время на поиск лучшего шрифта для Gmail, Outlook или любого другого почтовика, так как они заменяют неизвестные шрифты резервными. И, как мы уже говорили выше, у Gmail дефолтный шрифт — Arial, Outlook заменяет неведомые ему закарлюки на Times New Roman, а Mac OS X в любой непонятной ситуации использует Helvetica.

В завершение

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

  • Georgia и Times New Roman слишком узкие;

  • Courier New широкий… может быть, даже слишком широкий для электронного письма;

  • Arial легче, чем Helvetica;

  • Verdana и Tahoma невозможно различить.

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

Stripo предлагает множество веб-безопасных и декоративных шрифтов. Вы также можете загрузить собственные.

Paulo Marreiros 7 месяцев назад

Excelente o artigo dessa página. De muito gosto! Todos as minhas dúvidas e ac e acredito que também de outras pessoas, foram esclarecidas. PauloMar/São Paulo, Brazil.

Анна Кузнецова прокомментировал Paulo Marreiros 7 месяцев назад

Paulo, Obrigado por uma revisão tão agradável. Estamos muito felizes que o artigo tenha sido útil. Desejamos sinceramente o melhor em suas campanhas

pirates 8 месяцев назад

nice blog theme you use in your blog can you share which theme you are using

Анна Кузнецова прокомментировал pirates 8 месяцев назад

Hello, Pirates. Thank you for your question. If you are talking about the font we are using, it is Montserrat, 16px. If it's not what you asked us about, then could you clarify please what theme exactly you mean? Thank you

Igor Greshner 10 месяцев назад

Parabéns pela excelente pesquisa! Esclareceu bastante minhas dúvidas, sou a favor da Verdana e Tahoma a anos, por ser um formato mais agradável para ler.

Анна Кузнецова прокомментировал Igor Greshner 10 месяцев назад

Igor, Muito obrigado )) Estamos muito satisfeitos que nosso artigo seja útil. Desejo-lhe sucesso em email marketing

Khairom Munawwar Baharom 1 год назад

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

Анна Кузнецова прокомментировал Khairom Munawwar Baharom 1 год назад

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 1 год назад

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

Анна Кузнецова прокомментировал Martin Schenk 1 год назад

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

rohit dubey 1 год назад

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

Анна Кузнецова прокомментировал rohit dubey 1 год назад

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 2 года назад

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

Анна Кузнецова прокомментировал Marcia Bosscher 2 года назад

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 2 года назад

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

Анна Кузнецова прокомментировал Myron Gould 2 года назад

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!

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

← Предыдущие статьи Следующие статьи →
Earth Day Email Examples_Cover Image
сегодня · 13 мин читать
Примеры писем ко Дню Земли

За последние годы интерес общественности к проблемам экологии только вырос и мы не можем не поговорить с вами про наступающий День Земли. А точнее про email рассылку к этой дате. Что неуместно в таких письмах, а что все-такие стоит включить, как сделать письмо оригинальным — мы разберем на 15 примерах известных компаний.  С этим шаблоном вы создадите рассылку ко Дню Земли в считанные минуты Использовать Подготовка дизайна писем ко дню Земли Создавая email-рассылку, нужно учитывать множество факторов. Они вам известны:...

Дизайн Маркетинг Шаблоны How-to
4 дня назад · 17 мин читать
Дизайн подписи в письмах: 14 лучших примеров

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

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