Лучшие шрифты для рассылок: советы и хитрости

Одна из самых сложных проблем при создании письма — правильный выбор шрифта. Вес, высота, ширина, цвет, форма, отступы… Действительно ли всё имеет значение? Да, имеет, но самое важное — выбрать такой шрифт, который будет хорошо читаемым; все остальные параметры шрифта являются второстепенными.

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

Как выбрать правильный шрифт?

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

При выборе оптимального шрифта следует учитывать три базовых правила:

1. Не более двух шрифтов — причем, они должны дополнять друг друга

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

2. Предварительно тестируйте кастомные шрифты на разных устройствах

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

3. Уделите особое внимание читаемости

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

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

В 2010 году Норберт Шварц и Хюнджин Сонг провели эксперимент по разборчивости шрифта. Результаты были впечатляющими: чтение курсивных и декоративных шрифтов отнимает почти вдвое больше времени, чем стандартных и легко читаемых:

image5

Веб-безопасные шрифты

Вот топ-10 лучших веб-безопасных шрифтов, также известных как email-безопасные. Вы можете использовать их со 100% гарантией корректного отображения в пользовательских входящих:

1. Arial

Разработан в 1982 году, входит во все версии Microsoft, начиная с Windows 3, и Apple Mac OS X. Отображается всеми почтовиками. Благодаря терминальным диагональным вырезам выглядит менее механическим по сравнению с другими шрифтами семейства Sans-Serif.

2. Helvetica

Шрифт без засечек, один из наиболее часто используемых шрифтов. Имеет закругленные строчные буквы и широкие заглавные. Разработан в 1957 году.

3. Times New Roman

Имеет высокие строчные буквы, слегка сжатые, с короткими нисходящими и восходящими. Создан по заказу «Таймс» в 1931 году.

4. Verdana

Разработан для чтения текста на экранах с низким разрешением. Главная особенность — высокие и широкие строчные буквы.

5. Courier / Courier New

Разработан в 1955 году, похож на Times New Roman, но настроен под моноширинный шрифт. Courier New имеет более тяжелые точки и запятые, чем оригинальный Courier. Является стандартным шрифтом для экранных надписей в киноиндустрии.

6. Tahoma

Похож на Verdana, но имеет более узкие буквы, маленькие просветы и интервалы. Используется как дефолтный шрифт экрана для версий Windows 95, 2000 и XP.

7. Georgia

Высокий нижний регистр, штрихи толще среднего, цифры легко сочетаются с текстом благодаря одинаковым размерам.

8. Palatino

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

9. Trebuchet MS

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

10. Geneva

Редизайн шрифта Helvetica. Основное отличие — добавлен базовый набор лигатур.

Эти шрифты считаются наиболее удобочитаемыми для электронной почты.

Кастомные шрифты 

Бывает так, что вы хотите — или должны — использовать в письме собственный уникальный шрифт. Например, чтобы соблюдать стиль бренда. Или сделать праздничное письмо для соответствующего случая.

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

Но при этом мы настоятельно рекомендуем предварительно тестировать их отображение разными почтовиками, девайсами и ОС. Вы можете сделать это с помощью нашего встроенного инструмента тестирования.

Важно отметить:

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

Вот список дефолтных шрифтов для самых популярных почтовиков:

  • iCloud Mail использует Helvetica в качестве дефолтного.

  • Gmail применяет Arial.

  • Microsoft Outlook самых древних версий часто использует Calibri.

  • Outlook 2007/2010/2013 использует Times New Roman как запасной.

Какой шрифт выбрать: с засечками или без?

Еще один важный момент — выбор шрифта: с засечками или без. В чем разница?

image2

Шрифты Serif (с засечками) можно определить как шрифты с маленькой черточкой в конце каждого символа. Самые популярные шрифты с засечками — Times New Roman и Georgia.

Шрифты Sans Serif (без засечек) — это те, которые не имеют такой декоративной линии в конце символа. Самые популярные веб-безопасные шрифты без засечек — Arial, Trebuchet MS и Helvetica.

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

Размер шрифта электронного письма

Если вы меняете шрифт, убедитесь, что выбранный вами не смотрится мельче предыдущего. Разные шрифты часто отличаются по высоте символов, поэтому один и тот же размер 14px на самом деле может быть разным в зависимости от выбранного семейства шрифтов.

Лучший размер шрифта для писем — 14px и крупнее для пользователей десктопных компьютеров и 16px для тех, кто использует мобильные устройства.

Чтобы настроить 14px для десктопной версии с помощью Stripo, вам нужно перейти во вкладку «Оформление» -> «Общие настройки».

Чтобы установить более крупный шрифт для мобильных устройств, перейдите в «Оформление» -> «Адаптивность».

HTML-Email-Fonts_Mob-View-SettingsЗдесь вы можете настроить размеры шрифта для разных элементов: хедер, футер, основной текст контента, заголовки, кнопки и т. д., чтобы сделать шрифты HTML-письма разборчивыми на любом устройстве.

Использовать Stripo

С помощью Stripo я сделала шаблон, который позволяет сравнить разные размеры одних и тех же шрифтов. Вот результаты:

image3-1

Межстрочный интервал

Межстрочный интервал — это расстояние по вертикали между строками. Он измеряется в процентах от размера шрифта.

Некоторые источники утверждают, что 150% — лучший размер межстрочного интервала.

Но с учетом рекомендаций по доступности он варьируется от 150% до 200%.

1-point-Spacing

(текст с межстрочным интервалом, равным единице)

1-and-6-Point-Interval

(текст с интервалом 1,6 строки)

Дополнительную информацию о доступности и способах тестирования писем на предмет доступности вы найдете в специальной статье нашего блога.

Ссылки в письмах

Не используйте другой шрифт, чтобы привлечь внимание читателей к ссылкам. И ни в коем случае не добавляйте ссылки без анкорного текста. Текст анкора должен пояснять, куда ведет данная ссылка, и быть органичной частью текста. Не используйте слова «здесь» или «ссылка» в качестве анкорного текста. Они слишком короткие и слишком общие, чтобы быть интересными.

Одно из лучших решений — сделать ссылки того же цвета, что и логотип. Это выглядит великолепно, вот посмотрите:

image9Никогда не подчеркивайте ссылки. Получатели с дислексией от этого теряются.

Кнопки в письмах

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

Что касается цвета кнопок, каких-то определенных правил здесь нет. Но лучше полагаться на цветовую психологию и стараться не разрушать концепцию дизайна слишком «громкой» цветопередачей.

Для кнопок лучше всего подходят два шрифта: Georgia и Verdana. Также Georgia — отличное решение для заголовков и подзаголовков. Выглядит действительно круто!

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

Вот пример, когда кнопка смотрится отлично:

image8

Важно отметить:

В Stripo вы можете даже добавить в кнопки пробелы. Это называется «внутренние отступы».

Email-Width-for-Buttons_Setting-Witespace-for-Buttons ruЭто добавит дополнительное пространство между текстом и границей кнопки и сделает ее текст более разборчивым.

Вы также можете установить специальный размер шрифта кнопок для мобильной версии.

Для этого вам нужно:

  • перейти на вкладку «Оформление»-> «Общие настройки» -> «Адаптивность»;

  • установить размер текста кнопки, чтобы сделать его разборчивым на мобильных экранах. Оптимальный размер — 16px или крупнее;

  • включить «Кнопки на всю ширину», чтобы сделать кнопки шире на мобильных устройствах. У полноразмерных кнопок выше шансы быть замеченными.

Full-Width-Buttons-for-Mobiles

Попробуйте Stripo

Текст поверх баннера  

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

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

image10

(Пример письма с легко читаемым шрифтом)

image12

(Пример с декоративным шрифтом).

Какой выбрать? Все зависит от ваших идей и от стиля дизайна.

Подробности о создании баннеров с текстом поверх изображений и декоративными шрифтами вы найдете в нашей статье о баннерах.

Цвет шрифта письма

Здесь всего два правила, которым стоит следовать:

1. Придерживайтесь минимального количества цветов

Используйте только те цвета, которые присутствуют в цветовой схеме вашего бренда. Если вы хотите использовать более трех цветов, забудьте эту идею — она сделает текст нечитаемым.

Вы можете даже уменьшить количество цветов до двух, сделав хедер того же цвета, но выделив его другим размером или шрифтом.

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

2. Используйте контрастные цвета

Если вы собираетесь использовать яркие цвета — многие из нас делают это в праздничных рассылках — обязательно выбирайте контрастные. Не помещайте красный текст поверх зеленых кнопок, не используйте белый на сером. Это может показаться красивым для людей с хорошим зрением, но дальтоники могут вообще не разобрать текст.

Как правило, дизайнеры используют для контента черный или темно-серый цвета. Это удобнее для чтения. Единственное исключение — если у вас черный фон. В этом случае используйте белый шрифт. Не используйте светло-серый, потому что его трудно читать из-за разных настроек диапазона контраста.

HTML-теги для форматирования текста

Обычно веб-безопасные шрифты прописаны в верстке CSS, так что это уже не совсем HTML, но есть несколько HTML-тегов форматирования текста. Я надеюсь, что вы их уже знаете. Но все же, вот они, на всякий случай:

  или  
        
  • первый пункт
  •     
  • второй пункт
  •     
  • третий пункт
  • Для использования курсива, чтобы выделить текст:
  или  
 
  • Чтобы отметить текст, который был удален, но не заменен:

 

Рекомендации по доступности

Если вкратце, то мы должны учитывать эти рекомендации по нескольким причинам:

  • чтобы наши письма могли читать люди с цветовой слепотой;

  • чтобы дать возможность людям с нарушениями зрения слушать наши письма с помощью программ чтения экрана;

  • чтобы пользователи, которые очень заняты и проверяют почту во время вождения или приготовления пищи, могли попросить Siri «прочитать» входящие сообщения;

  • чтобы дислектикам было удобно читать наши письма — многие люди, страдающие дислексией, даже не знают об этом, но чтение неадаптированных текстов для них совершенно невыносимо.

Итак, вот рекомендации по доступности писем:

 

  1. Учитывайте контрастность цветов.
  2. Избегайте выравнивания по центру — выравнивание должно быть по левому краю.
  3. Всегда добавляйте знаки препинания в конце каждого пункта маркированного списка. Да, это может противоречить правилам грамматики, но таким образом мы сделаем письма более разборчивыми — и по крайней мере одного человека счастливее.
  4. Придерживайтесь размера шрифта 14px и крупнее.
  5. Не подчеркивайте текст.
  6. Избегайте курсива, если вам нужно выделить часть текста. Только жирный шрифт!
  7. Не используйте СПЛОШНОЙ КАПС!

Подробности о том, как создать доступное письмо, вы узнаете в нашем блоге в специальной статье о доступности. Проверьте доступность ваших писем с помощью Email on Acid.

Лучшие способы применения веб-безопасных шрифтов 

Многочисленные эксперименты, проведенные маркетинговой командой eSputnik, показали, что лучшие шрифты для электронной почты — Arial и Tahoma. Arial признан самым убедительным шрифтом для тех, кто организовывает маркетинговые кампании. Tahoma отлично смотрится и в массивных, богатых контентом письмах, и в коротких сообщениях.

Я сделала шаблон в редакторе Stripo с одинаковым текстом и размером (18px), но разными шрифтами. В редакторе Stripo нет Palatino и Geneva, зато есть кастомные шрифты, например Roboto и Open Sans, которые используются как дефолтные некоторыми почтовиками.

И вот результаты — просто сравните эти шрифты и выберите тот, который максимально соответствует вашим потребностям:

Choosing-Email-FontsНе тратьте время на поиск лучшего шрифта для Gmail, Outlook или любого другого почтовика, так как они заменяют неизвестные шрифты запасными. И, как мы уже говорили выше, у Gmail дефолтный шрифт Arial, Outlook заменяет на Times New Roman, а Mac OS X в любом непонятном случае использует Helvetica.

В завершение

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

  • Georgia и Times New Roman слишком узкие;

  • Courier New широкий… может быть, даже слишком широкий для электронного письма;

  • Arial легче, чем Helvetica;

  • Verdana и Tahoma невозможно различить.

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

Stripo предлагает множество веб-безопасных и декоративных шрифтов. Вы также можете загрузить собственные.





Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *