Типографика email-письма: шрифты, текст и читаемость
Практические правила типографики для email: размер текста, длина строки, контраст, иерархия и отображение на мобильных устройствах.
Типографика определяет, насколько быстро получатель поймёт содержание письма, особенно на небольшом экране. Для деловой рассылки стабильная читаемость важнее редкого шрифта или сложного декоративного приёма.
Собрать, сохранить и проверить рабочий макет можно в онлайн-конструкторе HTML-писем.
Из чего складывается типографика письма
Размер текста
Основной текст должен читаться на смартфоне без дополнительного масштабирования экрана.
Межстрочный интервал
Достаточное расстояние между строками помогает разделять текст и не даёт абзацу превращаться в плотный блок.
Длина строки
Слишком длинные строки усложняют переход к следующей строке, а чрезмерно короткие создают большое количество переносов.
Контраст
Цвет текста должен заметно отличаться от фона. Особенно это важно для мелкого и служебного текста.
Рекомендуемая иерархия текста
Точные значения зависят от макета и выбранного шрифта. В качестве отправной точки можно использовать следующие ориентиры:
| Элемент | Ориентировочный размер | Назначение |
|---|---|---|
| Главный заголовок | 28–36 px | Передаёт основную тему или предложение письма |
| Подзаголовок | 20–26 px | Разделяет письмо на смысловые части |
| Основной текст | 16–18 px | Объясняет предложение, условия и пользу |
| Текст кнопки | 16–18 px | Показывает основное целевое действие |
| Служебный текст | 12–14 px | Содержит реквизиты, причину получения письма и условия отписки |
Как оформить текст email-письма
1. Определите иерархию
Используйте один главный заголовок в письме, короткие подзаголовки и обычный текст без большого количества вложенных уровней.
2. Настройте основной текст
Выберите комфортный размер, достаточный межстрочный интервал и заметный контраст с фоном.
3. Ограничьте длину строк
Не растягивайте текст на всю ширину большого экрана. На смартфоне сохраняйте боковые отступы от границ письма.
4. Сократите абзацы
Одна основная мысль в абзаце помогает быстро просмотреть письмо и найти нужную информацию.
5. Выделяйте умеренно
Используйте жирное начертание для ключевой мысли, условия или значения, а не для большинства предложений.
6. Проверьте CTA
Текст кнопки должен описывать конкретное действие и оставаться понятным без окружающего абзаца.
Как выбирать шрифты для рассылки
Безопаснее использовать распространённые системные шрифты или указывать для выбранной гарнитуры подходящую замену. Если внешний шрифт не загрузится, письмо должно сохранить структуру и читаемость.
Основной шрифт
Используется в макете при наличии поддержки со стороны почтового клиента.
Резервный шрифт
Заменяет основной шрифт, если тот недоступен. Он должен быть близким по ширине и пропорциям символов.
После замены шрифта необходимо проверить заголовки, переносы строк, высоту кнопок и расположение текста рядом с изображениями.
Как обеспечить читаемость на мобильном устройстве
- Основной текст читается без увеличения страницы.
- Между текстом и краями экрана сохранены боковые отступы.
- Длинные заголовки не занимают весь первый экран.
- Кнопки не сжимаются и не перекрывают соседние элементы.
- Колонки перестраиваются в последовательные блоки.
- Ссылки можно нажать пальцем без случайного выбора соседнего элемента.
- Служебная часть остаётся читаемой и не становится чрезмерно мелкой.
Типичные ошибки типографики
Слишком мелкий текст
Получателю приходится увеличивать письмо, из-за чего усложняется навигация и взаимодействие с кнопками.
Длинные абзацы
Большой непрерывный блок сложно просмотреть, особенно если читатель ищет конкретное условие или действие.
Недостаточный контраст
Светло-серый текст на белом фоне может быть плохо различимым даже при нормальном размере шрифта.
Избыток выделений
Одновременное использование нескольких цветов, размеров, подчёркиваний и жирных начертаний разрушает иерархию.
Проверка перед отправкой
- Текст читается без масштабирования на телефоне.
- Заголовки помогают просмотреть письмо и понять его структуру.
- Основной и служебный текст имеют достаточный контраст.
- Смысл не передаётся только цветом или изображением.
- Абзацы не перегружены несколькими разными мыслями.
- Системный резервный шрифт не ломает переносы и кнопки.
- Текст CTA описывает конкретное действие.
- Тестовое письмо проверено с изображениями и без них.
Что качественная типографика даёт бизнесу
Единые правила оформления сокращают время подготовки и согласования писем. Получатели быстрее понимают предложение, находят важные условия и переходят к нужному действию.
Быстрое восприятие
Читатель сразу видит главную мысль, аргументы и следующий шаг.
Единый стиль
Регулярные кампании сохраняют узнаваемую структуру независимо от темы и автора.
Меньше ошибок
Проверенные размеры, отступы и сочетания шрифтов повторно используются в новых письмах.
Удобство на мобильных
Письмо остаётся понятным и управляемым на экранах разной ширины.