Демо-редактор Войти →
Дизайн Шаблоны
~ 18 мин читать
475725 просмотры
оценить
24 сентября

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

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

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

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

Stripo делает работу со шрифтами писем очень простой
Начать

Шрифты HTML-писем: основные правила, которые нужно соблюдать

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

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

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

2. Избегайте применения более двух стилей шрифта

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

При этом никогда не подчеркивайте текст и не используйте курсив — это противоречит правилам доступности писем.

3. Уделите особое внимание читабельности выбранного шрифта

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

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

Лучшие шрифты для писем_Тест

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

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

Да, эти типы (гарнитуры) тоже влияют на разборчивость шрифтов электронных писем. В чем заключается разница между ними?

Лучший шрифт для писем_Serif VS Sans Serif

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

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

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

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

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

1. Arial

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

2. Helvetica

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

3. Times New Roman

Имеет высокие строчные буквы, слегка сжатые, с короткими нисходящими и восходящими. Создан по заказу «The Times» в 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 и использовать их в рассылках.

Используйте кастомные шрифты в рассылках — соблюдайте стиль бренда
Присоединяйтесь к Stripo

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

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

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

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

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

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

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

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

Размер шрифта

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

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

Безопасные шрифты для почты_Работа над размером шрифта для почты

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

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

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

Настройка размера шрифта для десктопных устройств

  • войдите во вкладку «Оформление»;

  • перейдите в раздел «Общие настройки»;

  • выберите нужный шрифт в выпадающем меню. Кастомные шрифты, которые вы ранее добавили в свой профиль Stripo, тоже отобразятся в этом списке;

  • установите межстрочный интервал;

Установка шрифтов для всех писем

  • в разделе «Полосы» установите разные размеры шрифта для всех частей письма (кроме баннеров) и цвет шрифта;

Полосы_Шрифты

  • в разделе «Заголовки» нужно еще раз выбрать шрифт — возможно, он будет другим. Здесь же вы настраиваете размер шрифта для заголовков 1, 2 и 3;

Вкладка "Заголовки" _Настройка шрифтов, цветов и размера

  • в разделе «Кнопка» установите цвет и размер шрифта кнопки.

Работа с кнопками_шрифты

Попробовать Stripo

Настройка размера шрифта для мобильных

  • зайдите во вкладку «Оформление»;

  • перейдите в раздел «Адаптивность»;

  • установите размеры шрифта для хедеров и футеров, областей контента, пунктов меню и кнопок.

Мобильное форматирование_Шрифты почты

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

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

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

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

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

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

1-точечный интервал

(текст письма с одиночным интервалом)

1-х и 6-ти точечный интервал(текст письма с интервалом 1,6)

Ссылки

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

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

Лучшие шрифты для писем_Ссылки для переноса текста.

(Источник: письмо от Epilepsy Foundation)

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

Хотя из соображений доступности писем мы очень не советуем подчеркивать ссылки — это дезориентирует людей с дислексией.

Кнопки

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

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

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

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

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

Лучшие шрифты для баннеров почты

(Источник: email-шаблон Stripo)

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

При помощи Stripo в кнопки можно даже добавлять пробелы, чтобы между текстом и границами кнопки оставалось свободное пространство. Это делает их более читабельными.

Как это сделать? Поработайте над параметрами внутренних отступов во вкладке «Кнопка».

Добавляем пробелы в кнопку

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

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

  • зайти во вкладку «Оформление»;

  • перейти в раздел «Адаптивность»;

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

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

Кнопки на всю ширину для мобильных телефонов

Делайте кнопки CTA заметными и интерактивными на любом устройстве
Присоединиться к Stripo

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

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

Обратите внимание, что при этом лучше выбирать разборчивый шрифт и не писать слишком много текста на баннере. Будьте лаконичны.

Лучшие шрифты для почты_Работа с баннерами

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

Использование декоративных шрифтов для баннера в Stripo

  • после загрузки и редактирования изображения баннера кликните значок «Текст» над шаблоном, чтобы перейти к работе с текстом кнопки;

Использование декоративных шрифтов поверх баннеров

  • введите свой текст в поле «Заголовок» на баннере;

  • затем выделите текст баннера и выберите в выпадающем списке нужный шрифт.

Установка шрифтов баннера

Присоединиться к Stripo

Цвет шрифта

Здесь достаточно соблюдать всего два правила:

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

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

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

Пример удачного сочетания цветов в письме.

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

(Источник: письмо от Victoria's Secret)

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

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

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

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

Те email-маркетологи, которые предпочитают конструкторы шаблонов, могут форматировать текст прямо в этом инструменте.

Тем, кто любит кодировать письма с нуля, могут понадобиться следующие теги.

  • для использования жирного шрифта:
<strong> text here </strong> or <b> text here </b>
  • для создания маркированного списка:
<ul>

    <li> point 1 </li>

    <li> point 2 </li>

    <li> point 3 </li>

</ul>
  • для использования курсива:
<i> text here </i> or <em> text here <em>
  • для добавления мелкого текста тем же шрифтом, который вы используете:
<small> text here </small>
  • чтобы выделить текст желтой (по умолчанию) заливкой:
<mark> text here </mark>
  • а это — чтобы отметить абзац:
<p> text here </p>

Написание текста справа налево

Более 550 миллионов человек говорят на языках, в которых используется написание справа налево. Скрипт RTL (Right to Left) — это нечто больше, чем просто обратный порядок слов.

Например, здесь не нужно оборачивать числа, иностранные слова и т.д. Все знаки препинания, которые вы обычно ставите в конце строки, фактически начинают ее. Мы не будем вдаваться в подробности: вы можете ознакомиться со всеми рекомендациями по режиму RTL в нашем блоге, статья «Как с помощью Stripo писать текст письма справа налево».

В ней мы также рассказываем, как активировать опцию RTL в Stripo, чтобы вы могли использовать в рассылках RTL-скрипты без навыков программирования.

Активация опции RTL

Создавайте письма в формате RTL максимально быстро
Присоединиться к Stripo

Требования к доступности

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

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

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

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

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

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

  1. Учитывайте цветовые контрасты.

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

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

  4. Придерживайтесь размера шрифта 14 пикселей или больше.

  5. Не подчеркивайте тексты.

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

  7. Не используйте сплошной капс!

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

Какой шрифт лучше использовать для рассылок?

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

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

Helvetica — самый популярный шрифт в англоязычных странах. На втором месте Arial.

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

Я сделала в редакторе Stripo шаблон с одинаковым текстом и размером (18px), но разными шрифтами.

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

Выбор шрифтов для почты

В завершение

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

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

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

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

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

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

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

Paulo Marreiros 1 год назад

Excelente o artigo dessa página. De muito gosto! Todos as minhas dúvidas e ac e acredito que também de outras pessoas, foram esclarecidas. PauloMar/São Paulo, Brazil.

Анна Кузнецова прокомментировал Paulo Marreiros 1 год назад

Paulo, Obrigado por uma revisão tão agradável. Estamos muito felizes que o artigo tenha sido útil. Desejamos sinceramente o melhor em suas campanhas

pirates 1 год назад

nice blog theme you use in your blog can you share which theme you are using

Анна Кузнецова прокомментировал pirates 1 год назад

Hello, Pirates. Thank you for your question. If you are talking about the font we are using, it is Montserrat, 16px. If it's not what you asked us about, then could you clarify please what theme exactly you mean? Thank you

Igor Greshner 1 год назад

Parabéns pela excelente pesquisa! Esclareceu bastante minhas dúvidas, sou a favor da Verdana e Tahoma a anos, por ser um formato mais agradável para ler.

Анна Кузнецова прокомментировал Igor Greshner 1 год назад

Igor, Muito obrigado )) Estamos muito satisfeitos que nosso artigo seja útil. Desejo-lhe sucesso em email marketing

Khairom Munawwar Baharom 2 года назад

Hi Hannah. Do Montserrat font can go multi-platform on email? (Gmail, Outlook, etc..)

Анна Кузнецова прокомментировал Khairom Munawwar Baharom 2 года назад

Khairom, Thank you for your question. Unfortunately, it is not a websafe font. I just uploaded Montserrat to my account, sent an email to some email addresses. Only Apple Mail and Apple iPhone Mail (Native Mail on iOS) did not replace Montserrat with a default font. Others did replace it with the default fonts. Tests with Email on Acid just confirmed that Montserrat gets to be replaced by Gmail and Outlook.

Martin Schenk 2 года назад

Für deutsche Texte ist Verdana und Tahoma nicht empfehlenswert, da die abschließenden Anführungszeichen "verkehrt" dargestellt werden.

Анна Кузнецова прокомментировал Martin Schenk 2 года назад

Vielen Dank für Ihren wertvollen Kommentar. Wir haben die notwendigen Änderungen an unserem Artikel vorgenommen. Viel glück

rohit dubey 2 года назад

Thanks for sharing this amazing content. This is really helpful for us.

Анна Кузнецова прокомментировал rohit dubey 2 года назад

Rohit Dubey, We're glad to hear you find this helpful. You might be interested to know that you can upload custom fonts to your projects with Stripo. https://stripo.email/blog/add-use-custom-fonts-stripo/ Have a great day!

Marcia Bosscher 2 года назад

What font are you using for this post? I like it!

Анна Кузнецова прокомментировал Marcia Bosscher 2 года назад

Marcia, Thank you. We are flattered to know. It's Montserrat, 16px. For your convenience, to detect fonts on other websites, you can use this tool http://whatfontapp.com/ Have a good day

Myron Gould 2 года назад

I found this article to be a very helpful refresher. Thank you!

Анна Кузнецова прокомментировал Myron Gould 2 года назад

Myron, We're glad you liked it. You may be also interested in reading Paul Airy's post to find out which of the web-safe fonts is best for email accessibility. http://createsend.com/t/d-ABFFF5F25EC93A19 Also, we're glad to say that you can upload custom fonts with Stripo. If you have any questions about custom, web-safe and accessible fonts, or if you have any questions regarding our tool, please feel free to contact us at any time. Thank you for your interest in our blog!

Вас также может заинтересовать

Предыдущие статьи Следующие статьи
9 дней назад · 17 мин читать
Идеи для Рождественских рассылок

Рождество — лучшее время года. Люди полны ожиданий, они надеются, что счастье придет и останется. А маркетологи тем временем надеются побить свои рекорды продаж ;) И сейчас самое время начать подготовку к праздничному сезону, чтобы отправить клиентам потрясающие рождественские рассылки. Почему именно сейчас? По результатам исследований, 43% подарков к этому волшебному празднику покупают уже в ноябре. Интересная статистика о Рождестве и поведении покупателей: 56% покупателей планируют делать покупки онлайн. 73% всех покупателей используют для поиска идеальных подарков свои смартфоны и...

Дизайн Маркетинг Шаблоны
11 ноября · 11 мин читать
Идеи дизайна рассылок ко Дню Благодарения

Как сделать письмо ко Дню Благодарения и убедить получателей открыть его? Здесь вы найдете ответы на эти вопросы. С этим шаблоном вы создадите праздничную рассылку быстрее Использовать Идеи дизайна ко Дню Благодарения Принято считать, что письмо с простым дизайном может быть эффективным, если в нем есть какое-то супер-сообщение или гипер-щедрое предложение. Но за неделю или пару недель до Дня Благодарения папки «Входящие» у ваших клиентов будут переполнены письмами от конкурентов, чьи предложения и сообщения могут быть не хуже, чем у вас. Поэтому...

Дизайн Маркетинг Шаблоны
Будьте всегда в курсе последних новостей в области email-маркетинга!