Пользователи не любят читать большие тексты в интернете. Они часто заняты несколькими задачами одновременно: переключаются между вкладками, отвлекаются на уведомления и рабочие задачи. Столкнувшись с большим массивом текста, большинство предпочитает пропустить его в поисках контента, который легче воспринимается.
Хорошо отформатированные абзацы делают текст легче для восприятия и понимания. Абзацы — это строительные блоки любого текста. Каждый абзац представляет отдельную мысль, задаёт структуру и организацию контента. Они важны для удобочитаемости и доступности цифрового продукта для всех пользователей.
Существуют различные техники форматирования абзацев, призванные улучшить читаемость и возможность быстрого сканирования текста, чтобы пользователи быстрее находили необходимую информацию.
Длина строки (Line length)
Согласно рекомендациям, разработанным U.S. Technology Transformation Services (TTS), оптимальная длина строки должна составлять от 45 до 75 символов, включая пробелы. С точки зрения доступности, строки, длиннее этого диапазона, трудно воспринимать в больших блоках текста. С другой стороны, слишком короткие строки тоже не оптимальны: из-за частых переходов глаза пользователя постоянно прыгают с одной строки на другую, устают и теряют концентрацию. Поэтому лучше придерживаться рекомендованного диапазона.
Обратите внимание, что к заголовкам, подписям и ярлыкам не применяются строгие требования по длине строки, и они могут быть короче.
Высота строки (Line height)
Высота строки или межстрочный интервал — это вертикальное расстояние между строками в абзаце. Обычно высота строки зависит от размера и особенностей шрифта. Чем больше размер шрифта и ширина строки, тем больше должна быть высота строки.
Высота строки обычно определяется в процентах от размера шрифта, и оптимальным считается значение около 150% от размера шрифта. Например, если размер шрифта 16px, то высота строки 24px будет удачной отправной точкой.
Высота строки 150% обеспечивает достаточное расстояние между строками, предотвращает столкновения букв соседних строк и делает текст читаемым. С другой стороны, слишком большое расстояние (около 250%) выглядит неестественно и затрудняет чтение.
Совет! Для расчёта оптимальной высоты строки и размера шрифта используйте GRT Calculator.
Межабзацный интервал (Paragraph spacing)
Абзацы не появляются сами собой. Задача дизайнеров — грамотно расставлять интервалы и форматировать абзацы так, чтобы разбивать массивный текст на логичные блоки. Кроме того, людям с когнитивными и зрительными нарушениями трудно следить за текстом, если между строками и абзацами недостаточно свободного пространства.
WCAG рекомендует делать межабзацный интервал как минимум в 1,5 раза больше стандартного межстрочного интервала. Другими словами, между абзацами должен быть пустой промежуток, отчётливо отличающийся от обычного переноса строки.
Выравнивание (выключка) по левому краю (Left alignment)
На английском и большинстве европейских языков люди читают и пишут слева направо. Поэтому выравнивание текста по левому краю является самым распространённым в интернете. Такое выравнивание воспринимается естественно, повторяет движение глаз при чтении и гарантирует лучшую читаемость больших объёмов текста.
Это правило не применимо к языкам с направлением письма справа налево, таким как арабский, иврит, персидский и урду. В этих случаях текст лучше выравнивать по правому краю.
Совет! Заголовки и подписи могут использовать другие виды выравнивания, но основной текст должен оставаться выровненным по левому краю.
Центрирование текста или выключка по центру (Center alignment)
Хотя выравнивание текста по центру делает страницу визуально симметричной, оно замедляет чтение, особенно для пользователей с когнитивными и зрительными нарушениями. При выравнивании по центру у строк появляются неровные края, из-за чего пользователи вынуждены каждый раз искать начало следующей строки.
Используйте центрированное выравнивание для заголовков, подзаголовков, цитат, кнопок призыва к действию и других элементов, которые должны выделяться в потоке текста и привлекать внимание пользователей.
Выравнивание (выключка) по правому краю (Right alignment)
Как левое выравнивание естественно для языков, читающихся слева направо, так и выравнивание по правому краю естественно для языков, которые читаются справа налево. В мире существует 12 таких языков, среди которых арабский, иврит, урду, персидский, южноазербайджанский (распространён в регионе Азербайджана на территории Ирана), арамейский (распространён на севере Ирака, юго-востоке Турции, северо-востоке Сирии и северо-западе Ирана), дивехи (Мальдивский язык) и фула (распространён в Западной Африке, Центральной Африке и Судане).
Напротив, для языков, читаемых слева направо, правое выравнивание выглядит неестественным, так как противоречит привычному направлению чтения и письма. Подобно центрированию, оно создаёт неровные края абзацев и затрудняет быстрое сканирование текста.
Для языков, читаемых слева направо, выравнивание по правому краю подходит для:
- Подписей к изображениям и коротких фраз, чтобы акцентировать их среди других информационных блоков.
- Чисел в таблицах, чтобы облегчить их визуальное сравнение.
Длина абзаца (Paragraph length)
Популярность Твиттера с его короткими сообщениями («твиты») имеет причину: краткие блоки текста легче воспринимаются пользователями. Короткие, но содержательные абзацы проще читать и сканировать глазами, особенно если текст структурирован заголовками и подзаголовками, помогающими ориентироваться в содержимом.
Какой длины должны быть абзацы? Хотя единого мнения по поводу оптимальной длины нет, хорошей отправной точкой считается абзац длиной 2–3 предложения. Однако не стоит жёстко придерживаться этого ограничения. Важнее, чтобы в каждом абзаце раскрывалась одна мысль и сохранялась общая логика страницы. Абзацы должны создавать сбалансированную композицию и служить якорями навигации, направляя, а не путая пользователей.
Абзацные отступы (Indented paragraphs)
Абзацы не возникают сами по себе. В ранних печатных книгах переходы между абзацами обозначались символом в виде двух горизонтальных линий (||). Позже, в XVII веке, издатели стали использовать отступы — пустое пространство в начале первой строки абзаца — и переносы строк для визуального разделения текста.
Сегодня дизайнеры комбинируют отступы, переносы строк и интервалы между абзацами, чтобы разбивать текст на небольшие, удобные для восприятия фрагменты. Однако избегайте чрезмерного форматирования, совмещая сразу несколько элементов (например, абзацные отступы и увеличенные межстрочные интервалы), иначе текст станет нестабильным и его будет сложнее читать.
Буквица (Drop caps)
До изобретения книгопечатания писцы использовали буквицы (большие декоративные буквы) для обозначения начала новых глав или разделов рукописей. С появлением печати издатели продолжили использовать нарисованные вручную буквицы, чтобы придать печатным книгам вид рукописей и подчеркнуть их ценность.
Сегодня типографы и дизайнеры используют буквицы, чтобы создать элегантный, классический «книжный» стиль. Буквицы обычно появляются в начале первого абзаца статьи, главы или нового раздела.
Чтобы буквица не нарушала структуру страницы, используйте следующие подходы:
- Разместите буквицу на одной базовой линии с текстом, выделив первые слова текста капителью (small caps), чтобы переход выглядел гармонично.
- Врежьте буквицу внутрь текста, позволяя строкам обтекать её.
- Разместите буквицу слева от текста, чтобы она не нарушала структуру текстового блока.
Совет! Не используйте буквицы для обозначения каждого нового абзаца. Вместо этого используйте отступы, интервалы между абзацами и другие визуальные сигналы.
Списки (Lists)
Дизайнеры используют списки, чтобы структурировать информацию и помочь пользователям быстрее и эффективнее ориентироваться в контенте. Важно, чтобы списки были удобны для всех пользователей, включая людей с когнитивными и зрительными нарушениями.
Убедитесь, что экранные читалки могут переключаться между пунктами списка и различать вложенные списки:
- Используйте маркеры (буллеты), дефисы или звёздочки для маркированных списков.
- Используйте цифры для нумерованных списков.
- Используйте отступы (в сочетании с маркерами или цифрами) для вложенных списков.
- Избегайте ручного форматирования списков.
Убедитесь, что каждый пункт списка правильно размечен тегом <li>.
Выноски (Pull quotes)
Как следует из названия, выноска (pull quote) — это ключевая фраза, цитата или фрагмент, взятый из статьи и вставленный в виде отдельного графического элемента. В отличие от блочной цитаты (block quote), выноска повторяет точный текст статьи. Её цель — привлечь внимание читателя и выделить важную мысль, помочь пользователям бегло просмотреть контент и акцентировать главное.
Выноски обычно выделяют другим шрифтом, размером или стилем, чтобы они контрастировали с основным текстом. Как правило, они размещаются сбоку от основного контента.
Совет! Если вы используете цвет для выделения выносок, убедитесь, что контраст текста и фона соответствует требованиям доступности.
Блочные цитаты (Block quotes)
Блочные цитаты (известные также как длинные цитаты, set-off quotations) — это прямые цитаты, визуально отделённые от основного текста, так как они слишком длинные, чтобы поместить их в кавычки внутри абзаца. Внешне они выглядят как отдельный блок текста, обычно начинаются с новой строки и имеют отступ от левого края.
В отличие от выносок, блочные цитаты содержат уникальный контент (цитату из внешнего источника), который не повторяется в основной статье и выделяют авторство.
Блочные цитаты обычно выделяют с помощью другого шрифта (часто курсивного), размера или стиля, а также отступами.
Когда использовать блочную цитату вместо обычной цитаты в тексте? Обычно это цитаты, превышающие 4–5 строк. Однако требования к длине варьируются в зависимости от рекомендаций, которым вы следуете. Например, Chicago Manual of Style рекомендует использовать блочные цитаты, если цитата длиннее 8 строк или 100 слов в рукописи.тирование при цитатах более 8 строк или 100 слов в стандартном рукописном формате.
Источники
- Line spacing | Butterick’s Practical Typography
- Understanding Success Criterion 1.4.8: Visual Presentation
- How to Left, Right & Center Align Text in HTML
- How to Left, Right & Center Align Text in HTML
- Business Writing For Dummies | Google Books
- Thinking with Type | Google Books
- Hidden Gem: 4,000 Drop Caps | FCIT
- 3. Use Bullet & Number Feature to Make Lists | User Experience Office
- Pull quote — Wikipedia
- Block quotation — Wikipedia
- How to Use Block Quotations in Writing | ThoughtCo