Веб‑шрифты: как использовать в email-рассылке, чтобы сделать письма ещё уникальнее

Эксперты из Microsoft и MIT ещё в 1984 году выяснили, что хорошо оформленный текст читают быстрее и с большим удовольствием. Это правило касается и email-писем. Поэтому, чтобы показатели ваших рассылок всегда были на уровне, стоит уделять особое внимание типографике. 

В статье рассказали, как что такое шрифты для web-дизайна, как и зачем использовать их в рассылках. 

Что такое веб‑шрифты и какие они бывают

Безопасные web-шрифты для дизайна писем

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

Наиболее популярные безопасные шрифты: 

• Arial.
• Helvetica.
• Verdana.
• Georgia.
• Times New Roman.
• Tahoma.

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

Нестандартные web-шрифты для дизайна писем

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

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

На этих сайтах есть тысячи современных шрифтов на выбор: с засечками и без, цветные и монотонные, рукописные, декоративные и какие вообще захотите. 

Как использовать необычные веб‑шрифты для рассылок

Процесс несложный и состоит из двух основных шагов. 

1. Нужно получить URL-адрес шрифта, который вы хотите загрузить. 
2. Импортировать шрифт в код одним из трёх способов: <link>, @import или @font-face. 

Разберём, как встроить шрифт, на примере Google Fonts. 

Чтобы получить URL, нужно выбрать шрифт и стиль, затем кликнуть на Select…, выбрать метод вставки и скопировать адрес.

Для способов <link> и @import — всё просто. Копируете и вставляете в код письма. Но если идти путём команды @font-face, нужно сделать ещё несколько действий:

1. Копируете ссылку на шрифт в режиме <link>.

2. Вставляете ссылку в адресную строку и получаете таблицу стилей CSS, которую использует Google.

3. Копируете URL в версии cyrillic и вставляете в код через команду @font-face. Готово! 

Работать через @font-face — более оптимальный способ добавить шрифт в письмо, так как с помощью этого правила вы сможете форматировать текст: выбирать начертание, размер и шрифт. А также добавить резервный безопасный шрифт, который будет отражаться в письме, если устройство пользователя не поддерживает основной. 

Что ещё стоит учитывать при работе со шрифтами для почты и веб‑сайтов

Чтобы текст быстро погружался и правильно отображался в письме, шрифт необходимо «вставлять» в определённом формате. 

В веб‑дизайне есть шесть форматов шрифта: 

• TTF (TrueType Font).
• OTF (OpenType Font).
• SVG (Scalable Vector Graphics).
• EOT (Embedded Open Type).
• WOFF и WOFF2 (The Web Open Font Format).

Наиболее популярный и беспроблемный формат это — WOFF и WOFF2. Он поддерживается большинством современных устройств. 

Зачем вообще использовать нестандартные веб‑шрифты в email-рассылке и на сайте

1. Подчеркнуть айдентику бренда. Если у вас в брендбуке есть собственный шрифт или вы хотите выделить свою рассылку на фоне других, дополните дизайн уникальным шрифтом. 
2. Создать единый визуальный стиль. Типографика поможет объединить все элементы письма и сделать каждый из них особенным, подчёркивающим позиционирование компании. 
3. Сделать так, чтобы пользователь мог взаимодействовать с текстом. Если вы отправили промокод на скидку, читатель должен иметь возможность его скопировать. Оставив текст на картинке, вы можете потерять потенциального покупателя, потому что мало кто захочет перепечатывать текст из письма в поле промокода. 
4. Разработать красивое письмо без картинок. Бывают рассылки, для которых изображение кажется лишним. В этом случае необычные шрифты используются, чтобы добавить письму особый стиль. Это поможет сохранить визуальную привлекательность текста и без иллюстраций.