Вы все слышали мои жалобы на то, что поддержка по электронной почте не улучшилась за эти годы, поэтому я не буду тратить (слишком много) времени на нытье по этому поводу. Мне просто хотелось бы, чтобы один крупный почтовый клиент (приложение или браузер) выделился из пакета и попытался полностью поддерживать последние версии HTML и CSS. Я не сомневаюсь, что компании тратят десятки миллионов долларов на совершенствование своих электронных писем.

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

Использование пользовательских шрифтов в электронной почте

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

60% почтовых клиентов теперь поддерживают пользовательские шрифты, используемые в дизайне вашей электронной почты, включая AOL Mail, собственное почтовое приложение Android (не Gmail), Apple Mail, iOS Mail, Outlook 200, Outlook.com и Safari Email.

Уплер

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

  1. Выберите внешний шрифт: выберите внешний шрифт, который вы хотите использовать. Это может быть такой сервис, как Google Fonts, или шрифт, размещенный на вашем веб-сервере.
  2. Включите шрифт в HTML вашего электронного письма.: Для почтовых клиентов, которые это поддерживают, вы будете ссылаться на внешний шрифт. <head> HTML вашего электронного письма. Однако многие почтовые клиенты не позволяют ссылаться на внешние ресурсы по соображениям безопасности. Вместо этого вы можете включить шрифт в качестве ссылки в надежде, что клиенты веб-почты, разрешающие внешние ссылки, отобразят его.
  3. Укажите шрифты отступов: выберите резервные веб-шрифты, похожие на ваш внешний шрифт. Это должны быть общие семейства шрифтов, которые предварительно установлены на большинстве устройств и операционных систем.
  4. Используйте встроенный CSS для определений стилей.: поскольку многие почтовые клиенты имеют ограниченную поддержку CSS, лучше всего использовать встроенный CSS для определения собственных стилей, включая семейства шрифтов.
ЧИТАТЬ  Что такое ИИ в SEO?

Пример:

Допустим, вы хотите использовать внешний шрифт. Открыть Санс из Google Fonts с использованием Arial и без засечек в качестве запасных вариантов. Вот как вы можете это попробовать:

<!DOCTYPE html>
<html>
<head>
  <title>Email with External Font</title>
  <!-- Attempt to include external font - not supported by all email clients -->
  <link href=" rel="stylesheet">
</head>
<body>
  <div style="font-family: 'Open Sans', Arial, sans-serif; font-size: 16px;">
    Hello, this is a sample text using Open Sans, with Arial and sans-serif as fallbacks.
  </div>
</body>
</html>

Важные соображения:

  • Поддержка клиентов по электронной почте: Многие почтовые клиенты, особенно настольные, такие как Microsoft Outlook, не поддерживают внешние шрифты. Веб-клиенты, такие как Gmail, имеют лучшую поддержку, но все же имеют ограничения.
  • Шрифты отступов: это очень важно для того, чтобы ваша электронная почта оставалась функциональной и эстетически привлекательной для всех клиентов. Последовательность в разделе font-family стиль меняется от наиболее подходящего шрифта к самому маленькому, заканчиваясь общим семейством (sans-serif или serif).
  • Тестирование: Всегда проверяйте свои электронные письма в формате HTML в разных почтовых клиентах, чтобы увидеть, как они отображаются. В этом могут помочь такие инструменты, как Litmus или Email on Acid.

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

В электронном письме используется 4 типа шрифтов.

  • с засечками – Шрифты с засечками содержат символы с завитушками, точками и фигурами на концах штрихов. Они имеют формальный вид, хорошо расположенные символы и межстрочный интервал, что значительно улучшает читабельность. Самые популярные шрифты в этой категории — Times, Georgia и MS Serif.
  • Без засечек – Шрифты без засечек похожи на бунтовщиков, которые хотят произвести впечатление самостоятельно, без каких-либо причудливых украшений. Они имеют полуформальный вид, который ставит практичность выше внешнего вида. Самыми популярными шрифтами в этой категории являются Arial, Tahoma, Trebuchet MS, Open Sans, Roboto и Verdana.
  • монограмма — Эти шрифты, вдохновленные шрифтом пишущей машинки, имеют блок или «табличку» в конце символов. Хотя они редко используются в электронной почте в формате HTML, в большинстве «резервных» электронных писем с открытым текстом в электронных письмах MultiMIME эти шрифты используются. Чтение электронной почты с использованием этих шрифтов создает ощущение административности, связанное с правительственными документами. Courier — наиболее часто используемый шрифт в этой категории.
  • Каллиграфия – Имитируя рукописные буквы прошлого, эти шрифты отличаются плавным движением, которому следует каждый символ. Эти шрифты довольно интересно читать на материальных носителях, но чтение их на цифровом экране может быть довольно громоздким и утомительным. Поэтому такие шрифты чаще всего используются в заголовках или логотипах в качестве статических изображений.
ЧИТАТЬ  Новая печь для пиццы Arc от Gozney хочет испечь для вас кусочек, от которого вы не сможете отказаться ??

Шрифты, безопасные для электронной почты, включают Arial, Georgia, Helvetica, Lucida, Tahoma, Times, Trebuchet и Verdana. Пользовательские шрифты включают довольно много семейств, и клиентам, которые их не поддерживают, необходимо создавать резервные шрифты. Таким образом, если клиент не может поддерживать пользовательский шрифт, он будет использовать шрифт, который может поддерживать.

Ариал

font-family: Arial, sans-serif;

Грузия

font-family: Georgia, serif;

Гельветика

font-family: Helvetica, sans-serif;

Люцида

font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;

Тахома

font-family: Tahoma, Geneva, sans-serif;

раз

font-family: 'Times New Roman', Times, serif;

Требюшет

font-family: 'Trebuchet MS', sans-serif;

Вердана

font-family: Verdana, Geneva, sans-serif;

Для более подробной информации обязательно ознакомьтесь со статьей Omnisend:

Шрифты, безопасные для электронной почты, и пользовательские шрифты: что о них нужно знать

Обязательно нажмите, если хотите взаимодействовать с инфографикой.

Source