best-fonts-for-email-usage-tips-and-tricks
05 февраля

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

Anton Diduh
Anton Diduh Content writer & Video content creator в Stripo
Оглавление
  1. Шрифты для HTML-писем: основные принципы
  2. Безопасные шрифты для писем
  3. Какой шрифт лучше всего использовать для email-рассылок?
  4. Использование кастомных шрифтов в письмах
  5. Шрифты в email-дизайне
  6. Межстрочный интервал в шрифтах для писем
  7. Шрифты для писем на баннерах
  8. Цвет шрифта в письме
  9. Руководство по доступности шрифтов и текстов в письмах
  10. В завершение
1.
Шрифты для HTML-писем: основные принципы

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

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

Шрифты для HTML-писем: основные принципы

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

1. Не используйте одновременно более двух шрифтов в письмах

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

2. Используйте стили шрифтов аккуратно

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

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

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

3. При выборе шрифтов придерживайтесь требований доступности

Доступность писем — один из главных трендов дизайна 2024 года, и шрифты — одна из его составляющих. Доступность имеет свои требования, которым крайне важно следовать. О правилах и требованиях доступности шрифтов мы расскажем в отдельном разделе «Рекомендации по доступности шрифтов для писем».

4. Обращайте особое внимание на разборчивость выбранного шрифта для писем

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

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

Лучшие шрифты для писем _ Тест

Существует два основных типа шрифта: Serif (с засечками) и Sans Serif (без засечек). Давайте разберемся, какой из них лучше использовать для email-рассылок.

Какой шрифт выбрать для писем: Serif или Sans Serif?

В чем разница между ними?

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

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

Сравнение шрифтов с засечками

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

Безопасные шрифты для писем

Вот список ТОП-10 шрифтов, которые можно использовать со 100% гарантией того, что они будут отображаться в почте пользователей именно так, как вы задумали:

1. Шрифт для писем Arial

Этот шрифт, разработанный еще в 1982 году, входит в комплект всех версий Microsoft, начиная с Windows 3, и в Apple Mac OS X. Отображается всеми почтовыми клиентами. Благодаря диагональным срезам на концах он выглядит менее механическим по сравнению с другими шрифтами с засечками.

Шрифт для писем Arial

2. Шрифт для писем Helvetica

Sans-serif, один из самых используемых шрифтов, имеет округлые буквы и широкие заглавные. Разработан в 1957 году.

Шрифт для писем Helvetica

3. Шрифт для писем Times New Roman

Этот идеальный шрифт имеет высокие строчные буквы, слегка сжатые, короткие нисходящие и восходящие. Создан по заказу газеты «The Times» в 1931 году. Это один из самых любимых шрифтов из семейства шрифтов без засечек у многих интернет-пользователей и веб-дизайнеров.

Шрифт для писем Times New Roman

4. Шрифт для писем Verdana

Он был разработан для чтения на экранах с низким разрешением. Его главная особенность — высокие и широкие символы в нижнем регистре.

Шрифт для писем Verdana

5. Шрифт для писем Courier / Courier New

Courier был разработан в 1955 году и приспособлен для моноширинного шрифта. В Courier New больше точек и запятых, чем в оригинальном Courier. Courier — стандартный современный шрифт, используемый для написания сценариев в киноиндустрии.

Шрифты для писем Courier и Courier New

6. Шрифт для писем Tahoma

Он напоминает Verdana, но отличается более узкими буквами, небольшими кеглями и узким межбуквенным интервалом. Используется в качестве экранного шрифта по умолчанию в версиях Windows 95, 2000 и XP.

Шрифт для писем Tahoma

7. Шрифт для писем Georgia

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

Шрифт для писем Georgia

8. Шрифт для писем Palatino

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

Шрифт для писем Palatino

9. Шрифт для писем Trebuchet MS

У некоторых букв укороченные хвостики; у полужирного начертания букв заостренные, а не закругленные, а также закругленные точки у прописных и строчных букв. Появился в 1996 году.

Шрифт для писем Trebuchet

10. Шрифт для писем Geneva

Это переработанная версия Helvetica. Основное отличие — наличие базового набора лигатур.

Шрифт для писем Geneva

Эти подходящие для писем шрифты считаются самыми читаемыми и одними из лучших шрифтов для email-дизайна.

Где взять безопасные для писем шрифты?

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

Какой шрифт лучше всего использовать для email-рассылок?

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

Helvetica — один из самых популярных шрифтов, который используют 25% людей в дизайне. Times New Roman занимает второе место. 

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

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

Я создал шаблон письма в редакторе Stripo с одинаковым текстом и одинаковым размером 18 px для каждого шрифта с засечками.

Выбор шрифтов для письма из списка для будущих кампаний

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

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

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

Как добавлять и использовать пользовательские шрифты с помощью Stripo

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

Здесь представлены шрифты, используемые по умолчанию в почтовых клиентах:

  • в iCloud Mail в качестве шрифта по умолчанию используется Helvetica;
  • в Gmail используется шрифт Arial;
  • в Microsoft Outlook самых старых версий часто используется шрифт Calibri.

Шрифты в email-дизайне

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

Размер шрифтов в письмах имеет значение

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

Безопасные шрифты для писем _ Работа над размером шрифта для письма

Знаете ли вы, что Stripo позволяет задавать разные размеры шрифта для мобильных и десктопных устройств? Например, можно использовать 14 px для писем, открываемых на десктопах, и 16 px для мобильных устройств.

Межстрочный интервал в шрифтах для писем

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

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

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

Точечный интервал

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

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

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

Шрифты для писем на баннерах

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

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

Имейте в виду, что лучше выбрать разборчивый стиль шрифта.

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

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

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

Здесь действуют всего 2 правила, которым необходимо следовать:

1. Сведите к минимуму количество цветов шрифта в письмах

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

Пример удачного цветового сочетания в письмах.

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

(Источник: письмо от Victoria's Secret)

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

Если вы планируете использовать разные цвета, используйте контрастные, чтобы текст был разборчив для дальтоников. Проверьте, достаточно ли они контрастны, с помощью следующих инструментов:

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

К слову о доступности писем...

Руководство по доступности шрифтов и текстов в письмах

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

  • чтобы люди с дальтонизмом могли читать наши письма, а также чтобы использовать необходимые цвета в проекте email-дизайна;
  • чтобы люди с нарушениями зрения могли прослушивать наши письма с помощью программ для чтения с экрана;
  • чтобы наши пользователи, которые очень заняты и проверяют почту за рулем или во время готовки и просят Siri «прочитать» входящие сообщения, могли прослушивать наши письма;
  • чтобы дать возможность дислексикам читать наши письма — ведь многие люди, страдающие дислексией, не знают об этом, но чтение неадаптированных текстов для них совершенно невыносимо;
  • используйте в email-дизайне максимум два шрифта sans-serif.

Итак, рекомендации по обеспечению доступности текста в письмах:

  1. Учитывайте контрастность цветов.
  2. Выравнивайте текст по левому краю, чтобы дислексикам было легче воспринимать его в письме — избегайте текста, выровненного по центру.
  3. Всегда ставьте знаки препинания в конце каждого абзаца. Да, это может противоречить правилам грамматики, но так мы сделаем письмо более разборчивым и хотя бы одного получателя более счастливым.
  4. Размер шрифта должен составлять 14 px или больше.
  5. Не подчеркивайте текст.
  6. Откажитесь от курсива. Если вам нужно выделить какую-то часть текста, используйте только жирный шрифт!
  7. Не используйте КАПС!
  8. Выбирайте разборчивые шрифты для своих писем.
  9. Не используйте несколько шрифтов. Одного или двух будет достаточно.
  10. Сочетайте разные шрифты с толстыми и тонкими штрихами.

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

email-accessibility-guidelines-standards-best-practicesГайдлайны по доступности писем: стандарты и лучшие практики

В завершение

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

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

Stripo предлагает несколько безопасных для писем и декоративных шрифтов. Вы также можете загрузить собственные шрифты
Была ли статья полезна?
Tell us your thoughts
Спасибо за ваш отзыв!
33 комментариев
Sanjay Wishtree 1 год назад
This is a very informative article. Thanks for sharing these helpful articles. Web Tecky
Alex O'Cardy 2 года назад
Legibility is indeed really important when it comes to email fonts, I've seen some newsletters where you had to take some time to figure out what's written there.
Anton Diduh 1 год назад
Hi! We fully agree with you. Readability is a critical aspect of any email design and a vital ingredient for improving the accessibility of email newsletters.
Woland Petrov 2 года назад
I can't choose between Helvetica and Arial, and now that I've learned that they're both the most popular email fonts, it makes it even harder to decide
Anton Diduh 1 год назад
Hi! Yes, the design process is a bit tricky thing. We hope you made the right choice)
Andron Silver 2 года назад
Do you think it's a good idea to use the most popular email fonts? Futura and Helvetica are the most attractive to me, but choosing one is hard.
Anton Diduh 1 год назад
Hello) Using popular fonts is a great way to make your email beautiful without mistakes. However, nothing prevents you from standing out from the crowd and using less popular fonts. If in your design they will look chic, then why not?)
John Smith 2 года назад
I'm so glad I discovered this article! Fonts for Email are hard to choose, and before reading your post, I thought about using four fonts in one newsletter.
Anton Diduh 1 год назад
Hello! We are glad that you liked this blog post.)
Errico Malatesta 2 года назад
So italic fonts are not the best? I thought about using them in my newsletters, but now I understand that it's better to choose the regular email fonts.
Galileo Cardinale 2 года назад
I've never thought that choosing the email fonts would be so hard. I was planning to use italic font styles, but now I know it's not a good idea.
Scott Piligrimm 2 года назад
I'm planning to use Helvetica Now, it's indeed pretty modern. Fonts for Email are quite hard to choose, and I can tell you I even thought about making custom one.
Woland Petrov 2 года назад
It's actually convenient that you can set the different email fonts sizes for mobile and desktop devices, don't remember if it was possible with my previous email template builder.
John Morrow 2 года назад
I didn't even know that underlining links was not preferable, noted. I'll definitely use these tips for the email fonts, thanks!
Anton Diduh 1 год назад
Hi! We're glad we could help)
Bill Shiphr 2 года назад
Thanks for the post and the ability to copy HTML tags, that's actually convenient! I'll definitely use these email fonts in my next project.
Anton Diduh 1 год назад
Hi! Always happy to help.)
Paulo Marreiros 3 года назад
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.
Анна Кузнецова 3 года назад
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 4 года назад
nice blog theme you use in your blog can you share which theme you are using
Анна Кузнецова 4 года назад
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 4 года назад
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.
Анна Кузнецова 4 года назад
Igor, Muito obrigado )) Estamos muito satisfeitos que nosso artigo seja útil. Desejo-lhe sucesso em email marketing
Khairom Munawwar Baharom 4 года назад
Hi Hannah. Do Montserrat font can go multi-platform on email? (Gmail, Outlook, etc..)
Анна Кузнецова 4 года назад
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 4 года назад
Für deutsche Texte ist Verdana und Tahoma nicht empfehlenswert, da die abschließenden Anführungszeichen "verkehrt" dargestellt werden.
Анна Кузнецова 4 года назад
Vielen Dank für Ihren wertvollen Kommentar. Wir haben die notwendigen Änderungen an unserem Artikel vorgenommen. Viel glück
rohit dubey 5 лет назад
Thanks for sharing this amazing content. This is really helpful for us.
Анна Кузнецова 5 лет назад
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!
Анна Кузнецова 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 5 лет назад
I found this article to be a very helpful refresher. Thank you!
Анна Кузнецова 5 лет назад
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!
Тип
Индустрия
Сезоны
Интеграции
Редактор Stripo
Упростите процесс создания писем.
Плагин Stripo
Интегрируйте Drag-n-Drop редактор Stripo в свое веб-приложение.
Заказать шаблон
Наша команда может разработать и сверстать его для вас. Просто заполните бриф, и мы свяжемся с вами в ближайшее время.

Редактор Stripo

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

Плагин Stripo

Для продуктов, которые могут эффективно использовать интегрированный white label конструктор писем.