К основному содержимому
Все коллекцииРабота в онлайн-редакторе
Какие шрифты использовать в email-рассылках
Какие шрифты использовать в email-рассылках

Поддержка веб-шрифтов в почтовых клиентах

Евгений avatar
Автор: Евгений
Обновлено больше недели назад

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

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

Существует два основных подхода к выбору шрифтов: использование безопасных (стандартных или системных) веб-шрифтов и кастомных веб-шрифтов. В нашем редакторе представлены безопасные шрифты, гарантирующие корректное отображение во всех почтовых клиентах.

Безопасные (системные) шрифты

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

Основные безопасные веб-шрифты:

  • Arial. Классический и универсальный шрифт без засечек, обеспечивающий отличную читаемость.

  • Helvetica. Еще один популярный шрифт без засечек, известный своей нейтральностью и четкостью.

  • Times New Roman. Традиционный шрифт с засечками, часто используемый для формальных писем и документов.

  • Verdana. Шрифт без засечек, специально разработанный для хорошей читаемости на экранах.

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

  • Tahoma. Четкий и компактный шрифт без засечек, хорошо подходящий для небольших текстовых блоков.

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

Стандартные веб-шрифты

Кастомные веб-шрифты (Google Fonts / .woff)

Плюсы: Гарантированное корректное отображение во всех почтовых клиентах; простота использования; не требуют дополнительных настроек.

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

Минусы: Ограниченный выбор; менее оригинальный дизайн.

Минусы: Риск некорректного отображения в некоторых почтовых клиентах; требуют дополнительной настройки и тестирования; ответственность за лицензирование при загрузке .woff-файла.

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

Кастомные веб-шрифты

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

Мы представляем возможность загрузить собственные веб-шрифты двумя способами:

  1. Загрузка из Google Fonts. Вы можете выбрать любой шрифт из обширной библиотеки Google Fonts прямо в интерфейсе сервиса. Это удобный и быстрый способ добавить в рассылку нестандартный шрифт.

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

Однако, несмотря на свою привлекательность, такие шрифты имеют некоторые подводные камни, о которых важно знать:

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

  • Влияние на клиентский опыт. Загрузка шрифтов может незначительно увеличить время загрузки письма. Поэтому важно оптимизировать размер woff-файлов и использовать шрифты разумно. Либо использовать Google Fonts, так как это гарантирует оптимальный размер файлов и широкую совместимость.

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

Почтовый клиент

Поддержка веб-шрифтов

Apple Mail

✓ Да

Outlook 2013-2021

✘ Нет

Outlook Office 365 (Win & Mac)

✘ Нет

Outlook for Mac

✓ Да

Windows 11

✓ Да

Windows 11

✘ Нет

Gmail App

✘ Нет*

iOS

✓ Да

Samsung Mail

✘ Нет**

AOL Mail

✘ Нет

Gmail

✘ Нет***

Office 365

✘ Нет

Outlook.com

✘ Нет

Yahoo! Mail

✘ Нет

* (Google заменяет шрифты — по умолчанию на Android используется Roboto, на iOS — Helvetica)

** (Шрифты автоматически заменены — Roboto является шрифтом без засечек по умолчанию)

*** (Отображается Roboto, поэтому существует ограниченная поддержка очень специфических веб-шрифтов — вероятно, специфических из Google Fonts, возможно, только Roboto, поскольку это шрифт Google по умолчанию)

Рекомендации по работе с кастомными веб-шрифтами

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

1. Выбор правильного резервного шрифта (для кастомных HTML-макетов)

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

  • Быть безопасным: Резервный шрифт должен быть одним из безопасных веб-шрифтов, чтобы гарантировать его корректное отображение.

2. Избегайте писем только с изображениями

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

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

3. Обязательное тестирование перед отправкой:

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

4. Настраивайте веб-шрифты в DashaMail

Вы можете выбрать шрифт из Google Fonts или загрузить свой .woff-файл непосредственно в редакторе. Подробные инструкции вы найдете в нашей базе знаний.

5. Особенности Outlook и как их обойти

Как уже упоминалось, Outlook может заменять веб-шрифты на Times New Roman. Чтобы избежать этого, в HTML-макетах всегда указывайте резервный безопасный шрифт. Также вы можете обратиться к базе знаний MSO для более точной настройки стилей в Outlook.

Читайте в блоге. Отображение писем в Outlook.

6. Избегайте faux bold и faux italic

Faux bold и faux italic — это искусственное утолщение и наклон шрифта, которые применяются браузером или почтовым клиентом, если отсутствуют соответствующие стили в файле шрифта. Текст с таким стилем может выглядеть неаккуратно. Если вам нужны жирный или курсивный стили, убедитесь, что они присутствуют в загружаемом вами woff-файле или доступны в Google Fonts.

Выбор правильного шрифта для вашего бренда

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

Согласованность с общей брендовой айдентикой

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

Читабельность на разных устройствах и доступность

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

Тон и эмоции, которые передает шрифт

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

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

Заключение: Тестируйте и анализируйте!

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

Тестирование

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

Анализ

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

Нашли ответ на свой вопрос?