Как улучшить читабельность текста?

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

Сразу же оговорюсь, в статье речь идёт преимущественно об оформлении больших массивов текста (например, статей или публикаций), а не о:

• повышении уровня конверсии или продвижении;
• написании рекламных продающих текстов;
• сложных интерфейсах приложений или сервисов.

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

Современные тренды

Большинство статей на эту тему написаны более 4–5 лет назад. В случае, если мы говорим о веб-дизайне и эстетике, это довольно большой срок, учитывая, что новые тренды врываются в нашу жизнь каждые 2–3 года.

Достаточно взглянуть на оформление западных сайтов пятилетней давности и их современные аналоги. Почему именно западные? На мой взгляд, большинство сегодняшних трендов в веб-дизайне зародились в первую очередь именно там, и только спустя несколько лет добрались до нас.

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

Шрифты с засечками и без

Бытует мнение, что шрифты с засечками (Times New Roman, Georgia, Garamond) ужасно сказываются на читабельности текста. Советую вам забыть об этом раз и навсегда. Дизайнеры всего мира так и не смогли прийти к общему решению этого вопроса.

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

Стоит отметить, что в данном случае речь идёт о начертаниях, которые успешно проверены временем. Большинство шрифтов, созданных профессиональными дизайнерами для набора больших объёмов текста, отлично справляются со своей задачей.

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

Когда использовать шрифты с засечками, а когда — без?

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

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

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

Измеряемые характеристики текста

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

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

Размер шрифта — кегль

Несколько лет назад самым распространённым размеров шрифта для обычного текста был 12–14px — данные значения считались оптимальными для оформления текстов статей. На сегодняшний день многие издания стали иначе подходить к оформлению своих материалов. Существует два способа указания размеров шрифта:

• фиксированное значение — сегодня, на мой взгляд, рекомендуемым значением является 18–22px в зависимости от ресурса и его аудитории;
• указание размера в процентах — в данном случае размер шрифта рассчитывается браузером в зависимости от указанного системного значения.

Как видите, наметилась чёткая тенденция к увеличению размера шрифтов на сайтах, регулярно публикующих статьи и прочие объёмные материалы. Например, размер данного текста составляет около 18px на стандартном мониторе (может изменяться в зависимости от устройства).

Высота строки

На мой взгляд, высота строки — один из ключевых параметров, влияющих на восприятие текста. Здесь всё просто — интерлиньяж (так по-другому называют эту характеристику) должен быть в 1.5–1.8 раз больше размера самого текста.

То есть, если размер шрифта на вашем сайте равен 18px, то высоту строки необходимо указать в районе от 27px до 32px.

Разметка текста, вёрстка

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

Длина строки

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

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

Размер абзацев и расстояние между ними

Количество предложений и строк в одном абзаце также имеет важное значение. Старайтесь размещать в одном абзаце не более 4–5 предложений. Это поможет вам сконцентрировать внимание читателей на главной мысли, и облегчить восприятие всего текста.

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

Дополнительные элементы

Помимо описанных выше приёмов имеется ряд других способов, существенно упрощающих восприятие информации на странице.

• Заголовки — перед началом написания статьи пропишите чёткую структуру разделов и подразделов. Таким образом вы сделаете проще жизнь и себе, и вашим читателям;
• Списки — для того, чтобы повысить удобство восприятия и запоминаемость информации используйте списки: нумерованные или обычные, с маркерами;
• Изображения — разбавьте скучные абзацы парой-тройкой изображений, иллюстрирующих то, о чём вы говорите. Многим пользователям Интернет намного проще пробежаться по картинкам, нежели вчитываться в тяжёлые длинные абзацы;
• Полужирное начертание — в рамках одного абзаца или раздела вы можете выделить полужирным начертанием главную мысль, чтобы ещё больше повысить удобство восприятия информации, излагаемой в ваших публикациях.

Что в итоге?

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

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

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