Форма, вес, цвет, размер, интервал. Все эти факторы влияют на то, как воспримут ваше письмо получатели.
Сделали подборку важных советов, которые помогут правильно оформить письмо, чтобы тест имейлов не прошёл мўчитêл⍰ьно бöльн⍰. А также — свой топ современных веб-безопасных шрифтов.
Какие бывают шрифты
Можно выделить 2 большие группы: с засечками («антиква») и без них (известны под именем «гротеск»).
Антиква подойдёт для длинных текстов — пользователям её легче считывать. Достойные варианты с засечками: Times New Roman и Georgia.
Гротеск — семейство шрифтов для небольших текстов. Они меньше выделяются на однородном фоне и не перетягивают внимание на себя, что важно для дизайна.
💡 Большинство пользователей в мире использует смартфон для чтения почты. Поэтому лучше выбирать шрифт без засечек даже для длинных текстов: гротеск проще «просканировать» на небольшом экране.
Современные рассылки и статьи оформлены именно web гротеском. Добавьте нейтральный фон, акцентный заголовок, и ваше письмо почти готово.
Основные правила выбора
1. Не используйте более двух шрифтов
Если вариаций больше — письмо будет перегруженным. Вдобавок вы можете получить отписку из-за того, что читатель будет раздражён.
Лучше выбрать один красивый веб-шрифт: крупный — для заголовков, мелкий — для остального контента. Такие тексты проще прочитать даже на бегу, а письмо будет выглядеть аккуратно.
2. Не применяйте больше двух стилей
Если хотите что-то выделить, используйте жирный шрифт. Если сочетать внутри одного письма жирное, курсивное и обычное начертание, можно потерять внимание читателя.
3. Внимание — на читабельность
Читабельность — возможность быстро отличить одну букву от другой. Это фактор, который оказывает нашему мозгу поддержку при восприятии текста.
Перед рассылкой посмотрите макет и в вебе, и на любом современном мобильном устройстве. Представьте, что вы видите совокупность текста и дизайна впервые. Будет ли вам легко «пробежаться» по письму и уловить основную мысль?
Посмотрите, как web шрифт влияет на время чтения:
4. Веб-безопасность
Устройство подписчика может не поддерживать совсем уж красивый шрифт. Тогда система сама заменит его на тот, который сможет найти в базе.
Стоит сразу выбирать web-безопасные шрифты — такие, которые считываются большинством устройств на английском, русском и других языках.
💡 Когда будете выбирать шрифт для новой рассылки, вернитесь к этим правилам: ваш кандидат должен соответствовать всем четырём параметрам.
Подборка проверенных веб-безопасных шрифтов
Каждый участник рейтинга протестирован нами на практике и готов к скачиванию, чтобы украсить ваши рассылки.
1. ArialВозглавляет рейтинг, так как отлично читается и отображается во всех почтовиках и устройствах. Пожалуй, это лучший шрифт для оформления сайтов и рассылок.
Arial — один из системных шрифтов для Windows и MacOS. Значит, его можно использовать, даже когда вы не уверены, каким устройством пользуется получатель рассылки.
2. HelveticaСамый популярный гротеск в мире, возглавляет топ лучших шрифтов для заголовков на английском и русском. Имеет закруглённые строчные буквы и широкие заглавные. Но! Helvetica предустановлена только на MacOS.
3. Times New Roman
Это название знакомо каждому в мире, кто писал что-то по учёбе в Word. Шрифт с засечками, имеет высокие строчные буквы с короткими нисходящими и восходящими. Хорошо подходит для оформления web-сайтов с длинными текстами.
4. Verdana
Разработан специально для чтения с экрана. Особенность — высокие и широкие строчные буквы. Встраивается в Photoshop, Figma и иллюстраторах.
5. Georgia
Шрифт похож на Times New Roman, но предназначен для веба и выглядит не так официально. Буквы здесь более крупные при том же кегле и более широкие. Если задумываетесь, на каком шрифте остановиться, предпочитайте Georgia.
Отличительная черта — цифры: из-за выносных элементов они «прыгают» по строчке.
Сборник дизайнерских и регулярных шрифтов
Шрифт выбран. Как использовать?
Посмотрим, что ещё нужно знать, если под рукой нет брендбука или если вы делаете его прямо сейчас.
- Пусть шрифт будет уместным
И визуально поддерживает созданный вами контент на дизайне. Оформлять серьёзные новости и использовать Comic Sans — плохая идея. Смотрите сами:
Такой «весёленький» шрифт подойдёт для названия продукта или названия акции, но выбирать его для всего текста не стоит.
- Проверьте, есть ли все нужные символы и начертания
Знаки валют, надстрочные и подстрочные символы, диакритические знаки и другие элементы. Если есть — топ. Если нет — придётся подставлять их из другого шрифта, использовать иллюстратор, и будет некрасиво.
- Выбирайте запасной вариант для каждого уровня текста
При вёрстке письма выбирайте несколько шрифтов для каждого уровня с помощью font-family, где собраны лучшие бесплатные шрифты, которые можно протестировать онлайн. Если на устройстве пользователя нет основного шрифта, отобразится запасной.
К примеру, font-family: Helvetica, Arial, sans-serif означает, что текст отобразится у получателя шрифтом Helvetica. Если поддержки этого шрифта нет, то Arial. А если и этот отсутствует, то текст будет написан любым системным шрифтом без засечек.
- Обратите внимание на цвета
Чем меньше их будет — тем лучше. Если хотите выделить мысль, просто используйте жирный шрифт.
Письмо и так будет загружено блоками, картинками, иконками, иллюстрациями и кнопками. Так что здесь читателю не обойтись без нашей поддержки: дизайнерам стоит подумать, как облегчить его восприятие.
А если хочется выбрать кастомный?
Ну или не хочется, а нужно.
💡 Здесь мы настоятельно рекомендуем предварительно тестировать отображение шрифтов в различных комбинациях почтовиков, девайсов и ОС. Это легко сделать в Letteros 2.0: наш конструктор показывает отображение на 100+ популярных устройствах.
Если в почтовике не предусмотрена поддержка вашего оригинального дизайнерского шрифта, он просто заменит его на дефолтный.
И ещё рекомендация: если подбираете кастомный шрифт, конвертируйте его в изображение в фотошопе или фигме на дизайне. Тогда он точно не превратится в Arial на сайте или в рассылке. Но важно помнить: у некоторых пользователей загрузка картинок по умолчанию отключена. Чтобы смысл письма от этого не пострадал, прописывайте alt текст к изображениям.
Где скачать?
Протестировать, скачать бесплатно и подобрать подходящий шрифт можно на Google Fonts, Best Free Fonts for Designers или в скачиваемой подборке фотошопа.
За готовыми тематическими подборками дизайнерских шрифтов — сюда. Здесь можно сразу увидеть оформленный текст сайта и его заголовков без тестирования в фотошопе.
Зафиналимся
- Отдавайте предпочтение web безопасным шрифтам с поддержкой разными ОС. Они легко конвертируются между устройствами.
- Не переусердствуйте с цветами и стилями. Здесь действует правило: меньше — лучше. Даже для фона.
- Тестируйте читабельность шрифта на разных устройствах.
- Кастомный шрифт тестируйте особенно внимательно.
- Декоративный, редкий и любой «красивый» шрифт лучше вставлять картинкой и прописывать для неё alt.