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

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

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

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

Веб-шрифты

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

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

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

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

Вот безопасные веб-шрифты, которые лучше всего поддерживаются на устройствах Windows и Mac:

Веб-шрифты

Эти гарнитуры доступны не во всех операционных системах.

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

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

Полное руководство по веб-шрифтам можно найти в нашем полном руководстве по веб-шрифтам.

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

Стиль шрифта

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

Полное руководство по доступности электронной почты Откройте для себя идеи и пошаговые советы, необходимые для написания, дизайна и кодирования электронных писем, которые могут понравиться любому, независимо от его способностей. ПОЛУЧИТЕ РУКОВОДСТВО

Жирный

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

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

Тег <b> жирным шрифтом не является семантическим и не выделяет выбранное вами слово (а) для пользователя программы чтения с экрана. Поэтому, чтобы повторить опыт, получаемый вашими зрячими пользователями, всегда используйте тег <strong>.

<p>Be <strong> bold </strong> ,<br />be <strong>brave</strong></p>

Курсив

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

Как и в случае с полужирным шрифтом, есть несколько способов кодирования текста, выделенного курсивом. Однако именно тег <em> является WCAG-совместимым (а не тегом <i>) и может дать программам чтения с экрана указание на то, как что-то следует понимать.

<p>I love funny English words like <em> gubbins </em> and <em>gnarly</em>.</p>

Зачеркнутый

Применение этого стиля может привлечь внимание к снижению цен или обновлению информации.

Однако он не отображается в почтовых клиентах единообразно.

HTML-тег <strike> не поддерживается Hey и лишь частично поддерживается приложениями Gmail. И решение этого стиля с помощью сквозной линии CSS также имеет ограниченную поддержку, поскольку некоторые почтовые клиенты делают линию настолько тонкой, что ее довольно трудно увидеть.

Также стоит отметить, что у этого стиля есть проблема с доступностью, поскольку программы чтения с экрана не выделяют слово зачеркиванием, что может негативно повлиять на работу тех, кто полагается на вспомогательные технологии. Добавление контекста перед каждой суммой, например «было» и «сейчас», сделает этот опыт ценным для всех.

Лучший способ закодировать зачеркивание - использовать HTML-тег <strike>, например:

<p>Was<br /><span> <strike> $200 </strike> </span></p>

Верхний регистр

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

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

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

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

<p>We need to shout about this <br /><span>big win</span></p>

Межбуквенное расстояние

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

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

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

Поддержка хороша для всех почтовых клиентов, только Outlook предлагает частичную поддержку. Чтобы добавить интервал между буквами, вы хотите применить стиль с помощью CSS:

<p style=”font-family:'Helvetica Neue',Helvetica,sans-serif; font-size:18px; line-height:28px; color:#0C4B6A; text-transform:uppercase; letter-spacing: 2px ;”>A little letter spacing helps readability</p>

Выравнивание текста

Есть пара явных запретов на выравнивание текста.

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

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

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

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

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

<p style=”font-family:Helvetica Neue,Helvetica,sans-serif; font-size:18px; line-height:28px; color:#0C4B6A; text-align:left ;”>I am left aligned</p>

Цвет

При работе с цветом следует помнить о контрасте.

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

Чтобы глубже погрузиться в создание, проектирование и кодирование доступного контента для электронной почты, ознакомьтесь с сеансами Salesforce Trailhead, которые я записал с Марком Роббинсом, инженером-программистом в Salesforce.

Размер

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

Однако есть предел тому, насколько мелким должен быть текст. Все, что меньше 14 пикселей, становится трудным для чтения, и функция автоматической корректировки текста iOS Apple Mail сработает и увеличит ваш текст.

В Litmus мы редко отклоняемся ниже 18 пикселей. Если мы это сделаем, мы ограничимся третичной информацией, такой как оговорки, сноски и нижний колонтитул. Это позволяет преобладать первичному контенту.

Высота линии

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

Для этого высота строки должна быть в 1,5–2 раза больше размера текста. Например, размер шрифта 20 пикселей должен иметь высоту строки 30-40 пикселей.

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

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

Помогите подписчикам идентифицировать ваш бренд

Прежде всего, вы можете применять фирменные шрифты, чтобы помочь подписчикам идентифицировать ваш бренд, когда они открывают вашу электронную почту. Некоторые шрифты очень различимы даже вне контекста. Вспомните Уолта Диснея и Coca-Cola.

Различайте типы общения

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

Поднимите индивидуальность бренда

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

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

Создать иерархию

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

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

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

Позвольте мне объяснить вам это на следующем примере:

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

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

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

Бренды проявляют творческий подход с помощью типографики электронной почты

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

ВЛАЖНЫЙ

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

Шрифты используются: Helvetica Neue с Arial запасной вариант, и система засечек Times New Roman.

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

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

Готовый Mag

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

Используемые шрифты : системные шрифты Apple, относящиеся к Helvetica и Arial.

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

Blurb

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

Используемые шрифты : Futura и Proxima Nova (веб-шрифты), восходящие к Helvetica и Arial.

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

Tripadvisor

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

Используемые шрифты : Arial.

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

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

Тэттли

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

Используемые шрифты : Open Sans (веб-шрифт), возвращающийся к Helvetica и Arial.

Типография обычно основана на изображениях, а не на живом тексте.

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

Хотя живой текст - лучший способ сделать ваши электронные письма доступными и читаемыми, есть способ сделать области героев на основе изображений ценными для более широкой аудитории, заключив изображение главного героя в тег H1 и добавив текст изображения в тег ALT, нравится:

<h1 style=”Helvetica Neue,Helvetica,sans-serif; font-size:50px; line-height:75px; color:#262524;”><img src=”hero.png” alt=”Image based hero messaging - there is a way!”></h1>

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

«Помещение изображения в тег H1 является допустимым семантическим кодом и будет включено в контекстные меню заголовков программы чтения с экрана. Однако важно отметить, что текст ALT не может быть прочитан всеми инструментами чтения текста ». - Марк Роббинс, инженер-программист, Salesforce

Типографика для электронной почты - отличный выбор

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

Помните об этом руководстве и расскажите, как вы используете типографику в своих письмах. Я бы хотел их увидеть!

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