Блог 02.02.2026

Типографика в email-рассылках: как выбрать шрифт, который не сломается

Типографика в email-маркетинге — это компромисс между дизайном и ограничениями почтовых клиентов. В отличие от веба, где браузеры поддерживают стандарты, почтовые программы (особенно Outlook и старые версии Gmail) работают по архаичным правилам.

В этой статье мы разберём техническую сторону типографики: как настроить Font-Stack, какие хаки применить для Outlook и как сохранить фирменный стиль, не навредив письму.

Системные (Web Safe) и Кастомные (Web Fonts): Основы выбора

Для начала важно разделить шрифты на две категории, чтобы определить стратегию вёрстки.

Web Safe Fonts (Системные) Это стандартные шрифты, предустановленные на большинстве устройств (Windows, Mac, iOS, Android).

Примеры: Arial, Verdana, Georgia, Times New Roman, Courier New, Tahoma.
Преимущество: Отобразятся у 99% пользователей.
Недостаток: Могут не соответствовать брендбуку.

Web Fonts (Кастомные) Это шрифты, которые загружаются со стороннего сервера (Google Fonts, Adobe Fonts или вашего хостинга).

Примеры: Roboto, Open Sans, Proxima Nova и ваши корпоративные шрифты. (Выбрать и протестировать шрифты можно на ресурсе Google Fonts)
Преимущество: Уникальный дизайн и узнаваемость.
Недостаток: Поддерживаются не везде. Apple Mail и iOS покажут их, но Outlook и десктопный Gmail часто проигнорируют.

Правило: Не используйте более двух разных шрифтов и двух стилей (Normal/Bold) в одном письме, так как это влияет на скорость загрузки.

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

Искусство Font-Stack: Механизм запасного отображения

Ошибка — указать в CSS только один желаемый шрифт. Если почтовый клиент его не найдёт, он поставит дефолтный (например, Times New Roman), что приведёт к смещению вёрстки.

Решение — Font-Stack (шрифтовой стек). Это цепочка приоритетов, заданная в свойстве font-family.

Правильный синтаксис

CSS
font-family: ‘Open Sans’, Helvetica, Arial, sans-serif;

Логика стека:

‘Open Sans’ — Целевой шрифт (Web Font). Если почтовый клиент умеет его загружать, пользователь увидит его.
Helvetica — Fallback #1. Если Open Sans не загрузился, система ищет Helvetica (доступна на всех Mac).
Arial — Fallback #2. Если нет Helvetica (например, на Windows), используется Arial.
sans-serif — Универсальная категория. Последний рубеж. Команда: «Поставь любой доступный шрифт без засечек».

Риск смещения вёрстки (Layout Shift)

Важный момент: ширина символов. Представьте: фирменный шрифт — узкий (любой Condensed). Заголовок встал в одну строку. В качестве запасного указана Verdana, которая широкая.

Результат: В Outlook Verdana заменит ваш шрифт, текст станет шире, заголовок разобьётся на две строки.

Совет: Подбирайте запасные шрифты, близкие по пропорциям к основному. (Для помощи в подборе шрифтов и генерации @font-face можно использовать Font Squirrel.

Для узких гротесков используйте в запасе Arial Narrow.
Для широких — Verdana.
Для классических шрифтов с засечками — Georgia.

Техническая реализация Web Fonts

Если вы решили внедрить фирменный стиль через Google Font, важно сделать это правильно.

Для email лучше всего работает @font-face. Методы <link> и @import часто блокируются почтовыми клиентами. @font-face даёт контроль и позволяет корректно переключиться на Font-Stack, если шрифт не поддерживается.

Пример кода (вставляется в <head> письма):

HTML
<style type=»text/css»>
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
src: local(‘Roboto’), local(‘Roboto-Regular’),
url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2)
format(‘woff2’);
mso-font-alt: ‘Arial’; /* Указание альтернативного шрифта для Outlook */
}

.body-text {
font-family: ‘Roboto’, Arial, sans-serif;
}
</style>
Где сработает:

Где сработает:
✅ Apple Mail (iPhone, iPad, Mac)
✅ Стандартный почтовик Android (не Gmail App)
✅ Thunderbird

Где (скорее всего) не сработает:

❌ Gmail (веб и приложение) — часто игнорирует внешние ссылки, заменяя на Roboto или Arial.
❌ Outlook (Desktop) — полностью игнорирует @font-face.

Преодоление ограничений Outlook: Хаки и mso-теги

Outlook для Windows (версии 2007–2019) использует для рендеринга писем движок MS Word. Именно поэтому Outlook является основным препятствием для вёрстки. Он может проигнорировать Font-Stack, если видит «непонятный» кастомный шрифт, и принудительно применить Times New Roman.

Решение 1: Директива mso-font-alt

Это CSS-свойство Microsoft, позволяющее указать альтернативный шрифт специально для движка Office. Его нужно добавить прямо в описание @font-face: mso-font-alt: ‘Arial’;

Решение 2: Условные комментарии (надёжный метод)

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

CSS с защитой от Outlook: Добавьте этот код внутрь блока <style>.

CSS
/*<![endif]—>*/

Как это работает: Все почтовые клиенты пропустят этот код как комментарий. Однако Outlook увидит условие [if mso], применит его и принудительно (!important) назначит Arial всем элементам.

Пользователи Apple увидят Lobster, а пользователи Outlook — Arial, что исключает принудительное отображение Times New Roman.

Читабельность и UX: Ключевые технические параметры

Даже при технически верном подключении типографика может быть неэффективной. Типографика — это инструмент доставки смысла.

Проверьте письмо по чек‑листу:

Размер шрифта.
- Десктоп: минимум 14–16px для основного текста.
- Мобильные: 16–18px. Мелкий текст на смартфоне затрудняет чтение.
Межстрочный интервал (Line-height).
- Стандарт: 1.5 (или 150%). Если текст 16px, высота строки должна быть 24px. Слипшиеся строки ухудшают восприятие текста.
Контрастность.
- Светло‑серый текст на белом фоне — плохо читается. Используйте тёмно‑серый (#333333) или чёрный. (Проверить соответствие контрастности стандартам WCAG можно с помощью WebAIM Color Contrast Checker.)
Избегайте использования текста в виде изображения.
- Риски: Картинки могут быть отключены по умолчанию. Письмо может попасть в спам. Изображение не адаптируется под ширину мобильного устройства.
- Если всё же используете: Обязательно прописывайте Alt-текст.

Резюме: 5 правил типографики в Email

Всегда имейте запасной план (План Б). Используйте цепочку шрифтов (Font-Stack): сначала ваш фирменный шрифт, затем похожий безопасный, а в конце — универсальную категорию (sans-serif или serif).
Выбирайте похожий запасной шрифт. Он должен быть близок к основному по ширине символов. Если основной шрифт узкий, не ставьте в запас широкий, иначе это сместит вёрстку.
Подключайте кастомный шрифт надёжно. Используйте метод @font-face внутри стилей письма. Избегайте команд @import и внешних ссылок, так как почтовые клиенты их блокируют.
Учитывайте Outlook. Применяйте специальные команды (хаки), чтобы принудительно показать этому клиенту безопасный системный шрифт (например, Arial), если фирменный не сработает.
Тестируйте перед отправкой. Обязательно проверяйте, как письмо выглядит во всех ключевых почтовых клиентах, особенно в десктопном Outlook и мобильном Apple Mail.

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

В последней версии Letteros мы устранили эту техническую сложность:

Автоматические Font-Stack: Популярные шрифты в конструкторе имеют встроенные, протестированные Font-Stack с учётом метрики символов.
Встроенные mso-Хаки: Конструктор автоматически добавляет технические «костыли», чтобы письма в Outlook выглядели, как задумано.
Тестирование в один клик: Вы можете проверить отображение письма на 100+ устройствах и почтовых клиентах, включая версии Outlook.

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

Попробовать Letteros бесплатно