- html5css.dev
- SEO
- SEO продвижение
- Юзабилити сайта
- Контент и его читаемость
Контент и его читаемость
Хороший текст можно испортить оформлением. Разбираем измеримые параметры читаемости и то, что чаще всего мешает дочитать до конца.
Измеримые параметры
| Параметр | Норма | Что будет при нарушении |
|---|---|---|
| Размер основного текста | от 16 px | Приходится увеличивать масштаб |
| Межстрочный интервал | 1.5–1.7 | Строки сливаются |
| Длина строки | 45–75 знаков | Глаз теряет начало следующей строки |
| Отступ между абзацами | 0.8–1.2 em | Текст выглядит стеной |
| Контраст | 4.5:1 | Не читается при ярком свете |
| Отступы от краёв экрана | от 16 px | Текст упирается в рамку |
Ритм текста
- Абзац — 2–4 предложения. Одна мысль на абзац.
- Подзаголовок каждые 150–350 слов. Разделы дают точки отдыха и опоры для взгляда.
- Чередуйте длину предложений. Подряд идущие рубленые фразы читаются так же тяжело, как длинные.
- Чередуйте форматы: абзац, список, таблица, врезка. Однородный текст усыпляет.
- Первое предложение раздела отвечает на его заголовок — читатель сразу понимает, стоит ли читать дальше.
Подробнее о структуре — в уроке о структуре текста.
Выделения
| Приём | Когда | Чего избегать |
|---|---|---|
| Полужирный | Ключевая мысль абзаца | Половина текста жирным — выделение перестаёт работать |
| Курсив | Термин при первом упоминании, цитата | Целые абзацы курсивом — читаются хуже |
| Врезка | Предупреждение, оговорка, совет | Врезка на каждый абзац |
| Моноширинный | Команды, код, значения | Обычные слова «для акцента» |
| Подчёркивание | Только ссылки | Подчёркнутый не-ссылочный текст путает |
| КАПС | Практически никогда | Читается медленнее и воспринимается как крик |
Изображения в тексте
- Иллюстрация объясняет, а не украшает: схема, скриншот, фото процесса.
- Подпись
figcaption— её читают чаще основного текста. - Заданы размеры — иначе текст «прыгает» при загрузке.
- Alt описывает изображение обычной фразой.
- Данные не только картинкой: таблицу или цифры дублируйте текстом — см. урок об изображениях.
- Стоковые иллюстрации «для красоты» только утяжеляют страницу.
Длинные материалы
- Оглавление из H2/H3 — читатель видит объём и переходит к нужному.
- Индикатор прогресса чтения — необязателен, но снимает ощущение бесконечности.
- Раздел «Итог» с выводом в первой фразе.
- Кнопка «наверх» после нескольких экранов.
- Оценка времени чтения — помогает решиться начать.
Итог
Читаемость складывается из измеримых вещей: 16 px, интервал 1.5, строка до 75 знаков, абзац в 2–4 предложения и подзаголовок каждые несколько абзацев. Выделения работают, пока их мало. Дальше — поиск по сайту.
Частые вопросы
Какой размер шрифта нужен для основного текста?
От 16 px на мобильных и 16–18 px на десктопе, межстрочный интервал 1.5–1.7. Мельче 16 px в полях ввода вызывает автоматический зум в iOS.
Какой длины должна быть строка?
45–75 знаков. Слишком длинная строка утомляет: глаз теряет начало следующей. На широких экранах колонку чтения ограничивают, а не растягивают на всю ширину.
Можно ли выравнивать текст по ширине?
Не стоит. Без переносов выравнивание по ширине создаёт «реки» из пробелов, особенно на узком экране. Выравнивание по левому краю читается лучше.
Что делать с длинными материалами?
Разбивать подзаголовками, добавлять оглавление, чередовать текст со списками и таблицами. Материал на 2000 слов сплошным текстом не дочитывают независимо от качества.