Как сделать текстовое письмо визуально убедительным без единой картинки
Письмо без изображений выглядит скучно только тогда, когда его собирают как документ Word. Сплошной текст одним блоком, одинаковый размер шрифта, отсутствие структуры. При работе со шрифтом, отступами и цветом текстовое письмо читается лучше многих оформленных.
У него есть три преимущества, которых нет у письма с картинками. Оно весит в разы меньше, сохраняет вид при отключённых изображениях и не обрезается в Gmail.
Когда текстовое письмо работает лучше оформленного
| Тип письма | Почему без картинок лучше |
| Личное письмо от основателя | Оформление разрушает ощущение личного обращения |
| Транзакционные и сервисные | Ниже вероятность попасть во вкладку «Промоакции» |
| B2B-коммуникация | Выглядит как деловая переписка |
| Реактивация неактивных | Отличается от того, что человек игнорировал раньше |
Инструмент 1. Иерархия шрифта
Основной приём. Читатель должен понимать структуру письма ещё до того, как начнёт его читать.
- Заголовок 24–28 px, полужирный
- Подзаголовки 18–20 px
- Основной текст 16 px, меньше делать не стоит, на телефоне 14 px уже мелко
- Служебная информация 13–14 px, серым цветом
Разница между уровнями должна быть заметной. При заголовке 18 px и тексте 16 px иерархия не считывается.
Инструмент 2. Отступы
В текстовом письме отступы работают вместо картинок. Они разбивают текст на блоки и дают глазу точки отдыха.
- Между абзацами 16–20 px
- Перед подзаголовком 32–40 px, после него 12–16 px
- Внутренние поля письма минимум 24 px с каждой стороны
- Межстрочный интервал 1,5, при 1,2 текст сливается
Инструмент 3. Разделители и акценты
Горизонтальная линия. Отделяет смысловые блоки. Светло‑серая толщиной 1 px выглядит аккуратнее чёрной.
Цветная вертикальная полоса слева. Оформление цитаты или ключевой мысли. Делается через ячейку таблицы с заливкой шириной 3–4 px.
Блок с фоновой заливкой. Светло‑серый или фирменный цвет с низкой насыщенностью. Выделяет главное без использования графики.
Транзакционное письмо Topaz Labs без единого изображения. Структура держится на размере заголовка, отступах и разделении фонов. Внутренний блок на светлом фоне выполняет роль акцентного блока без картинки.
Инструмент 4. Кнопка вместо ссылки
Единственный графический элемент, который стоит оставить. Кнопка на CSS с заливкой, скруглением и внутренними отступами 12–16 px по вертикали и 24–32 px по горизонтали.
Важная деталь. Кнопка делается именно кодом. Картинка не отобразится при отключённых изображениях, и смысл текстового письма пропадёт.
Инструмент 5. Эмодзи как маркеры
Спорный приём, но в текстовом письме эмодзи заменяют иконки. Одного или двух в качестве маркеров списка достаточно. Большее количество делает письмо несерьёзным и повышает шанс попасть в спам‑фильтр.
В B2B-письмах от эмодзи лучше отказаться полностью.
Чего избегать
Выравнивание по ширине. В email оно даёт рваные пробелы, потому что почтовые клиенты не переносят слова. Используйте выравнивание по левому краю.
Больше двух шрифтов. Один для заголовков, один для текста. Системные шрифты предпочтительнее, они не требуют загрузки.
Строки длиннее 75 символов. При ширине письма 600 px и шрифте 16 px строка выходит примерно такой длины. Это верхняя граница читаемости.
Заглавные буквы в заголовках. Читаются хуже и воспринимаются как повышенный тон.
Что проверить
- Письмо читается на телефоне без масштабирования
- В тёмной теме текст не сливается с фоном
- Кнопка сделана кодом, а не картинкой
- У логотипа проставлен alt-текст, если логотип остался в письме
- Вес письма ниже 102 КБ
Читайте также