Какой шрифт на конвертах. Привлекайте внимание подписчиков с помощью оригинальных шрифтов Google Fonts
Заинтересованность аудитории зависит не только от контента, но и от способа его подачи. Другими словами, важно и то, О ЧЁМ вы пишете, и то, КАК вы пишете.
Хотите сделать письмо более стильным? Попробуйте шрифты, которые бросаются в глаза. Выберите шрифт, который отражает настроение письма, и не забудьте убедиться, что он будет красиво и правильно отражаться на компьютерах и мобильных устройствах подписчиков. С возможностями вёрстки HTML рассылку сделать проще простого, даже если вы не умеете писать код самостоятельно. Есть веб-сервисы, такие как Google Fonts, которые выкладывают в общий доступ готовый код, который вам надо будет просто добавить в рассылку по определённым правилам. Будьте креативными, а удобный онлайн-сервис бесплатных веб-шрифтов от Google поможет вам в этом.
Используйте шрифты вместо картинок, чтобы отправить рассылку e mail с быстрой и правильной загрузкой
Почему при вёрстке в HTML email рассылок текст лучше картинки?
- У подписчика может стоять блокировка картинок в email , и, чтобы увидеть картинки, он должен будет снять эту блокировку. А шрифты отображаются в любом случае.
- Использование шрифтов из онлайн-коллекции уменьшает время загрузки письма. Не имеет значения, сколько раз в письме используются веб-шрифты: при загрузке происходит всего один запрос к серверу, на котором хранится шрифт. С картинками дело обстоит иначе: для подгрузки каждой картинки нужен отдельный запрос, поэтому письмо загружается медленнее. Если у подписчика медленный интернет, то он может просто закрыть письмо. Поэтому готовые html шаблоны для email рассылок, состоящие из одних картинок, не всегда приносят лучшие результаты.
- Даже самая качественная картинка с высоким разрешением будет выглядеть менее чётко и читабельно, чем текст.
Применяйте в письмах веб-шрифты Google
Попробуйте преобразить шаблон вашего письма с помощью веб-шрифтов Google! Расскажем подробнее о том, что это за шрифты, и почему они так хороши.
Шрифты Google Fonts – это качественные шрифты высокого разрешения, которые можно добавлять на сайты или в email.
Преимущества Google Fonts:
- Большой выбор бесплатных веб-шрифтов для использования в коммерческих и некоммерческих целях.
- Применить шрифт к тексту письма в HTML-формате очень легко: просто следуйте нашей инструкции из 6 пунктов, опубликованной чуть ниже.
- Шрифты Google поддерживаются большинством почтовых программ, включая Apple mail, Outlook 2000/2011, Lotus Notes версий 8 и 8.5, Thunderbird, Android 2.3/4.2 и всеми устройствами на iOS.
Если у подписчика стоит блокировка изображений, то веб-шрифт не отобразится. Вместо него подписчик увидит стандартный шрифт, например, Sans Serif. В любом случае текст будет читаемым.
Как использовать в HTML-письмах веб-шрифты Google
Если вы пишете письма в формате HTML, следуйте шести пунктам нашей инструкции, и вы сможете добавить веб-шрифты Google в текст рассылки.
Шаг 1
Перейдите по ссылке https://www.google.com/fonts и выберите подходящий шрифт. Для примера мы возьмем Shadows Into Light.
Шаг 2
Когда вы определитесь со шрифтом, нажмите Quick use.
Шаг 3
Слева появится вот такое окошко с HTML-кодом:
Здесь напишите ваш заголовок
Готово! Вот как будет выглядеть ваш заголовок в готовом письме:
Другие веб-шрифты
Кроме Google Fonts есть и другие интересные веб-шрифты, которые вы можете взять для письма, чтобы не ограничиваться надоевшими Arial и Times New Roman.
Font-family: Arial, Helvetica, sans-serif; font-family: Georgia, serif; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-family: "Times New Roman", Times, serif; font-family: "Arial Black", Gadget, sans-serif; font-family: "Comic Sans MS", cursive, sans-serif;.t.c. font-family: Impact, Charcoal, sans-serif; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-family: Tahoma, Geneva, sans-serif; font-family: "Trebuchet MS", Helvetica, sans-serif; font-family: Verdana, Geneva, sans-serif; font-family: "Courier New", Courier, monospace;
Хотя большинство почтовых программ поддерживает стандартные веб-шрифты, есть и такие, у которых нет такой функции. В этом случае веб-шрифт будет заменен на универсальный. Как видно чуть выше, почти каждая строка заканчивается упоминанием шрифта Sans Serif, который поддерживается всеми почтовыми программами.
Подводим итоги по веб-шрифтам
Все хотят, чтобы их письма выделялись среди остальных рассылок, заполняющих почтовый ящик подписчика. Стандартные веб-шрифты и особенно веб-шрифты Google – это отличный способ привлечь внимание читателя. Не захламляйте письмо ненужными картинками вместо заголовков – лучше пользуйтесь веб-шрифтами. Это освежит письмо, уменьшит время его загрузки и улучшит читабельность.
Как выбрать идеальный шрифт? Попробуйте А/В тестировать разные шрифты, и вы найдёте тот, который лучше всего соответствует содержанию письма и характеру аудитории.
Хочется сказать умельцам, которые предпочитают самостоятельно писать скрипт email рассылки : 2016 год на дворе – ваше время стоит дороже! Зачем изобретать велосипед, если все удобные инструменты массовых email рассылок уже есть в удобном и недорогом сервисе Mailigen? Просто загрузите свою базу и начинайте создавать профессиональные рассылки за считанные минуты.
Если вам нужна консультация профессионалов по поводу использования веб-шрифтов в коде письма, пожалуйста, свяжитесь с нами . Если вы хотите дизайн письма «под ключ», то для вас работает наша Фабрика дизайнов . Обратитесь к нам и получите стильную email рассылку.
Можно только если использовать реальный текст в HTML-версиях писем.
При этом, данный факт вовсе не означает, что можно использовать только Arial и Times New Roman. В сегодняшнем материале мы рассмотрим существующие возможности по работе с шрифтами в email.
Основы типографики
Одна из главных задач при верстке почтовых рассылок заключается в том, чтобы убедиться, что почтовые клиенты и движки рендеринга не делают с письмами ничего странного. Когда дело касается текста, то решить большую часть возможных проблем можно с помощью добавления пары стилей. Например, при использовании подхода можно применять их на уровне ячейки в таблице:
К ячейкам можно применять CSS-стили, описывающие цвет текста (color), используемый шрифт (font-family), его вес (font-weight) и высоту строки (line-height).
Если объявить эти стили, то текст будет адекватно рендериться даже в самых «враждебных» почтовых клиентах. Если хранить каждую часть контента в своей ячейке, то эти компоненты можно стилизовать без необходимости заботиться о проблемах наследования. Если, например, нужно поработать с конкретным участком текста в большом блоке, то этот нужный текст можно завернуть в и использовать инлайн-стили:
В примерах выше мы использовали Arial (да-да), но ничто не мешает пойти дальше. Давайте посмотрим, как это можно сделать.
Использование веб-шрифтов
Данный метод хорошо дизайнер Пол Эйри (Paulr Airy). Его суть заключается в использовании веб-шрифтов, которые не установлены на устройстве пользователя. Делается это с помощью их включения в CSS. В вебе этот метод давно и успешно применяется, но среди email-дизайнеров только набирает популярность.Существует несколько способов включения веб-шрифтов, но Пол рекомендует использовать внешний файл со стилями, который используется для «вытягивания» шрифтов с сайтов вроде Google Web Fonts.
Затем в инлайн-стилях можно добавить нужный шрифт в декларацию font-family:
Теперь в почтовых клиентах, которые поддерживают веб-шрифты, текст будет отображаться с помощью выбранного заранее шрифта. В противном случае, будут использоваться перечисленные альтернативные шрифты - у нас это Helvetica, Arial или установленный шрифт без засечек.
| Поддержка веб-шрифтов в почтовых клиентах через ссылку на внешний файл стилей
|
|
| Apple Mail 6 |
|
| Lotus Notes 8 |
|
| Outlook 2000 |
|
| Outlook 2011 on Mac |
|
| Thunderbird |
|
| iPad |
|
| iPhone |
|
| Android 2.3 |
|
| Android 4.2 |
|
К сожалению, Outlook не станет отображать наши альтернативные шрифты (кто бы сомневался, конечно). Вместо этого, он проигнорирует все относящиеся к ним стили и отобразит текст с помощью Times New Roman. Но и с этим можно справиться с помощью специального CSS-класса - он будет выделять нужный текст через условные комментарии передавать Outlook информацию об используемом наборе шрифтов.
Теперь вместо Times New Roman по-умолчанию письма будут отображаться с помощью Arial или другого установленного шрифта без засечек.
Многоколоночный вид без табличных ячеек
Пол также говорит о нежелательности использования для размещения текста несколько колонок-столбцов. Однако поскольку большинство писем верстают в , в котором всегда есть столбцы, то напрашивается простое использование соседних ячеек для отображения текста. Но что, если нам нужно добиться «перетекания» текста из одного столбца в другой, вместо «хардкодинга» контента в конкретные ячейки?Здесь на помощь приходит CSS-свойство column-count. Но важно помнить: с этого момента мы вступаем на дикие земли, в которых редко можно встретить приложение, поддерживающее column-count.
С помощью этого свойства можно задать число столбцов, на между которыми будет разбиваться текст. Вот как выглядит код:
Теперь вне зависимости от объёма текста, он будет естественным образом разбит между двумя столбцами. В том случае, если почтовая программа, в которой открывается письмо, не поддерживает column-count, сообщение отобразится в одноколоночном виде.
Как сказано выше, с поддержкой как раз все не очень хорошо:
Иногда с помощью различных лайфхаков (например, применение стилей к тегу параграфа) удается заставить отображать письма с column-count и некоторые другие клиенты. В частности, в ходе тестов Полу удалось добиться этого, например, в Outlook.com в Firefox.
Сегодня мы поговорим о такой важной теме в письмах, как шрифты:
Хорошо выбранный шрифт, который гармонирует с общим дизайном вашего email письма, позволяет подписчику легко «сканировать» текст, а следовательно - быстрее до него достучится. Отображение шрифтов для получателей во многом зависит от возможностей устройства, на котором открывают письмо.
Как выбирать шрифты для email рассылок?
Поскольку большинство почтовиков используют HTML для отображения писем, вам необходимо использовать правильные коды HTML для шрифта и стиля, который будут видеть ваши читатели. Используйте широкодоступные шрифты, так как они правильно показываются практически на всех гаджетах и во всех почтовых клиентах:
При выборе шрифтов для писем соблюдайте правила:
Используйте разные шрифты для заголовков и блоков. Приоритетных шрифтов для заголовка письма нет, поэтому это зависит только от вашей фантазии и возможностей почтовиков. Слишком много различных шрифтов в одном письме может сделать ваш текст беспорядочным, так что ограничьтесь не более чем двумя-тремя различными шрифтами. Использование одного шрифта для заголовков и другого шрифта для всего текста - это приемлемый стандарт.
Декоративные шрифты лучше не добавлять в тексте или использовать только в отдельных элементах и в небольшом количестве. Они плохо читаемы в длинных текстах и не факт, что они правильно отобразятся у пользователя. Если уж сильно хочется добавить в письмо что-то такое-эдакое - добавляйте в изображения нестандартные шрифты, проставляя к ним
Так как Astratex делают письмо из блоков-картинок, чередуя их с текстом. На картинках они экспериментируют со шрифтами как угодно и письмо от этого абсолютно не страдает.
Подбирайте шрифт, который дополнит личность вашего сообщения, подчеркнёт корпоративный стиль и т.д. Странно писать о серьёзных вещах используя Comic Sans, но если вы с клиентами достаточно близки - почему бы и нет? Comic Sans - это один из шрифтов, который часто поддаётся критике. Если вам очень нравится этот шрифт - не нужно делать всё письмо в этом стиле. Выделяйте заголовки или отдельные элементы. Но в то же время слишком много шрифтов в вашем письме сделают письмо трудночитаемым и его будет сложно визуально воспринимать вашим читателям.
Избегайте обилия различных шрифтов и сочетаний, которые не подходят по стилю (например: Arial и Comic Sans).
Используйте на посадочных страницах те же шрифты, что и в письмах, чтобы пользователь привыкал к вам.
Текст без засечек считается более удобным для чтения. Тем не менее, Serif с засечками легко читается на экране устройства и может выглядеть интереснее, чем некоторые шрифты без засечек.
Применение элементов стиля в письмах
Какие шрифты использовать для email рассылки мы уже поняли, а теперь перейдём к отдельным элементам. Изменение стиля шрифтов придаст вашему письму определенный шарм и выгодно подчеркнёт главную мысль в тексте. Самые полезные элементы стиля и их наиболее подходящие области применения включают:
Жирный текст выделяет важные фразы и создаёт контраст в тексте. Большинство редакторов позволяют изменять текст жирным шрифтом, не добавляя HTML теги. Жирный чаще всего используется для заголовков, подписей, отдельных слов или фраз, коротких отдельных фраз, важных предложений. Жирный текст в середине абзаца может отвлекать внимание от остального текста, поэтому, когда вы хотите подчеркнуть только одно слово в пункте, выбирайте лучше курсив, а не жирный.
Курсив «осторожно» привлекает внимание к вашим словам. Это хороший выбор для выделения одного слова или короткой фразы в пункте, разграничения подзаголовков, собственных имён или каких-то названий. Курсив может быть трудночитаем на экране компьютера, так что лучше ограничить использование курсива до отдельных слов и коротких фраз.
Избегайте чрезмерного использования выделений жирным шрифтом или курсивом - это будет невозможно читать и пользователь просто закроет письмо.
Подчеркнутый текст читатели могут определить как гиперссылки. Вы можете подчеркнуть заголовки, чтобы отделить их от последующего текста, но если у вас есть возможность - сделайте их ссылками, чтобы клиент не разочаровался, безрезультатно клацая на заголовки.
Изменение размера текста. Делает текст более удобным для чтения на экране компьютера. Вы можете использовать различные размеры для заголовков и подзаголовков, чтобы привлечь внимание или наоборот - сделать отдельный блок менее заметным.
Подпись сделана меньшим кеглем, но на значимость этого блока это не повлияло. Он попросту не привлекает лишнего внимания и читатель дойдёт до него в порядке очереди.
Цветной шрифт может как улучшить, так в то же время и испортить впечатление от внешнего вида вашего письма. Использование темного текста и светлого фона - наиболее приемлемый вариант, но не наоборот. Убедитесь, что цвет шрифта и цвет фона достаточно контрастны между собой.
Белый шрифт с засечками на чёрном фоне - это неудобно. Конечно, администрация знает лучше что им и как отправлять, но согласитесь - такие письма читать сложно.
А в таком формате вообще непонятно зачем столько красок. Хоть я и подписалась, но это письмо у меня падает в спам, возможно, в том числе и благодаря такой насыщенности и пёстрости. Избегайте контрастных ярких цветов: синего , красного , желтого и т. д.), а особенно, если письмо состоит только из них.
- Высота шрифта и отступы не менее важны для комфортного чтения. Основной шрифт делайте не менее 12 рх, с учётом того, что . Более 16 рх всё письмо тоже лучше не делать - это удлинит письмо и читать письмо тоже будет не удобно.
