Рекомендации по вёрстке текста

Как оформить текст, чтобы его дочитали до конца

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

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

Как я читаю текст

Каждое утро я захожу на сайт Meduza и читаю новости. Я понаблюдала за собой и поняла, какие тексты мне нравятся, и как я подсознательно выбираю, что прочитать. Из этих этапов складывается моё чтение:

Смотрю на картинки и заголовки

Первое, что при просмотре текста бросается мне в глаза — это картинки и заголовки. Я быстро пробегаюсь по ним и уже примерно представляю, о чём пойдет речь. Если они меня заинтересовали, я открываю новость в новой вкладке и читаю её.

Сканирую текст новости взглядом — удобно ли читать?

Я не буду читать текст, если он написан мелким шрифтом, да ещё уплотнен настолько, что строки сливаются в одну большую картинку. А ещё я не буду читать текст, если шрифт тяжело разобрать, например, если весь текст написан каллиграфическим шрифтом. Но я точно прочитаю текст, если он разделён на небольшие блоки и абзацы, выделен заголовками и подзаголовками, написан «удобным» для меня шрифтом.

Читаю первые строки абзацев

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

Всё это происходит за считанные секунды, но от них зависит, прочитаю я текст или нет. Поэтому важно уже в эти первые секунды завладеть вниманием читателя.

Читать должно быть комфортно, иначе я трачу силы на попытки прочесть текст, а не на его смысл.

Что такое вёрстка?

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

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

Мы собрали 15 рекомендаций по вёрстке, которые помогут вам оформить текст так, чтобы его дочитали до конца.

15 рекомендаций по вёрстке

Оставляйте «воздух»

«Воздух» — это пространство между блоками текста, между текстом и картинками, а также поля страницы.

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

Очень важны поля страницы. Они играют роль рамки и помогают воспринимать то, что внутри. К тому же поля — это технический элемент. Их ширина зависит от метода скрепления продукта (например, широкие поля нужны при скреплении спиралью).

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

Рекомендации по вёрстке текста

Размещайте текст в колонки

Колонки — это узкие столбцы текста на всю высоту страницы, которые расположены на странице друг рядом с другом.

Широкие блоки текста читать неудобно — приходится поворачивать голову, чтобы дойти до конца строки, и следить, чтобы взгляд случайно не перескочил на другую. Если текст размещён в колонки, взгляд читателя охватывает текст за один раз.

При вёрстке колонок обратите внимание на следующее:

  • Ширину колонки выбирайте в зависимости от шрифта: чем шрифт крупнее, тем колонка шире.
  • Расстояние между колонками делайте больше межстрочного интервала, чтобы визуально разграничить колонки.
  • Сочетайте колонки разной ширины.

Рекомендации по вёрстке текста

Используйте заголовки и подзаголовки

Заголовки и подзаголовки структурируют текст, визуально делят его на небольшие блоки, рассказывают о содержании блока.

При первом просмотре читатель «зацепится» за подзаголовки и получит краткую информацию о содержании текста. Заголовки интригуют и повышают желание прочесть текст.

При использовании заголовков и подзаголовков не забудьте:

  • Выделить их среди основного текста (например, другим начертанием или шрифтом).
  • Оформить заголовки в едином стиле.
  • Сделать отступы по вертикали до и после заголовков (отступ до заголовка делаем больше отступа после — так текст будет логическим продолжением заголовка).

Рекомендации по вёрстке текста

Разбивайте текст на абзацы

Абзац — это часть текстового блока, который ограничен заголовком или подзаголовком. Абзац состоит из небольшого количества строк (зависит от ширины колонки — чем шире колонка, тем меньше строк должно быть в абзаце).

Читать «простыню» текста — не самое приятное и простое занятие. А короткие абзацы читатель охватит одним взглядом и прочитает с большей вероятностью.

При разделении блока текста на абзацы обращайте внимание на смысл. Деление не должно затруднять понимание текста. Расстояние между абзацами текста делайте равным двойному межстрочному расстоянию.

Рекомендации по вёрстке текста

В рекламных материалах используйте асимметрию

Асимметрия в композиции — это несимметричность страницы относительно вертикали. То есть блоки текста, картинки, заголовки располагаются на странице несимметрично.

Симметрия делает композицию скучной и однообразной. Она не обращает на себя внимание читателя и быстро прочитать её точно не получится.

Асимметрия делает страницу «живой», читатель обращает на неё внимание — на ней есть, за что «зацепиться» взгляду.

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

Рекомендации по вёрстке текста

В официальных материалах используйте симметрию

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

Располагайте блоки текста на странице симметрично относительно вертикали. Выравнивайте текст и заголовки по центру, чтобы придать документу официальность.

Рекомендации по вёрстке текста

Подбирайте и располагайте картинки грамотно

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

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

  • Подбирайте картинки к смыслу текста.
  • Располагайте картинки так, чтобы они вели читателя по логике текста.
  • Определяйте размер картинки её значением, а не вашим желанием заполнить свободное пространство.

Рекомендации по вёрстке текста

Будьте осторожны с цветом

Если текст — это радуга из цветов и оттенков, нежелание читать текст возникнет уже при первом просмотре. Чтобы этого не произошло, пользуйтесь «правилом трёх» — при оформлении в общей сложности выбирайте не более 3-х оттенков цвета.

Рекомендации по вёрстке текста

Используйте не более 3-х шрифтов

Большое разнообразие шрифтов мешает человеку читать текст. В этом случае ему сложно перестроиться с одного начертания на другое.

Используйте «правило трёх» — выбирайте не более 3-х шрифтов.

Рекомендации по вёрстке текста

Используйте сочетаемые шрифты

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

При выборе сочетаемых шрифтов руководствуйтесь следующими правилами:

  • Выбирайте контрастные шрифты — те, что одинаково выглядят, плохо смотрятся вместе.
  • Выбирайте шрифты с одинаковым или похожим настроением — не стоит смешивать «деловые» шрифты с «развлекательными».
  • Комбинируйте шрифты с засечками и без засечек (без засечек подойдут для заголовков, с засечками — для текстовых блоков, так как взгляд за них «цепляется» и не «скачет» по строкам).

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

Рекомендации по вёрстке текста

Используйте комфортные кегль и интерлиньяж

Кеглем называется размер шрифта, а интерлиньяжем — межстрочный интервал.

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

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

Рекомендации по вёрстке текста

Выбирайте шрифты, подходящие к смыслу текста

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

Рекомендации по вёрстке текста

Переносите текст правильно

Неправильные переносы текста усложняют чтение. Расставлять в тексте переносы слов на другую строку важно, следуя следующим правилам:

  • Используйте переносы слов не более чем в 3-х строках подряд.
  • Оставляйте знаки препинания на предыдущей строке.
  • Переносите целиком цифры, которые составляют одно число, и существительные, которые к этим цифрам относятся (1981 год, 25 лет).
  • Переносите на новую строку предлоги, частицы и междометия.

Если вы переносите заголовок:

  • Разбейте заголовок на строки там, где стоят логические паузы.
  • Сделайте вторую строку заголовка короче первой.
  • Переносите слова полностью.
  • Переносите предлоги, союзы и междометия на новую строку.

Рекомендации по вёрстке текста

Избегайте «висячих» строк

«Висячая» строка появляется, если:

  • Весь абзац на одной странице, а одна неполная строка на другой.
  • Строка в конце абзаца состоит из неполного слова.

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

Рекомендации по вёрстке текста

Используйте выноски

Выноска — это небольшой блок текста, который располагается вне основного текста. В него обычно располагают важный и привлекающий внимание текст.

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

Если вы делаете выноски, обязательно создайте яркий контраст выноски и основного текста — хорошо её выделите среди него. Вот несколько способов, как можно это сделать:

  • Создайте широкое белое пространство вокруг неё.
  • Выделите кавычками, которые гораздо крупнее самого текста.
  • Оформите фон выноски контрастным цветом.
  • Заключите выноску в рамку.
  • Выделите другим шрифтом.

Рекомендации по вёрстке текста

Несоблюдение рекомендаций

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

P.S. И помните. Не каждый текст читатель должен прочитать. Какую-то информацию нужно от него спрятать, но оставить при этом на виду. В этом тоже помогут перечисленные рекомендации по вёрстке.