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

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

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

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

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

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

Как выбрать правильный шрифт?

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

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

1. Не более двух шрифтов — причем, они должны дополнять друг друга

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

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

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

Прежде чем отправлять e-mail, просмотрите его глазами получателей.

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

Имеет высокие строчные буквы, слегка сжатые, с короткими нисходящими и восходящими. Создан по заказу «Таймс» в 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.

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

Размер шрифта электронного письма

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

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

Чтобы настроить 14px для десктопной версии с помощью Stripo, вам нужно перейти во вкладку «Оформление» -> «Общие настройки».

Чтобы установить более крупный шрифт для мобильных устройств, перейдите в «Оформление» -> «Адаптивность».

HTML-Email-Fonts_Mob-View-SettingsЗдесь вы можете настроить размеры шрифта для разных элементов: хедер, футер, основной текст контента, заголовки, кнопки и т. д., чтобы сделать шрифты HTML-письма разборчивыми на любом устройстве.

Использовать Stripo

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

image3-1

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

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

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

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

1-point-Spacing

(текст с межстрочным интервалом, равным единице)

1-and-6-Point-Interval

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

Дополнительную информацию о доступности и способах тестирования писем на предмет доступности вы найдете в специальной статье нашего блога.

Ссылки в письмах

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

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

image9Никогда не подчеркивайте ссылки. Получатели с дислексией от этого теряются.

Кнопки в письмах

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

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

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

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

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

image8

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

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

Email-Width-for-Buttons_Setting-Witespace-for-Buttons ruЭто добавит дополнительное пространство между текстом и границей кнопки и сделает ее текст более разборчивым.

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

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

  • перейти на вкладку «Оформление»-> «Общие настройки» -> «Адаптивность»;

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

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

Full-Width-Buttons-for-Mobiles

Попробуйте Stripo

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

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

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

image10

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

image12

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

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

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

Цвет шрифта письма

Здесь всего два правила, которым стоит следовать:

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. Не используйте СПЛОШНОЙ КАПС!

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

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

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

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

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

Choosing-Email-FontsНе тратьте время на поиск лучшего шрифта для 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 2 месяца назад

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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!

Анна Кузнецова прокомментировал 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!

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

← Предыдущие статьи Следующие статьи →
9 дней назад · 18 мин читать
10 лучших рассылок, которые вдохновят вас в 2020-2021

В предыдущей публикации мы рассказывали, как сделать вашу первую емейл-кампанию успешной и как улучшить текущие кампании при помощи 10 простых шагов. А сегодня мы хотели бы показать вам наилучшие (на наш взгляд) примеры емейл-рассылок, которые смогут вдохновить вас. 1. Brighton Тема: Обмен сумок – время отдавать и время получать. Каждая рассылка, созданная этой компанией – шедевр. Элегантный, красивый, обращенный к сильным эмоциям. Но это сообщение является еще и примером социального маркетинга. Очень важно напомнить людям, что хорошо не только иметь,...

Дизайн Маркетинг Шаблоны
16 октября · 11 мин читать
Идеи дизайна рассылок ко Дню Благодарения

Как сделать письмо ко Дню Благодарения и убедить получателей открыть его? Здесь вы найдете ответы на эти вопросы. С этим шаблоном вы создадите праздничную рассылку быстрее Использовать Идеи дизайна ко Дню Благодарения Принято считать, что письмо с простым дизайном может быть эффективным, если в нем есть какое-то супер-сообщение или гипер-щедрое предложение. Но за неделю или пару недель до Дня Благодарения папки «Входящие» у ваших клиентов будут переполнены письмами от конкурентов, чьи предложения и сообщения могут быть не хуже, чем у вас. Поэтому...

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