Будьте в курсе последних новостей интернет-маркетинга
Будьте в курсе последних новостей интернет-маркетинга
Будьте в курсе последних новостей интернет-маркетинга

Типографика в емейл-дизайне

03.10.2011
0

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

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

A. Какой размер шрифта будет оптимальным для чтения?

Лучше всего сообщение читается, когда каждая строка содержит от 45 до 75 символов, в идеале — 66. По сравнению с обычной веб-страницей информационные бюллетени, как правило, гораздо уже. К примеру, электронное письмо шириной в 560 пикселей, с 12 кеглем в параметрах шрифта, вмещает в каждую строку около 93 символов. (Эта цифра имеет приблизительный характер, поскольку ширина букв варьируется в зависимости от выбранного шрифта). Если основной текст вашего письма разделен на колонки, ширина текста, и, следовательно, длина каждой строки, будут ещё меньше. Практика свидетельствует о том, что оптимально использовать более крупный шрифт для широкого текста, и, соответственно, более мелкий — для текста поуже. Так или иначе, использовать шрифт мельче 10 пикселей не рекомендуется, поскольку это тяжело для глаз.

В. Какие единицы измерения выбрать для установки размера шрифта?

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

С. Какие шрифты лучше всего использовать?

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

Известно, что читать текст с монитора тяжелее, чем в распечатанном виде. Поэтому шрифты с высокой строчной буквой и четкими очертаниями (такие как Georgia и Verdana) – это наилучшее решение для текста, который будет читаться с экрана. Если вас интересуют оригинальные идеи из области подбора шрифтов используйте публикацию Роса Ноджкиса «A fresh look at fonts in email design” на официальном блоге Campaign Monitor в качестве источника вдохновения (http://www.campaignmonitor.com/blog/post/3190/font-stacks-used-in-email).

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

D. Какое цветовое решение выбрать для текста?

Прежде всего, цвет текста должен отчетливо контрастировать с фоном: либо это светлые символы на темном фоне, либо наоборот. Чем меньше этот контраст – тем менее заметным и значимым кажется фрагмент текста. Взгляните на рекламу Nike:
Nike_070811.jpg

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

E. Какой способ выравнивания эффективнее?

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

F. Какими типографическими приемами воспользоваться при оформлении электронного письма?

Графическая форма вашего сообщение должна четко передавать смысловую иерархию различных частей текста. В первую очередь, создать иерархию заголовков, подзаголовков и собственно текста вам поможет регулировка размера шрифта. Взгляните, как эффектно это получилось у GILT:
WestElm.jpg
Основная информация дана крупным шрифтом, подробности акции – средним, а то, к чему внимание потенциальных клиентов привлекать не стоит (наименование товаров, на которые она не распространяется) —  совсем мелким.

Помимо этого существует возможность использовать различные стили начертания: курсив, жирный или полужирный, заглавный или строчный буквенный регистр. Например, информация сбоку и в нижней части сообщения не должна отвлекать внимание адресата от основного текста, и ваша задача — придать электронному письму соответствующий вид.
Ещё один эффективный способ выделения значимых фрагментов текста – использование отступа, как в примере ниже:
0719_Jetsetter.jpg

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

Не бойтесь сочетать обычный текст с HTML-компонентами, либо просто использовать его возможности (такие как анимация) в полной мере.

Позаботьтесь об alt-тексте на случай отсутствия у получателей возможности просмотреть изображения. Должны же они знать, что теряют!

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

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

Переведено специально для emailslab.ru

Источник: www.mediapost.com
Поделиться статьёй:
Комментарии