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

Опубликовано: 2021-08-18

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

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

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

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

Что такое веб-шрифты?

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

  • Веб-безопасные шрифты: эти шрифты, скорее всего, можно найти во всех основных операционных системах и поставщиках электронной почты, включая Arial, Verdana, Georgia, Times New Roman и Courier. Бренды продолжают использовать их, потому что они классические и будут правильно отображаться во всех сферах.

  • Веб-шрифты. Веб-шрифты, специально разработанные и лицензированные для веб-сайтов, по умолчанию доступны не на всех устройствах и в операционных системах. Веб-шрифты включают Roboto и Open Sans.

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

Почему важны шрифты, поддерживаемые электронной почтой?

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

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

Где найти веб-шрифты?

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

  • Google шрифты

  • Typekit от Adobe

  • MyFonts

  • Коммерческий Тип

  • Шрифт Spring

  • Магазин шрифтов

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

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

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

  • Почта iOS

  • Apple Mail

  • Android (почтовый клиент по умолчанию)

  • Outlook 2000

  • Outlook.com

  • Thunderbird

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

  • Gmail: Arial

  • Apple Mail: Helvetica

  • Microsoft Outlook: Calibri

Как выбрать правильные веб-шрифты для вашей почтовой кампании

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

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

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

1. Выберите правильный основной шрифт.

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

В то время как Arial и Helvetica когда-то были популярным выбором, такие буквы, как p, b, q и d, выглядят слишком единообразно, и их труднее различить. При использовании шрифта с засечками добавляются дополнительные штрихи, чтобы придать буквам больше характера. Поскольку электронные письма необходимо сканировать, широкие буквы с одинаковым интервалом помогают подписчикам читать быстрее.

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

Источник: W3Schools

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

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

Источник: действительно хорошие электронные письма

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

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

Источник: действительно хорошие электронные письма

2. Используйте стилизованный заголовок с парным основным шрифтом.

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

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

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

Источник: действительно хорошие электронные письма

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

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

Tattly отлично справляется с объединением двух разных шрифтов, при этом соблюдая стандарты своего бренда.

Источник: действительно хорошие электронные письма

3. Создайте согласованную структуру шрифтов.

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

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

  • Интервал: особенно между заголовком и основным текстом, убедитесь, что у вас есть широкая высота строки от 22 до 24 пикселей. Слишком узкие пространства могут снизить удобочитаемость и вовлеченность.

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

  • Цвета: используйте только три цвета, которые соответствуют стандартам вашего бренда: один цвет для заголовка, один для основного текста и последний для ссылок.

Заворачивать

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

  • Создание резервных наборов шрифтов

  • Используйте стиль шрифта с засечками

  • Соедините текст заголовка с основным текстом

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

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