Сегодня мы поговорим о такой важной теме в письмах, как шрифты:

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

Как выбирать шрифты для email рассылок?

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

При выборе шрифтов для писем соблюдайте правила:

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

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

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

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

Избегайте обилия различных шрифтов и сочетаний, которые не подходят по стилю (например: Arial и Comic Sans).

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

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

Применение элементов стиля в письмах

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

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

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

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

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

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

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

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

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

А в таком формате вообще непонятно зачем столько красок. Хоть я и подписалась, но это письмо у меня падает в спам, возможно, в том числе и благодаря такой насыщенности и пёстрости. Избегайте контрастных ярких цветов: синего , красного , желтого и т. д.), а особенно, если письмо состоит только из них.

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

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

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

Для работы нам понадобится вкладка Рассылки в верхнем меню MS Word (рис. 1), а также абсолютно чистые, без размеченных полей, конверты. Расположение реквизитов на конвертах разного размера уже заложено в программу, поэтому разметка не понадобится.

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

Указание адреса отправителя

Обыкновенный почтовый конверт требует от отправителя заполнения следующих реквизитов:

· имя (наименование) и адрес отправителя;

· индекс получателя;

· имя (наименование) и адрес получателя.

Почта России закрепила правила написания адресов на своих отправлениях в Порядке приема и вручения внутренних регистрируемых почтовых отправлений (утв. приказом ФГУП «Почта России» от 17.05.2012 № 114-п):

«4.39. Адреса на почтовых отправлениях, сопроводительных бланках к посылкам, сопроводительных бланках «Е 1-в», пересылаемых в пределах Российской Федерации, должны быть указаны на русском языке и арабскими цифрами, а пересылаемых в пределах территории республик в составе Российской Федерации могут оформляться на государственном языке соответствующей республики при условии повторения адресов на русском языке.

Реквизиты адреса пишутся в следующем порядке:

· для юридического лица – полное или краткое наименование, для физических лиц – фамилия, имя, отчество;

· банковские реквизиты (для почтовых переводов наложенного платежа, направляемых юридическому лицу или принимаемых от юридического лица): ИНН, корреспондентский счет, наименование банка, расчетный счет, БИК;

· название улицы, номер дома, номер квартиры;

· название населенного пункта (города, поселка и т.п.);

· название района;

· название республики, края, области, автономного округа (области);

· почтовый индекс;

· телефон получателя (отправителя) (для отправлений EMS, МКПО)».

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

Для этого нужно нажать на круглую кнопку Office в левом нижнем меню экрана и в выпавшем меню нажать на кнопку Параметры Word (рис. 2).

Рис. 2. Кнопка Параметры Word

В открывшемся окне слева кликаем на команду Дополнительно и прокручиваем правое поле вниз, до группы Общие . Там находится поле Почтовый адрес . Заполняем его и сохраняем, нажав ОК (рис. 3).

Рис. 3. Пример заполнения поля Почтовый адрес

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

Готовимся указать индекс получателя

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

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

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

Файл шрифта имеет расширение.ttf. Чтобы он отображался среди всех шрифтов Word, нужно открыть папку Мой компьютер , далее зайти в Панель управления , найти папку Шрифты и переместить в эту папку скачанный файл.

Надписывание конверта

Рис. 4. Окно Конверты и наклейки

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

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

Во вкладке Параметры конверта задается размер конверта, на котором будет производиться печать; формат и размер конверта в миллиметрах указаны тут же (рис. 5). Программа также покажет схему расположения реквизитов на выбранном формате. Сразу же можно задать параметры текста адресов: шрифт и размер. Не забываем сохранять изменения, нажимая на ОК .

Рис. 5. Вкладка Параметры конверта

Вкладка Параметры печати , во-первых, позволяет выбрать принтер, на котором будет производиться печать, во-вторых, показывает, как именно следует расположить конверт в лотке для бумаги (рис. 6).

Рис. 6. Вкладка Параметры печати

Задав все нужные параметры конверта и печати, можно вернуться в окно Конверты и наклейки и нажать на кнопку Добавить , чтобы посмотреть на электронную версию готового конверта. Не хватает только индекса. Дважды кликнув мышкой по белому полю в том месте, где должен быть расположен индекс, пишем его и изменяем шрифт на тот, что ранее мы подготовили для этой цели. Конверт готов (рис. 7). Можно смело класть в лоток подачи бумаги принтера чистый конверт и отправлять документ на печать.

Рис. 7. Готовый конверт

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

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

Можно только если использовать реальный текст в HTML-версиях писем.

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

Основы типографики

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

Здесь какой-то текст.
К ячейкам можно применять CSS-стили, описывающие цвет текста (color), используемый шрифт (font-family), его вес (font-weight) и высоту строки (line-height).

Some copy goes here.
Если объявить эти стили, то текст будет адекватно рендериться даже в самых «враждебных» почтовых клиентах. Если хранить каждую часть контента в своей ячейке, то эти компоненты можно стилизовать без необходимости заботиться о проблемах наследования. Если, например, нужно поработать с конкретным участком текста в большом блоке, то этот нужный текст можно завернуть в и использовать инлайн-стили:

Здесь какой-то текст. Привлекаем внимание к контенту с помощью стилей шрифта
В примерах выше мы использовали 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.