Войти
Регистрация
En
Ru
Полезное
Шрифты в рассылках
Как сделать так, чтобы было красиво и ничего не слетало
Рассказываем, какие шрифты улучшают восприятие информации, чем лучше писать заголовки и возможно ли использование фирменного начертания в письмах.
Какие шрифты бывают
В целом шрифты делятся на два типа:

  • антиква (с засечками)
  • гротеск (без засечек)
Антиква шрифты — это тип serif, гротескные — sans serif.

Какие использовать — решать только вам. В целом антиква-шрифты используются для длины и объема, а шрифты типа гротеск — для краткости и ёмкости.

Если нужно привлечь внимание (например, к заголовку), то обычно используют шрифты с засечками. Например, Georgia:
Шрифты без засечек не так выделяются на однородном фоне и привлекают меньше внимания. Поэтому ими обычно пишут несколько предложений или информацию в футере. Helvetica — один из таких популярных шрифтов:
Самый популярный кроссплатформенный шрифт с засечками — Times New Roman, а без засечек — Arial. Каждый из них также может иметь разное начертание (жирный, курсив).
Различные дизайнерские шрифты мы в этой статье не рассматриваем. Как основные в рассылках и вебе их практически не применяют.
Использование в рассылках
Шрифты должны быть хорошо читаемы. Есть перечень «безопасных» шрифтов», которые предустановлены практически на всех устройствах и поддерживаются большинством сервисов.
Sans serif или без засечек:

Arial
Arial Black
Helvetica
Lucida
Sans
Tahoma
Trebuchet
MS
Verdana

Serif или с засечками:

Georgia
Times New Roman
Courier
Шрифт прописывается при верстке рассылки в коде (раздел style) при помощи команды font-family. Нужно указать название шрифта и его тип. Например:

font-family: Georgia, serif;
Медиа-запрос
Отображение шрифтов в рассылках зависит от устройства, на котором подписчики открывают ваше письмо.

Чтобы текст в письме отображался каким-то конкретным шрифтом, то нужно использовать медиа-запрос @import и указать ссылку на файл со шрифтом. Так это выглядит в коде: 
<style type="text/css"> 
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,900&subset=cyrillic'); 
p { 
font-family: 'Roboto', Arial, sans-serif; 
} 
</style>
В параметре font-family должен быть прописан шрифт, который нужно использовать (в примере — Arial, sans-serif) на случай, если система не нашла желаемый шрифт (Roboto) или скачать его (не смогла обратиться за ним к стороннему файлу).

Иначе пользователь увидит пустые прямоугольники вместо текста.
Media queries для российского сегмента поддерживаются всего в двух клиентах: mail.ru и gmail.com.

Таким образом, даже если рассылку написать шрифтом Roboto, то он корректно будет отображаться только у подписчиков mail.ru и gmail.com.
Таблица поддержки стилевых элементов разными почтовыми клиентами
Брендированный шрифт
Мы рекомендуем использовать брендированные шрифты только в баннерах. Они могут быть сколь угодно креативными и красочными:
Основной текст и кнопки лучше сделать классическими шрифтами, которые поддерживаются на большинстве устройств.
Оптимальное решение
По сути, при вёрстке рассылки, у вас есть три основных варианта:

1. Использовать стандартные шрифты

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

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

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