Регистрация: 29.07.2014
Сообщений: 474
|
Как выбрать шрифт для создания email-сообщения
|
Email-дизайнеры создают удивительные письма с помощью правильных email шрифтов. Иногда они заимствуют веб-шрифты, которые используют веб-разработчики. Этот метод позволяет использовать технологии и творческое оформление текста одновременно. Первоначально веб-шрифты были разработаны для веб-сайтов и приложений. Эти шрифты можно использовать для того чтобы легко передать стиль бренда на сайте.
Email-дизайнерам не так повезло. Они ограничены числом шрифтов, которые работают должным образом во всех почтовых программах. Но они поняли, что веб-шрифты могут помочь им. Таким образом, они могут сохранять единообразный фирменный стиль. Несмотря на то, что веб-шрифты могут улучшить дизайн электронного письма, они также могут саботировать ваши усилия. Использование лучших email-шрифтов может потребовать навыков кодирования. И, если не обращать внимание на детали, можно упустить возможность передать свое сообщение наиболее эффективным способом.
Вы всегда должны рассматривать контент в качестве приоритета к дизайну письма. Убедитесь, что дизайн не портит его.
Правильная типография поможет создать красивые письма
Если вы не дизайнер, то термин «типография» может звучать пугающе. Звучит как старомодное выражение. Так оно и есть. В свое время типография была призвана оказывать влияние на эффект от текста. Люди поняли, что можно выражать настроение, тон голоса, даже особенности личности с помощью правильного дизайна. Тот же принцип применяется и к электронным сообщениям. Конечно, вы можете контролировать эмоции через текст письма, но типография поможет усилить эффект.
Разница между typeface и font
Некоторые люди путают typeface и fonts, они могут даже думать, что это одно и то же. Понятие typeface относится к тем временам, когда мы использовали аналоговую печать. Короче говоря, нам нужны были разные металлические блоки для каждой буквы.
Если вы хотите использовать определенный шрифт, но в разных размерах, вам нужны разные «кубики» для печати. Также нужен дополнительный вес, если вы хотите получить жирный шрифт. По этой причине Arial размером 10 отличался от Bold Arial размером 12. Таким образом, «typeface» означал дизайн шрифта, в то время как размер и вес означали «font». Тем не менее, эти термины имеют иные значения в цифровом мире. Под «fonts» понимаются файлы, содержащие все характеристики «typeface». В принципе, это не совершенно разные вещи, одно не может существовать без другого.
Быстрый обзор семейств шрифтов
Основные характеристики этих шрифтов различны и могут быть использованы для нескольких целей. Некоторые из них больше подходят для деловых писем, а другие для забавных.
Шрифты «Serif»
Данные шрифты имеют маленькие «ножки» и «хвосты». Они ведут глаза, чтобы мы могли легко читать печатные тексты. Вот почему эти шрифты используются, например, для книг.
Шрифты «San Serif»
Шрифты категории «San Serif» не имеют каких-либо дополнительных особенностей. На случай, если ваш французский такой же отличный, как и мой, «san» означает «без». Шрифты «San Serifs» легко читать на экранах. Arial, Verdana, и Helvetica являются частью этой семьи.
Шрифты «Fantasy»
Эти шрифты требуют тщательного рассмотрения. Они могут принимать все формы и размеры, что позволяет выразить творчество, но они не подходят для большого числа типов контента. Имейте в виду, эти шрифты не подходят для использования в теле письма. Их очень трудно читать, поэтому используйте их только для заголовков.
Шрифт с фиксированной шириной (Monospaced)
Главная особенность этого шрифта состоит в том, что каждая буква имеет одинаковый горизонтальный размер. Этот тип шрифта по-прежнему используется в текстовых редакторах, поскольку он обеспечивает отличную читаемость.
Курсивные шрифты
Данный шрифт создает ощущение, что текст написан «от руки». Буквы соединены вместе, как будто они были написаны рукой. Подобно шрифтам «fantasy», курсивные шрифты не подходят для написания всего текста письма.
Сколько различных шрифтов использовать в email-сообщении?
Чем меньше, тем лучше. Не используйте более трех разных шрифтов в одном письме. Цель состоит в том, чтобы создать организованный, ясный дизайн электронного письма.
Сочетание шрифтов
С точки зрения дизайна необходимо разграничить заголовок и контент. Можно комбинировать serif и san serif, например, заголовки могут быть в san serif, а тело письма - serif или наоборот. Также можно использовать одинаковый тип шрифта для заголовка и текста, но убедитесь, что размер шрифта заголовка больше, чем тела письма. Его размер должен быть как минимум в два раза больше, чем текста.
Будьте осторожны с цветами
Цвет может оказывать огромное влияние. То же самое происходит, когда получатель прочитал письмо. Придерживайтесь цветов, которые вы уже выбрали для сайта. Помните, каждый цвет имеет различное влияние, поэтому убедитесь, что вы выбирали тот, который подходит бренду больше всего.
Выберите правильный размер шрифта и цвет
Стремитесь к простоте, не используйте более трех размеров шрифта и двух цветов в письме. Кроме того, будьте последовательным, в противном случае электронные письма будут выглядеть перенасыщенными и загроможденными. Этот пример письма показывает, как различные цвета могут привести к визуально действительно плохому опыту. Четыре цвета были использованы с несколькими размерами шрифтов, и это привело к дешевому виду.
Выравнивание текста
Можно выровнять текст посередине, справа или слева. Для лучшей читаемости я бы посоветовал вам использовать левое выравнивание. Текст, выравненный по центру или по правому краю, труднее читать, чем традиционное выравнивание по левому краю. Конечно, можно «поиграть» с выравниванием текста в заголовках или когда вы размещаете определенный текст над изображениями, если нужно, чтобы определенный текст выделялся от остальной части дизайна письма.
Данное письмо от EE простое и ясное. Они выровняли текст по левому краю и, как вы видите, письмо выглядит структурированным.
Интервал между строками имеет большое значение
Разные типы шрифтов требуют различные межстрочные интервалы. Убедитесь, что интервал не слишком маленький и не слишком большой. Используйте межстрочный интервал 1.4-1.5, чтобы обеспечить лучшую читаемость.
Пример посередине легко читается, тогда как в примере слева строчки расположены слишком близко, а справа - слишком широко. Найдите золотую середину. Если вы используете темный фон, также следует поэкспериментировать с различными интервалами между строками, иначе будет трудно читать.
Используйте свободное пространство
Свободное пространство - это область, которая окружает текст письма. Оно поможет выделить сам текст, чтобы он смог привлечь внимание. Вы можете поэкспериментировать с разным объемом белого пространства, чтобы посмотреть, в каком случае письмо будет выглядеть более привлекательно.
Мне нравится, как Waitrose использует белое пространство, чтобы привлечь внимание читателя. Они используют только черный цвет и 3 шрифта. Просто и гениально.
Форматирование ссылок в письмах
Использование картинок или кнопок - это стильный способ оформления перехода на тот или иной URL-адрес. Читателям также проще кликать на изображения или кнопки на мобильных устройствах, так что шансы на привлечение людей на сайт увеличиваются.
Если вы решили разместить URL-адрес в тексте письма, можно использовать жирные шрифты или цвет бренда, чтобы выделить гиперссылки. Подчеркивание и синий цвет – прошлый век. Возможно, лучше позволить читателям нажать на ссылки в тексте, изображения и CTA. Вы никогда не узнаете, на что больше им нравится кликать.
Краткое руководство по веб-шрифтам и безопасным шрифтам (web safe fonts)
Выбор правильных email шрифтов является очень важным, так как это может быть проблемой, если письма не будут отображаться на экранах получателей. Как правило, email-дизайнеры используют безопасные шрифты (web safe fonts) для разработки писем, но они ограничивают возможности с точки зрения творчества.
Каждая компания хочет быть последовательной и использовать одинаковые цвета и шрифты в целях поддержания единого стиля бренда. Поэтому дизайнеры начали использовать веб-шрифты. Эта техника позволяет творчеству расцветать. Тем не менее, тексты на изображениях невидимы для почтовых клиентов, что вызывает несколько проблем. Для начала я обрисую основные из них.
Различные почтовые клиенты, такие как Outlook, Windows или Apple используют различные параметры по умолчанию. Это означает, что если вы используете причудливые буквы, может быть невозможным показать их получателям. Они не будут выводиться на экран читателей. Почтовые клиенты могут использовать только те шрифты, которые установлены на компьютере. Чтобы сделать нашу жизнь еще более увлекательной, компьютеры Macintosh и Windows также имеют различные параметры по умолчанию.
Когда вы узнаете, какой шрифт хотите использовать, наиболее важный фактор, который стоит иметь в виду, заключается в удобстве использования этого шрифта. Можно ли представить эти шрифты большинству получателей? Если ответ - нет, убедитесь, что у вас есть запасной план, называемый альтернативными шрифтами.
Почтовые клиенты, поддерживающие веб-шрифты:
• Android email app
• Apple Mail
• IOS Mail
• Outlook 2000
• Outlook. com app
• AOL Mail
К сожалению, Google стал менее подходящим, так как он больше не использует теги стиля. Если почтовый клиент получателя не поддерживает используемый шрифт, отображаются резервные (fallback) шрифты. В запасном плане используются безопасные шрифты: Helvetica, Arial, Times New Roman. Если вы действительно хотите использовать определенный шрифт, есть еще один способ: вставить в письмо изображение. Но не каждый почтовый клиент показывает изображения по умолчанию.
Я получил это письмо без изображения. Я не знаю, был ли на изображении какой-либо CTA, но, возможно, был.
Безопасные шрифты являются email шрифтами по умолчанию
Arial, Courier, Georgia, Helvetica, Tahoma, Times New Roman, Trebuchet, Verdana – email-шрифты по умолчанию. Они безопасны, потому что установлены почти на каждом устройстве.
Как можно использовать веб-шрифты?
Существует два способа использования веб-шрифтов для оформления электронных писем. Можно загрузить и разместить шрифт на компьютере или воспользоваться сервисом хостинга. Ниже я немного расскажу о кодировании, необходимом для использования веб-шрифтов в электронной почте.
В Chamaileon вы сможете настроить, какие веб-шрифты и резервные шрифты вы хотите использовать на уровне компании, команды или проекта, и наша программа позаботится о необходимом кодировании.
Самостоятельная установка веб-шрифтов
Это отличное решение, если у вас есть необходимые ресурсы. Причина?Недостатком этого варианта является тот факт, что вам придется заплатить, чтобы получить эти шрифты и установить их. Но после того как вы скачали шрифт и установили его на своем компьютере, никакая третья сторона больше не будет участвовать. Если на веб-хостинге будут какие-то проблемы, вы не пострадаете от последствий. Если этот сервис вдруг прекратит свою работу, вы потеряете все свои шрифты и настройки.
Так что если вы можете себе это позволить, потратьте деньги на установку, просто чтобы быть в безопасности. Если вы выбираете этот вариант, убедитесь в том, что вы выбрали надежную инфраструктуру, которая не перестанет работать и сможет достаточно быстро обслуживать ваш регион и число подписчиков. Для начала вам понадобится программное обеспечение для редактирования шрифтов. Font Forge -это отличный редактор для создания и тестирования шрифтов.
Сервисы хостинга шрифтов
Эти сервисы являются бесплатными или требуют подписки. Вместо загрузки email-шрифтов на свой компьютер вы можете воспользоваться хостингом, используя «@font-face», «@import» или «link».
CSS блок «@font-face»
Необходимо добавить правило «@face-font» в таблицу стилей. Этот процесс позволяет детализировать тип шрифта (typeface), источник шрифта и вес.
В примере выше мы применили .ttf расширение, но у нас есть и другие варианты. Различные браузеры также используют различные шрифты. Сервисы хостинга шрифтов предлагают следующие форматы: .woff (Web Open Font Format), .woff2, .ttf (True Type Font), .eot (Embedded Open Font) и .svg. Формат . woff имеет самую большую поддержку среди почтовых клиентов, поэтому я бы посоветовал вам использовать его.
Метод «@import»
Это простой способ импорта шрифтов. Сервис предоставит код, который необходимо вставить в хедер и разделы стиля, как показано в примере ниже.
Если вы решили самостоятельно установить шрифт, необходимо перейти по ссылке на этот URL. Недостатком этого метода является то, что веб-шрифты загружаются медленнее, чем электронное письмо.
Использование «link» метода
Этот метод популярен, потому что он поддерживается большинством почтовых клиентов. Сервис хостинга предоставит значение «href». Если вы скачали шрифт и решили изменить значение «href», вы можете изменить его там, где вы установили шрифт. Сервис хостинга предоставит URL-адрес, который нужно скопировать и вставить в хедер (header).
Google Fonts предлагают несколько шрифтов, которые можно использовать бесплатно. Вы можете протестировать их, чтобы выяснить, подходят ли они к дизайну письма.
Как только вы выбрали понравившийся шрифт, скопируйте таблицу стилей, созданную Google, и вставьте ее в раздел хедера письма. Это отличная платформа для веб-хостинга, так как она является бесплатной и предлагает пошаговую инструкцию, которая поможет сориентироваться. Не забывайте добавлять резервные безопасные шрифты на всякий случай, чтобы убедиться, что получатели прочтут ваше письмо, даже если у них не будет установлен выбранный вами шрифт.
Выберите резервный шрифт, похожий на веб-шрифт. Например, если вы используете шрифт «serif», выберите также шрифт «serif», установленный по умолчанию. Этот метод поможет сохранить дизайн. Но имейте в виду, что разные шрифты имеют разные размеры, так что, скорее всего, письмо с резервным шрифтом будет немного отличаться от первоначального.
Сервисы веб-шрифтов:
• Typekit является частью Adobe Family. Они имеют шрифты хорошего качества, и их каталог очень впечатляет. Кроме того, если у вас есть членство в Adobe Cloud, этот сервис будет для вас бесплатным.
• My Font
• Font Shop
В Chamaileon вы сможете добавлять шрифты из любого источника, поэтому решение за вами, какой из них выбрать.
Какие шрифты являются лучшими для email сообщений?
Рекомендуется использовать так называемые безопасные или «default» шрифты. Эти шрифты отображаются очень хорошо на каждом экране и совместимы со всеми почтовыми клиентами.
• Times New Romans
Наш старый, стильный друг. Это, вероятно, один из наиболее часто используемых шрифтов. Помните, когда учителя рекомендовали использовать этот шрифт? Это не было совпадением.
• Verdana
Verdana при разработке был присвоен «воздушный» стиль, который помогает людям читать его.
• Georgia
Он также был разработан, чтобы быть практичным шрифтом. Он имеет мягкие края и легко читается.
Verdana и Georgia работают хорошо в электронных письмах, потому что они были разработаны, чтобы соответствовать пикселам экранов.
Настройки email шрифтов по умолчанию
Gmail использует Arial, тогда как Chrome не поддерживает Arial, он принимает вид Helvetica. Apple mail использует Helvetica. Вопрос в том, почему эти шрифты используются, если они не являются разумным выбором? Ответ кроется в технологиях. Эти шрифты хорошо отображались на экранах компьютеров с низким разрешением. Технологии развиваются, и теперь мы можем использовать более «чистые» символы. По некоторым загадочным причинам, мы должны продолжать использовать эти старые шрифты в электронной почте.
Какой самый лучший размер шрифта для рассылок?
Исследование Bloomsberg показывает, что Helvetica и Arial являются плохими для писем. Наиболее распространенными шрифтами для рассылок являются Time News Roman, Verdana, Arial и Tahoma. Это безопасный выбор и может быть использован для любых целей. Размер шрифта зависит от typeface. Заголовки должны быть от 22 до 28 пикселей, а размер шрифта - 14-18 пикселей.
Какой шрифт лучше для делового письма?
Используйте серьезные, устаревшие шрифты для стандартной корпоративной переписки. Georgia безопасен для использования. Он выглядит серьезно, и его также легко читать. Избегайте «fantasy» и курсивных шрифтов.
Какой шрифт лучше всего подходит для подписи в письме?
Ваша подпись - это что-то личное, место, где можно проявить индивидуальность. Не делайте этого. Используйте шрифт Verdana, который является стильным и скромным. Размер 12 был бы просто идеальным.
Советы по использованию email шрифтов
• Будьте последовательным
Используйте одинаковые typefaces, шрифты и размеры в email-кампаниях. Было бы смешно, если бы одна рассылка была оформлена в шрифте Comic, а другая – в Times New Roman. Кроме того, убедитесь, что email-шрифт соответствует шрифтам бренда. Выберите цвета, которые вы используете на сайте.
• Не используйте слишком мелкие шрифты
Это важно, если вы думаете о мобильных пользователях. Отзывчивый дизайн всегда является приоритетом. Мобильные пользователи не могут читать очень мелкие символы. Рекомендуемый размер - не менее 14. Если вы хотите перестраховаться, используйте минимум 16. Исследование, проведенное Litmus, показало, что 54% открытий email-сообщений происходит на мобильном телефоне. Это достаточно веская причина, чтобы обратить внимание на эту деталь, не так ли?
• Слишком большие шрифты также не подходят
Они будут просто «кричать» в лицо читателей. Мы считаем, что это большое «нет». Однако если люди, которых вы таргетируете, уже в возрасте, можно увеличить размер шрифта, чтобы убедиться, что они смогут прочитать сообщение без очков.
• Специализированные шрифты, которые никто не использует, кроме вас
Я понимаю вашу страсть к редким и очень специфическим шрифтам. Но, если ваши получатели не смогут прочитать их, потому что они у них не установлены, ваш удивительный шрифт бесполезен.
• Неуместные шрифты
Опять же, если вы отправляете письмо в бизнес-целях, используйте серьезные typefaces и шрифты. Наиболее распространенными шрифтами деловой переписки являются Times New Roman, Helvetica, Arial. Поскольку при проведении собрания вы используете деловую лексику, этот шрифт обеспечит, что тот же стиль будет передан в письме.
Вывод
Я думаю, что использование веб-шрифтов в письмах является целесообразным, даже если не каждый получатель увидит результат. Вы можете использовать технологии, чтобы быть последовательным с точки зрения брендинга. Наиболее важным является то, что если вы решили использовать веб-шрифты, убедитесь, что вы установили безопасные варианты шрифтов, которые будут отображаться должным образом на устройствах, которые не поддерживают современные шрифты.
|