В этой статье мы расскажем, какое выравнивание текста лучше использовать в письме, чтобы его было комфортно читать: по ширине, по центру, по правому или левому краю.
Мы специально не используем термины «выключка», «флаговый набор», а в некоторых моментах упрощаем теорию. Это нужно, чтобы статья была понятна тем, кто не занимается дизайном и вёрсткой профессионально. Если вы профессионал и вам есть что добавить — оставляйте комментарии в нашем чате.
Читайте также
Что выравниваем по ширине: ничего
Выровнять текст по ширине значит растянуть каждую строку по всей ширине блока так, чтобы и левый, и правый край получились ровными. Серьёзно, ничего не выравниваем по ширине. Текст в таком виде может нравиться, это даже зафиксировано в исследовании, но это же исследование показало, что выровненный по ширине текст читать сложнее, чем выровненный по левому краю.
Кроме того:
- выравнивание по ширине снижает скорость чтения на 11%;
- такой текст трудно читать людям с дислексией.
Единственное место, где сейчас возможно правильное выравнивание текста по ширине — печатные издания. Для этого верстальщик настраивает пробелы между буквами и словами в каждой строке. Но делать то же самое в письмах будет проблематично.
Читайте также
Поправь то, не знаю что: как понять, что вам не нравится в тексте
Что выравниваем по правому краю: почти ничего
Выравнивание по правому краю используется в отдельных случаях, которые сложно классифицировать. Например, в письмах так может выравниваться телефон и ссылка на веб-версию в шапке письма.
Я не нашёл исследований, которые бы изучали текст с неровным левым краем. Но можно предположить, почему это выравнивание не подходит для текста большого объёма: из-за «рваного» левого края читателю каждый раз нужно искать начало следующей строки. При небольших объёмах текста это не критично, но это может затруднять чтение, если текста много.
Что выравниваем по центру: акценты
Выравнивание по центру подходит для акцентирования небольших отрывков текста, обычно не больше 3 строк. Например, для привлечения внимания к цитатам.
Это выравнивание не подходит для объёмного текста по той же причине, что и выравнивание «по правому краю» — «рваный» левый край может затруднять чтение.
Красиво сверстаем ваши письма
Дизайн и вёрстка email-рассылокЧто выравниваем по левому краю: почти всё
По левому краю выравниваем основной текст. По результатам исследований, выровненный по левому краю текст запоминается лучше, чем выровненный по ширине, и читается быстрее.
Это выравнивание выглядит привычно: большинство текстовой информации вокруг нас выровнено по левому краю.
Именно это выравнивание используют крупные новостные сайты — вероятно, для того, чтобы читателям было удобнее воспринимать информацию.
Читайте также
Скачать готовую html-вёрстку письма можно с помощью плагина для Фигмы
Как задать выравнивание в HTML-письме
В вёрстке письма выравнивание чаще задают не CSS-свойством text-align, а HTML-атрибутом align на ячейке таблицы: часть CSS-свойств почтовые клиенты поддерживают не полностью, и HTML-атрибуты работают надёжнее. Тем же атрибутом align на ячейках таблиц задано выравнивание в примерах кода из нашего разбора вёрстки писем.
Каждое из четырёх выравниваний задаётся одной строкой кода:
<td align="left">— по левому краю;<td align="right">— по правому краю;<td align="center">— по центру;<td align="justify">— по ширине.
Как собрать из таких ячеек рабочую вёрстку письма целиком, с обходными таблицами и MSO-условными комментариями для Outlook, разобрано отдельно: HTML-вёрстка писем.
Если вы хотите, чтобы читатели письма легко и быстро получили информацию — мы рекомендуем выравнивать текст по левому краю. Другими способами лучше выравнивать только небольшой текст, для акцентирования важной информации или других целей.
Вопросы про выравнивание текста в письме
Что значит выровнять текст по ширине?
Это значит растянуть каждую строку по всей ширине текстового блока, чтобы левый и правый края получились ровными: компьютер сам добавляет дополнительные пробелы между словами. В печати такое выравнивание настраивает верстальщик вручную, а в письмах и на сайтах из-за автоматических пробелов текст читается медленнее обычного.
Как сделать выравнивание по левому краю?
В браузере и большинстве редакторов текст выравнивается по левому краю по умолчанию, отдельно ничего включать не нужно. В HTML-письме то же выравнивание задают атрибутом align="left" на ячейке таблицы, а не CSS-свойством text-align: часть CSS-свойств почтовые клиенты поддерживают не полностью, и HTML-атрибуты работают надёжнее.
Можно ли задать выравнивание по ширине в HTML-письме так же, как в Word или на сайте?
Не совсем: в вёрстке писем для этого используют не CSS-свойство text-align, а HTML-атрибут align="justify" на ячейке таблицы — по той же причине, что и остальные выравнивания: часть CSS-свойств почтовые клиенты поддерживают не полностью. Но даже с этим атрибутом от выравнивания по ширине стоит отказаться для основного текста письма: оно снижает скорость чтения.
Какое выравнивание текста правильное?
Однозначно правильного выравнивания для всех случаев нет, но для писем и другого объёмного текста лучше подходит выравнивание по левому краю: оно читается быстрее и запоминается лучше выравнивания по ширине. Выравнивание по ширине или по центру стоит использовать только для акцентов и коротких фрагментов текста.
