23 октября 2020
29814
21 мин
3.54
Какие шрифты использовать для email-рассылки
Придумать письмо – это только первый этап, нужно еще его качественно оформить. Ранее мы рассказывали о трендах в дизайне email-рассылок. Сегодня поговорим о шрифте для письма. Правильно подобранный шрифт, который гармонирует с общим дизайном сообщения, позволяет подписчику легко «сканировать» текст, следовательно, вы быстрее получите его отклик. Отображение шрифтов для получателей во многом зависит от возможностей устройства, на котором открывают сообщение.
Популярные шрифты для письма
Для начала нужно оговорить классы шрифтов:
- антиква (serif) – символы имеют точки, завитки, засечки на концах;
- гротеск (sans serif) – строгие прямые линии, без дополнений.
Давайте познакомимся с “безопасными” шрифтами – они правильно отображаются всеми почтовыми клиентами:
- Times New Roman – антиква, был создан для великобританской газеты The Times. Шрифт занимает мало места и удобен для чтения, самый используемый в мире для официально-делового стиля. Возможно, из-за официальности его редко применяют в email-маркетинге.
- Helvetica – неогротеск, широко распространен в Европе и США, в 2001 году в нем увеличено количество символов до 1866. Любимый шрифт многих дизайнеров, он нейтрален относительно других, но в нем недостаточное расстояние между глифами (элементы шрифта), поэтому текст смотрится сбитым.
- Arial – гротеск, практически копирует Helvetica, наиболее распространен в мире. Это системный шрифт операционных систем Windows и MacOS, в то время как Helvetica предустановлена только на MacOS. При этом Arial легче, чем Helvetica.
Почтовый сервис Apple Mail использует по умолчанию Helvetica, а Gmail — Arial, если браузер его не поддерживает – переходит на Helvetica. По данным Litmus Email Analytics, Apple Mail использует 11% аудитории по всему миру, а Gmail – 27%.
В Arial и Helvetica символы имеют аналогичные элементы, которые отражены по вертикали или горизонтали. Поэтому некоторые буквы трудно отличить, например: b и d, p и q, – это замедляет чтение. Альтернативные варианты, которыми можно заменить эти шрифты: Georgia и Verdana. - Georgia – в стиле переходной антиквы. Шрифт с красивым курсивным полужирным начертанием и короткими засечками на концах символов. Отличительная черта – прыгающие цифры. Этот шрифт универсальный вариант: его используют как в официально-деловом стиле, так и в веб-дизайне.
- Verdana – гротеск, разрабатывался специально для Microsoft с целью улучшить читаемость текста на экранах с низким расширением. Шрифт с достаточным просветом внутри символов, буквы открытой формы.
- Tahoma – гротеск, очень похож на Verdana, но с полужирным начертанием. Имеет зауженные символы и узкий апрош (расстояние между глифами).
- Trebuchet MS – гротеск, разрабатывался под те же требования, что и Verdana, но с незначительными изменениями символов: добавление/исключение некоторых деталей.
- Courier – антиква, каждый знак имеет одинаковую ширину (моноширинный). Похож на шрифт печатной машинки, использовался во всех отраслях печатной промышленности, например, Госдепартаментом США вплоть до 2004 года (после заменен на Times New Roman). Courier New с более выраженными точками и запятыми. Этот шрифт, не очень подходит для email-рассылок, т.к. слишком широкий.
- Palatino – антиква, создан для печати и прессы, основан на почерках итальянских мастеров эпохи Ренессанс. Символы близки к каллиграфическим.
- Geneva – гротеск, редизайн Helvetica с дополнением базового набора лигатур.
- Lucida Sans – гротеск, первый юникод-шрифт. Не рекомендуем использовать его для отображения текста кириллицей, т.к. эта версия достаточно слабая.
Эти шрифты можно считать лучшими для рассылок, так как они безопасные и удобочитаемые. Но можно создать свой личный шрифт, который будет даже привлекательнее самых популярных шрифтов! Кастомные шрифты нужны для создания индивидуального стиля конкретного бренда, это то, чего вы больше нигде не встретите. Собственные шрифты помогают выделиться среди конкурентов и выстроить устойчивые ассоциации с брендом у пользователя.
Кастомные шрифты используют такие компании, как: Apple, Nokia, IBM, BBC, Netflix и т.д. До недавнего времени нельзя было использовать собственные шрифты в email-рассылке. Теперь, в редакторе писем eSputnik появилась возможность добавления кастомного шрифта из других источников.
Как выбрать и использовать шрифты для email-рассылки
Какой шрифт выбрать для писем антиква или гротеск – здесь мнения категорически расходятся. Помните, что текст без засечек считается более удобным для чтения, если его открывают с десктопной версии. Но, например, Serif с засечками легко читается на экране мобильного устройства и может выглядеть интереснее, чем некоторые гротескные. Перечислим, на что следует обратить внимание при выборе шрифтов и работе с ними:
- Используйте разные виды шрифтов для письма. Но помните, что нагромождение большого количества шрифтов в одном email может сделать текст беспорядочным, поэтому ограничьтесь двумя-тремя, которые органично дополняют друг друга: например, один – для заголовка, второй – для всего текста, третий – декоративный для выделения важных деталей на баннере. Избегайте сочетаний, которые не подходят по стилю (например: Arial и Comic Sans).
- Подобрать красивый шрифт для письма – это только полдела, обязательно проверьте шрифт на все необходимые вам начертания и глифы. Т.к. не все могут содержать необходимые символы. Чтобы не использовать их из других шрифтов, лучше сразу выбрать подходящий.
- Декоративные шрифты лучше использовать только в отдельных элементах и в небольшом количестве. Они плохо читаемы в длинных текстах, и не факт, что правильно отобразятся у пользователя. Если уж сильно хочется добавить в письмо что-то такое-эдакое – используйте безопасные антиква шрифты для рассылки, которые мы описали выше. А для остальных, с засечками, – рекомендуем перестраховаться и прописать в коде письма, какой шрифт (из безопасных) использовать почтовому клиенту, если он не может отобразить выбранный вами вариант.
- Выберите такой шрифт письма, который будет органически дополнять сообщение и подчеркнет корпоративный стиль. Странно писать о серьезных вещах используя Comic Sans, но если вы с клиентами достаточно близки – почему бы и нет? Comic Sans – это один из шрифтов, который часто поддается критике. Если вам очень нравится этот шрифт – не нужно делать всё письмо в этом стиле. Выделяйте заголовки или отдельные элементы.
- Ссылки оформляйте тем же шрифтом, что и весь текст письма – не используйте “голые” ссылки только с анкорами. Выбирайте подходящие по тексту и смыслу словосочетания, прочитав которые пользователь сразу поймет, куда ведет ссылка. Не используйте для анкоров общие слова “здесь” или “ссылка”.
- В оформлении посадочной страницы используйте те же шрифты, что и в письмах. Так пользователь запомнит стиль и сможет быстро идентифицировать бренд.
- Для кнопок подойдут шрифты Georgia и Verdana.
- Если вы используете кастомные шрифты, обязательно делайте предварительную рассылку на разные устройства, чтобы убедиться, что шрифт отображается у всех почтовых клиентов. В коде письма указывайте запасной шрифт. Это нужно делать для каждого текстового блока через свойство font-family. К примеру, font-family: Georgia, Verdana, Serif – это значит, что сообщение отобразится шрифтом Georgia, если его нет, то Verdana, если и его нет, то любым системным с засечками.
- Большинство почтовиков используют HTML для отображения писем, поэтому необходимо следить, чтобы использовались правильные коды для шрифта и стиля. Зачастую безопасные шрифты уже прописаны в верстке CSS, но мы напомним несколько кодов:
- жирный шрифт:
<strong> </strong>
или
<b> </b>
- точечный список:
<ul> <li>первый пункт</li> <li>второй пункт</li> <li>третий пункт</li> </ul>
- курсив:
<i> </i>
или
<em> <em>
- добавление мелкого текста тем же шрифтом
<small> </small>
- абзац:
<p> </p>
Добавление кастомных шрифтов
Применение элементов стиля в письмах
Какие шрифты использовать для email рассылки мы уже разобрались, а теперь перейдем к отдельным элементам. Изменение стиля шрифтов придаст вашему письму определенный шарм и выгодно подчеркнет главную мысль в тексте. Самые полезные элементы стиля и их наиболее подходящие области применения включают:
- Жирный текст выделяет важные фразы и создает контраст в тексте. Большинство редакторов позволяют изменять текст жирным шрифтом, не добавляя HTML-теги. Этот стиль чаще всего используется для заголовков, подписей, отдельных слов или фраз, важных предложений.
- Курсив «осторожно» привлекает внимание к вашим словам. Это хороший выбор для выделения одного слова или короткой фразы в пункте, разграничения подзаголовков, собственных имён или каких-то названий. Курсив может быть трудночитаем на экране компьютера, так что лучше ограничить использование курсива до отдельных слов и коротких фраз.
Избегайте чрезмерного использования выделений жирным шрифтом или курсивом – текст будет сложно читать и пользователь просто закроет письмо.
- Подчеркнутый текст читатели могут принять за гиперссылки. Рекомендуем избегать подчеркиваний, т.к. это создает трудности для читателей с дислексией
- Изменение размера текста. Делает текст более удобным для чтения на экране компьютера. Вы можете использовать различные размеры для заголовков и подзаголовков, чтобы привлечь внимание, или наоборот — сделать отдельный блок менее заметным. На примере ниже шрифт для подписи с меньшим кеглем, но на значимость блока это не повлияло. Он попросту не привлекает лишнего внимания и читатель дойдет до него в порядке очереди.
- Цветной шрифт может как улучшить, так и испортить впечатление от внешнего вида вашего письма. Использование темного текста и светлого фона — наиболее приемлемый вариант, но не наоборот. Убедитесь, что цвет шрифта и цвет фона достаточно контрастны.
А в таком формате вообще непонятно, зачем столько красок. Хоть я и подписалась, но это письмо читать невозможно, в том числе и благодаря такой насыщенности и пестрости. Избегайте ярких контрастных цветов: синего, красного, желтого и т. д.), а особенно, если письмо состоит только из них.
- Высота шрифта и отступы не менее важны для комфортного чтения. Основной шрифт делайте не менее 12 рх, с учётом того, что ваши письма могут читать на мобильных устройствах. Больше 16 рх все письмо тоже лучше не делать – это удлинит сообщение и читать его тоже будет неудобно.
- Межстрочный интервал можно использовать от 1,5 до 2 – важно, чтобы текст не слипался между собой, но и растягивать его тоже не стоит.
К выводам
Определить лучший шрифт для электронных писем нельзя, это зависит только от вашей фантазии и возможностей почтовиков. Самые простые рекомендации:
- выбирайте те шрифты, которые будут хорошо смотреться вместе и отражать общий стиль компании;
- максимальное количество шрифтов в одном email – 3 (заголовок, текст, декоративные шрифты для выделения важных деталей);
- проверяйте выбранный шрифт на все нужные глифы;
- прописывайте запасные шрифты;
- предварительно тестируйте рассылку.
Теперь вы знаете, как выбрать шрифт для рассылки, а функционал eSputnik поможет внедрить даже самые смелые решения дизайна и шрифтов качественно, быстро, без дополнительных интеграций и привлечения верстальщиков и программистов!