Оформление текстов

Для того, чтобы правильно оформить текст любого документа, нужно понять, каким образом мы читаем текст:

Оформление текстов

2 режима восприятия визуальной информации:

1. режим захвата, когда мы мельком глазами по диагонали глядим на текст и понимаем суть;

2. последовательное изучение, требующее мыслетоплива.

В идеале, необходимо сделать так, чтобы в документе самое важное “загружалось” в голову при прочтении.

Последовательное изучение похоже на “змейку”:

Оформление текстов

Согласитесь, что такой текст читать до конца не хочется. Попробуем решить вопрос сбережения мыслетоплива, используя всем известный инструмент “Сделайте шрифт крупнее!”.

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

Правила быстрого прочтения текста:

  • буквы меньше, текста - больше;
  • сократить строчку на 1/3.
  • увеличить интервал между строчками, а также ширину строки;
  • разбить “змейку” на “змеенышей”;
  • сделать больше свободного места по периметру “змейки”.

Основываясь на правилах, получаем вот такой текст:

Оформление текстов

Теперь гораздо легче читать. В нем можно выделить какую-то ключевую мысль.

Улучшаем читаемость текста по шагам:

1. Возьмем кирпич текста:

Оформление текстов

и увеличим его поля по краям. Обратите внимание, что на макетах дорогих брендов всегда очень много свободного места:

Оформление текстов

На сайте “Тинькофф” в графах заполнения данных могут поместиться целых три строчки, но разработчики оставили их широкими:

Оформление текстов

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

2. Правило уменьшения ширины строки на 1/3 меньше применяется в редких случаях. Чтобы его использовать, нужно знать определенное количество символов, которое должно помещаться в одной строке. Это количество определяется в индивидуальном порядке и не носит универсальный характер.

Оформление текстов

Обратите внимание, что тест, отделенный красной стрелкой предназначен для поисковых роботов, все остальное же - для обычный посетителей сайта.

3. Пример удачного межстрочного интервала:

​Идеальный деловой документ.
​Идеальный деловой документ.
<p>Разбили условно на части, так сказать превратили его в “змейку”. </p>​

Разбили условно на части, так сказать превратили его в “змейку”.

Этот же текст делим на “змеенышей”:

<p>Довели документ на максимально легкий для прочтения уровень. </p>​

Довели документ на максимально легкий для прочтения уровень.

Все подробности в видео:

1313
2 комментария

Спасибо большое за информацию, очень интересная пища для размышлений 😄

С удовольствием посмотрю видео! Спасибо