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

Вы написали гениальную статью. Но никто её не дочитал. Почему? Потому что глаза устали ещё на первом абзаце.

Шрифт нечитаемый, размер мелкий, цвет сливается с фоном, картинки — лучше бы их не было вовсе.

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

Самые читаемые шрифты — те, которые вы не замечаете.

Неудачный выбор: рукописные, узкие, с засечками как в газетах 19 века, или, наоборот, слишком дизайнерские.

Удачный выбор:

• На сайте без засечек: Roboto, Inter, Arial, Montserrat.
• На бумаге с засечками для длинных статей: Georgia, PT Serif.

Правила:

• На сайте — один шрифт. Максимум два (один для заголовков, другой для текста).
• Не используйте шрифты «под старину», «под пишущую машинку» и те, у которых разные начертания в одном слове.

Проверка: отойдите от экрана на шаг. Если буквы сливаются в кашу — шрифт не годится.

Размер шрифта измеряется в пикселях. Один пиксель — это точка на экране. Чем больше цифра, тем крупнее буквы.

На компьютере (десктопе) базовый размер текста — 16–18 пикселей. На смартфоне — 14–16 пикселей.

Почему именно так? Это многолетний стандарт веб-дизайна. Его используют Google, Apple, Яндекс, Тинькофф и большинство крупных сайтов. При 16 пикселях текст читается без напряжения, глаза не устают. На смартфоне 14 пикселей достаточно, потому что экран близко.

Если сделать меньше 14 пикселей, клиент начнёт щуриться или приближать экран. Он ещё не прочитал ни слова, а уже раздражён.

Меньше 14 пикселей допустимо для подписей под картинками, сносок и мелких технических элементов. Весь остальной текст должен быть крупнее.

Размер заголовка зависит от его важности:

• H1 — 52–72 пикселя.
• H2 — 22–28 пикселей.
• H3 — 18–22 пикселей.

Эти цифры — не жёсткий закон, а рабочий диапазон из практики и тестов. Они решают три задачи:

1. Показывают иерархию. Читатель сразу видит, что главное, а что — уточнение.
2. Не напрягают зрение. Заголовки не сливаются с текстом, но и не выглядят кричащими.
3. Адаптируются под экраны.

Не делайте H1 больше 72 пикселей, если только у вас не лендинг с одним заголовком. В обычной статье огромный заголовок пугает.

Межстрочный интервал — это расстояние между строками. Задаётся не в пикселях, а множителем от размера шрифта.

Оптимальный диапазон — от 1,4 до 1,6.

Почему так? Интервал напрямую влияет на читабельность: при интервале меньше 1,4 строки напирают друг на друга, глаза путаются. При интервале больше 1,6 строки разваливаются, взгляд теряет строчку.

Текст должен контрастировать с фоном. Но чисто чёрный на белом лучше не делать, чтобы избежать рези в глазах. Лучше всего — тёмно-серый на белом или чёрный на сероватом фоне.

• Основной текст — #222222 и #444444 на белом фоне.
• Второстепенный (подписи, сноски) — #7C7C7C или #A5A5A5.
• Ссылки — один цвет, отличающийся от основного и констрастный фону, желательно с подчёркиванием.

Не заставляйте клиента всматриваться. Ему нужно сохранить силы на смысл текста.

На компьютере строка не должна быть длиннее 600–700 пикселей, а лучше — 500–600 пикселей.

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

Решение: ограничить ширину текстового блока: через настройки конструктора или визуальные стили кода (CSS).

На смартфоне этой проблемы нет: строки режутся автоматически по ширине экрана.

Никто не читает многокилометровые полотна. Читатель сканирует глазами. Ваша задача — помочь ему найти главное.

• Короткие абзацы. 2–4 предложения. В одном абзаце — одна мысль.
• Подзаголовки. Каждые 500–700 знаков. Они разбивают текст на смысловые части и дают глазу отдохнуть.
• Маркированные списки. Идеальны для перечисления фактов и этапов. Информация усваивается быстрее.
• Выделение жирным. Не более одного-двух слов на абзац. Только самое важное.

Цитаты или выносы в отдельный блок. Если фраза сильная и может работать сама по себе.

Картинка в статье нужна не для красоты, а для пользы. Она должна что-то пояснять или показывать. Выбирайте изображение хорошего качества: резкость, контраст, цвет, яркость — всё должно быть в балансе.

И всегда добавляйте alt-текст — короткое описание картинки для поисковых систем. Это помогает роботам понимать содержание и приводить пользователя на вашу страницу.

Если в статье есть кнопка (подписка, скачать, заказать) — она должна быть видна.

• Цвет — контрастный к фону (чёрная на белом или оранжевая на тёмном).
• Размер — не меньше 40–50 пикселей по вертикали.
• Текст — короткий, с призывным глаголом: «Скачать чек-лист», «Записаться на аудит», «Получить консультацию».

Не нужно писать безликие «Отправить», «Кликнуть» или просто «Узнать».

Клиент читает не мозгом, а глазами. Если глаза устают — мозг отключается. Вы потеряли покупателя.

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