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

Я создала шаблон электронной почты в редакторе Stripo с тем же текстом и размером 18 пикселей для каждого шрифта. В редакторе электронного письма Stripo нет Palatino и Geneva, но есть специальные шрифты, такие как Roboto и Open Sans, которых по умолчанию нет для большинства ОС, и лучше определить резервный шрифт, если вы их используете.

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

Как вы можете видеть, Georgia и Times New Roman слишком узкие. Courier New является широким, но, возможно, даже слишком широким для электронного письма. Arial легче чем Helvetica. Невозможно рассказать о шрифтах Verdana и Tahoma. Georgia и Verdana выглядят плохо при печати. Что касается меня, я предпочла бы выбрать последние два шрифта для своих . Какой из них вы предпочитаете? Не стесняйтесь оставлять комментарии и делиться этой статьей.

Сегодня мы поговорим о такой важной теме в письмах, как шрифты:

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

Как выбирать шрифты для email рассылок?

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

При выборе шрифтов для писем соблюдайте правила:

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

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

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

Подбирайте шрифт, который дополнит личность вашего сообщения, подчеркнёт корпоративный стиль и т.д. Странно писать о серьёзных вещах используя Comic Sans, но если вы с клиентами достаточно близки - почему бы и нет? Comic Sans - это один из шрифтов, который часто поддаётся критике. Если вам очень нравится этот шрифт - не нужно делать всё письмо в этом стиле. Выделяйте заголовки или отдельные элементы. Но в то же время слишком много шрифтов в вашем письме сделают письмо трудночитаемым и его будет сложно визуально воспринимать вашим читателям.

Избегайте обилия различных шрифтов и сочетаний, которые не подходят по стилю (например: Arial и Comic Sans).

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

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

Применение элементов стиля в письмах

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

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

Курсив «осторожно» привлекает внимание к вашим словам. Это хороший выбор для выделения одного слова или короткой фразы в пункте, разграничения подзаголовков, собственных имён или каких-то названий. Курсив может быть трудночитаем на экране компьютера, так что лучше ограничить использование курсива до отдельных слов и коротких фраз.

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

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

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

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

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

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

А в таком формате вообще непонятно зачем столько красок. Хоть я и подписалась, но это письмо у меня падает в спам, возможно, в том числе и благодаря такой насыщенности и пёстрости. Избегайте контрастных ярких цветов: синего , красного , желтого и т. д.), а особенно, если письмо состоит только из них.

• Высота шрифта и отступы не менее важны для комфортного чтения. Основной шрифт делайте не менее 12 рх, с учётом того, что . Более 16 рх всё письмо тоже лучше не делать - это удлинит письмо и читать письмо тоже будет не удобно.

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

Первоначально веб-шрифты были разработаны для сайтов и приложений. Сейчас эти шрифты могут использоваться на вашем веб-сайте.

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

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

Разница между гарнитурой и шрифтом

Некоторые люди путают гарнитуру и шрифты, они могут даже думать, что это одно и то же.

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

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

По этой причине Arial в 10 точках отличался от Bold Arial в 12 точках, например.

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

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

Краткий обзор семейств шрифтов

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

Шрифты семейства Serif

У шрифтов Serif есть маленькие засечки. Они помогают легко читать печатные документы. Вот почему эти шрифты используются, например, для книг.

Шрифты San Serif

Шрифты San Serif не имеют никаких дополнительных элементов. San Serif легко читаются на экранах. Arial, Verdana и Helvetica – самые популярные шрифты этого семейства.

Необычные шрифты

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

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

Моноширинные шрифты

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

Курсивные шрифты

Этот тип шрифта может быть в любом формате письма. Буквы соединены вместе, как и рукописные.

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

Сколько разных шрифтов использовать в письмах?

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

С точки зрения дизайна, нужно выделить заголовок и остальной контент.

Вы можете комбинировать шрифты serif и san serif, например.

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

Будьте осторожны при использовании цветов

Цвета могут иметь огромное влияние.

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

Выберите правильный размер и цвета шрифта

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

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

Выравнивание текста в электронном письме

Вы можете разместить текст посередине, справа или слева.

Для лучшей читаемости лучше выравнивать текст по левому краю. Текст с выравниванием по центру и по правому краю сложнее читать.

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

Это письмо от EE простое и понятное. Текст располагается слева, и его просто читать.

Межстрочный интервал имеет большое значение

Для разных шрифтов требуется разный интервал между строк. Используйте размер в 1,4 - 1,5 раза больше высоты строки, чтобы обеспечить отличную читаемость.

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

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

Используйте белое пространство

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

Waitrose использует пробелы, чтобы привлечь внимание читателя. Только черный цвет и 3 шрифта. Просто и блестяще.

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

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

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

Краткое руководство по веб-шрифтам

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

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

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

Но есть некоторые проблемы.

Различные почтовые клиенты, такие как Outlook, Windows или Apple, используют разные настройки по умолчанию. Это означает, что если вы используете необычные буквы, то получатель может их и не увидеть. Они не будут отображаться.

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

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

Почтовые клиенты, которые поддерживают веб-шрифты:

• Android-приложение для Android
• Apple Mail
• Почта IOS
• Outlook 2000
• Outlook. com приложение
• AOL Mail

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

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

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

Веб-безопасные шрифты - это шрифты электронной почты по умолчанию.

Arial, Courier, Georgia, Helvetica, Tahoma, Times New Roman, Trebuchet, Verdana – это шрифты электронной почты по умолчанию. Они безопасны, потому что они установлены практически на каждом устройстве.

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

Times New Romans

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

Verdana – воздушный, легко читаемый шрифт.

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

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

Настройки шрифта по умолчанию электронной почты

В это время Gmail использует Arial, а Chrome не поддерживает Arial, он меняется на Helvetica. В Apple Mail используется Helvetica.

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

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

Каков наилучший размер шрифта?

Исследование Bloomsberg показывает, что Helvetica и Arial плохо подходят для электронных писем.

Наиболее распространенными шрифтами для писем являются Time News Roman, Verdana, Arial и Tahoma. Их можно использовать для любых целей.

Размер зависит от шрифта. Заголовки должны быть от 22 до 28 пикселей, а размер текста должен составлять около 14-18 пикселей.

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

Используйте стандартные шрифты для корпоративной электронной почты.

Используйте Verdana, она классная и скромная. Размер 12 был бы просто идеальным.

Советы по использованию шрифтов электронной почты

Будьте последовательными

Используйте те же шрифты и размер во всех рассылках. Было бы смешно, если бы одно письом пришло, набранное Comic, тогда как другое - в Times New Roman.

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

Не используйте слишком маленькие шрифты

Это важно, если вы думаете о мобильных пользователях. Отзывчивый дизайн всегда должен быть в приоритете. Мобильные пользователи не могут читать очень маленькие символы. Рекомендуемый размер составляет не менее 14 пикселей.

Исследования, проведенные Litmus, показали, что 54% сообщений электронной почты читают на мобильных устройствах. Это хорошая причина обратить внимание на эту деталь, не так ли?

Слишком большие шрифты не подходят

Они просто кричат пользователю в лицо. Это большой минус.

Однако, если ваша ЦА – пожилые люди, то убедитесь, что они смогут читать вашу электронную почту даже без очков.

Не берите индивидуальные шрифты, которые никто кроме вас не использует

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

Несоответствующие шрифты

Опять же, если вы отправляете электронную почту бизнес-партнерам, используйте серьезные шрифты. Наиболее распространенными шрифтами электронной почты для бизнеса являются Times New Roman, Helvetica, Arial.

Правильно выбранный шрифт для электронного письма – это уже половина успеха в вашей рекламной кампании. Дело за малым – написать потрясающий текст и дополнить его дизайном.

Можно только если использовать реальный текст в HTML-версиях писем.

При этом, данный факт вовсе не означает, что можно использовать только Arial и Times New Roman. В сегодняшнем материале мы рассмотрим существующие возможности по работе с шрифтами в email.

Основы типографики

Здесь какой-то текст.
К ячейкам можно применять CSS-стили, описывающие цвет текста (color), используемый шрифт (font-family), его вес (font-weight) и высоту строки (line-height).

Some copy goes here.
Если объявить эти стили, то текст будет адекватно рендериться даже в самых «враждебных» почтовых клиентах. Если хранить каждую часть контента в своей ячейке, то эти компоненты можно стилизовать без необходимости заботиться о проблемах наследования. Если, например, нужно поработать с конкретным участком текста в большом блоке, то этот нужный текст можно завернуть в и использовать инлайн-стили:

Здесь какой-то текст. Привлекаем внимание к контенту с помощью стилей шрифта
В примерах выше мы использовали Arial (да-да), но ничто не мешает пойти дальше. Давайте посмотрим, как это можно сделать.

Использование веб-шрифтов

Существует несколько способов включения веб-шрифтов, но Пол рекомендует использовать внешний файл со стилями, который используется для «вытягивания» шрифтов с сайтов вроде Google Web Fonts.

Затем в инлайн-стилях можно добавить нужный шрифт в декларацию font-family:

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

Здест какой-то текст.
Теперь вместо Times New Roman по-умолчанию письма будут отображаться с помощью Arial или другого установленного шрифта без засечек.

Многоколоночный вид без табличных ячеек

Здесь на помощь приходит CSS-свойство column-count. Но важно помнить: с этого момента мы вступаем на дикие земли, в которых редко можно встретить приложение, поддерживающее column-count.

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

Здесь какой-то текст.
Теперь вне зависимости от объёма текста, он будет естественным образом разбит между двумя столбцами. В том случае, если почтовая программа, в которой открывается письмо, не поддерживает column-count, сообщение отобразится в одноколоночном виде.

Как сказано выше, с поддержкой как раз все не очень хорошо:

Иногда с помощью различных лайфхаков (например, применение стилей к тегу параграфа) удается заставить отображать письма с column-count и некоторые другие клиенты. В частности, в ходе тестов Полу удалось добиться этого, например, в Outlook.com в Firefox.