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

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

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

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

Ознакомиться

 

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

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

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

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

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

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

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

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

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

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

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

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

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

Шрифты 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

Печатный шрифт sans-serif, один из самых применяемых шрифтов, имеет закругленные буквы и широкие прописные буквы. Разработан в 1957 году.

3. Шрифт для писем Times New Roman

Этот безупречный шрифт имеет высокие строчные буквы, слегка уплотненные, короткие нисходящие и восходящие. Создан по заказу газеты "The Times" в 1931 году. Это один из любимых шрифтов из семейства sans serifs у многих интернет-пользователей и веб-дизайнеров.

4. Шрифт для писем Verdana

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

5. Шрифт для писем Courier / Courier New

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

6. Шрифт для писем Tahoma

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

7. Шрифт для писем Georgia

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

8. Шрифт для писем Palatino

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

9. Шрифт для писем Trebuchet MS

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

10. Шрифт для писем Geneva

Это обновленная версия Helvetica. Его главное отличие — наличие базового набора лигатур.

Эти шрифты считаются самыми читаемыми современными шрифтами и одними из лучших современных шрифтов для использования в email-дизайне.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ссылки

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

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

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

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

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

Кнопки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Использование декоративных шрифтов для баннера в 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-скрипты без навыков программирования.

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

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

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

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

• чтобы пользователи, которые очень заняты и проверяют почту во время вождения или приготовления еды, могли попросить 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 невозможно различить.

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