Меню
Switch to English

Рейтинг лучших шрифтов для электронных писем

Форма, вес, цвет, размер, интервал. Все эти факторы влияют на то, как воспримут ваше письмо получатели.

Сделали подборку важных советов, которые помогут правильно оформить письмо, чтобы тест имейлов не прошёл мўчитêл⍰ьно бöльн⍰. А также — свой топ современных веб‑безопасных шрифтов.

Какие бывают шрифты

Шрифты можно поделить на 2 большие группы: с засечками (также называемся «антиква») и без них (их ещё знают под именем «гротеск»).

Антиква подойдёт для длинных текстов. Пользователям её легче считывать. Учитывайте это, когда подбираете шрифт. Достойные шрифты с засечками: Times New Roman и Georgia.

Гротеск — семейство хороших шрифтов для небольших текстов. Они меньше выделяются на однородном фоне и не перетягивают внимание на себя .

💡 Большинство пользователей мира использует смартфон для чтения почты. Поэтому лучше использовать шрифт без засечек даже для длинных текстов: гротеск проще «просканировать» на небольшом экране. 

Также современные рассылки и статьи оформлены именно web гротеском. Добавьте нейтральный фон, акцентный заголовок, и любой текст уже будет оформлен приятно для читателя.

Основные правила выбора

1. Не используйте более двух шрифтов

Если шрифтов больше — письмо будет перегруженным. Кроме того, вы можете получить отписку из‑за того, что читатель будет раздражён.

Лучше выбрать один веб‑шрифт для письма. Крупный — для заголовков, мелкий — для остального контента. Письма с единым шрифтом проще прочитать даже на бегу, а письмо будет выглядеть аккуратно.

2. Не применяйте больше двух стилей 

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

3. Внимание — на читабельность шрифта

Читабельность — возможность быстро отличить одну букву от другой. 

Перед рассылкой посмотрите макет и в вебе, и на любом современном мобильном устройстве. Представьте, что вы видите текст впервые. Будет ли вам легко «пробежаться» по нему и уловить основную мысль?

Посмотрите, как web шрифт влияет на время чтения:

4. Веб‑безопасность

Устройство подписчика может не поддерживать совсем уж красивый шрифт. Тогда система сама заменит его на тот, который сможет найти в базе. 

Стоит сразу выбирать web-безопасные шрифты: такие, которые считываются большинством устройств и операционных систем на английском, русском и других языках. 

💡 Когда будете выбирать шрифт для новой рассылки, вернитесь к этим правилам: ваш кандидат должен соответствовать всем четырём параметрам.

Подборка лучших веб‑безопасных шрифтов

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

Arial
Возглавляет рейтинг, потому что отлично читается и отображается во всех почтовиках и устройствах. Пожалуй, это лучший шрифт для оформления сайтов и рассылок. 

Arial — один из системных шрифтов для Windows и MacOS. Значит, его можно использовать, даже когда вы не уверены, каким устройством пользуется получатель рассылки.

Скачать бесплатно можно тут

Helvetica

Самый популярный гротеск в мире и лучший шрифт для заголовков на английском и русском языке. Имеет закруглённые строчные буквы и широкие заглавные. Но! Helvetica предустановлена только на MacOS.

Загрузить бесплатно можно тут

Times New Roman

Знаком каждому в мире, кто писал что‑то по учёбе. Шрифт с засечками, имеет высокие строчные буквы с короткими нисходящими и восходящими. Хорошо подходит для web-сайтов с длинными текстами, например, оформления новостей.

Качайте бесплатно тут

Verdana

Разработан специально для чтения текста на экранах. Особенность — высокие и широкие строчные буквы. Встраивается в Photoshop, Figma и иллюстраторах. Также есть в сервисах для работы с текстами.

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.

Советуем почитать