Як оформити текст, щоб його було зручно читати?
Чому відвідувачі йдуть із сайту, не дочитавши текст: правила типографіки та структури, які утримують увагу і допомагають знайти відповідь.
Людина не читає веб-сторінки послідовно, як книгу. Вона переглядає текст: шукає точки опори для уваги, перевіряє, чи варто витрачати час. Якщо не знаходить відповідь на своє запитання — йде до конкурента.
Розберемо, як налаштувати дизайн тексту так, щоб клієнту хотілося залишатися на сторінці і заглиблюватися у ваш матеріал.
Налаштуйте технічні параметри тексту
Зручність читання залежить від особливостей зорового сприйняття. Коли людина дивиться на екран, очам потрібно фіксуватися на рядку і легко знаходити початок наступного. Якщо рядок занадто довгий, погляд при поверненні «збивається» і втрачає лінію. Якщо занадто короткий — доводиться занадто часто перескакувати вниз, що створює зайву напругу.
Щоб краще розібратися в темі, також перегляньте Як постмастери допомагають зрозуміти, чи читають маркетингову розсилку, Чому вашому сайту потрібен лендинг для «відмовників» та Коли автоматизація на сайті шкодить, а не допомагає.
Є «золотий стандарт» веб-типографіки, який варто взяти на озброєння
Ширина рядка
В один рядок має вміщуватися від 35 до 95 символів із пробілами. При 60 символах текст читається найкомфортніше. Якщо рядок ширший, читач швидше втомлюється.
Розмір шрифту для тексту
Для читання з екрана зручний шрифт розміром 18–19 пікселів. Дрібний текст змушує напружувати зір, що викликає фізичний дискомфорт.
Розмір заголовків
Заголовки мають бути більшими на 30–60% — так формується візуальна ієрархія, і читач розуміє, де починається нова тема.
Міжрядковий інтервал
Відстань між рядками має бути достатньою, щоб око легко знаходило наступний рядок. У веб-типографіці зазвичай використовують коефіцієнт 1,3–1,7 від розміру шрифту. Наприклад, при розмірі 20 пікселів комфортний міжрядковий інтервал — 26–30 пікселів.
Відступи: відстань між абзацами
Рядки не повинні «липнути» один до одного. Читач має чітко бачити межі між абзацами. Відстань між текстовими блоками повинна бути щонайменше вдвічі більшою за міжрядковий інтервал. Це створює візуальну паузу і дає мозку час опрацювати прочитане.
Зверніть увагу, скільки «повітря» залишено між заголовками і текстом блоку, між пунктами списку:
Кількість рядків в одному абзаці також має значення. Ідеальний обсяг — 5 рядків. Великі масиви тексту лякають, а надто короткі фрази в один рядок заважають уловити зв’язок думок.
Контраст тексту і фону
Текст має чітко виділятися на фоні сторінки. Якщо контраст слабкий, очі швидко втомлюються, а інформація читається гірше — навіть при хорошому шрифті і верстці.
Перевіряйте контраст за допомогою онлайн-калькуляторів. Вони показують, чи відповідає поєднання тексту і фону вимогам доступності (WCAG) і наскільки комфортно читати такий текст.
WebAIM Contrast Checker — онлайн-калькулятор, у якому можна подивитися, як виглядатимуть кольорові шрифти на різних фонах.
Структура тексту
Більшість відвідувачів не читають тексти повністю — вони сканують сторінку в пошуку відповіді на своє запитання. Якщо людина швидко знаходить потрібну інформацію і йде, це означає, що структура тексту спрацювала.
Розділіть текст на розділи з підзаголовками
Розбийте матеріал на змістові блоки з зрозумілими підзаголовками. Читач має по заголовку зрозуміти, про що йдеться в розділі. Підзаголовки вибудовують логіку викладу і створюють навігацію по тексту.
У статті має бути один заголовок першого рівня (H1) — це назва матеріалу. Далі використовуйте підзаголовки другого (H2) і третього рівня (H3).
Підзаголовки краще читаються, якщо вони узгоджені з основним заголовком і витримані в єдиному стилі.
Підготуйте зміст для великих статей
Якщо стаття об’ємна, додайте на початку зміст із якорними посиланнями. Читач зможе одразу перейти до потрібного розділу. Це особливо корисно в добірках, дайджестах і інструкціях.
Сформулюйте висновок із короткою вижимкою
У кінці матеріалу підсумуйте головне — коротко перелічіть основні тези. Такий блок допомагає закріпити прочитане і дає змогу швидко освіжити інформацію тим, хто повернеться до статті пізніше.
Абзаци тексту
Перше речення абзацу — найважливіше. Воно має нести зміст навіть без решти тексту. Це допомагає при скануванні: читач переглядає початки абзаців і вирішує, чи варто читати далі.
Виділяйте в тексті жирним шрифтом:
— ключові терміни при їх першому згадуванні в матеріалі;
— важливі цифри і факти, на які варто звернути увагу читачеві;
— результати та висновки.
Не виділяйте більше 10% тексту, інакше акценти втратять сенс. Якщо важливо все — значить, нічого не важливо.
Марковані та нумеровані списки
Використовуйте нумеровані списки, коли важлива послідовність, а марковані — для переліків, де порядок не має значення. Списки роблять текст більш «повітряним» і допомагають швидко знайти ключові пункти при швидкому перегляді.
Візуальні елементи
Люди розглядають зображення довше, ніж читають текст. Наш мозок краще обробляє візуальну інформацію — це еволюційна особливість, яку варто використовувати.
Ілюстрації та фотографії
Використовуйте візуальні елементи там, де вони дійсно допомагають зрозуміти зміст: фотографії, схеми, графіки або іконки, які підсилюють або пояснюють думку.
У бізнес-блозі доречні інфографіка, діаграми та ілюстрації, які дають читачеві більше розуміння, ніж просто текстовий опис.
Фірмовий стиль
Якщо всі ілюстрації виконані в єдиній кольоровій гамі або з використанням характерних елементів, це підвищує впізнаваність бренду. Читач запам’ятовує, що корисну інформацію отримав саме від вас.
Стокові фото
Уникайте шаблонних стокових зображень — вони роблять матеріал безликим. Якщо фото взяте з іншого джерела, вкажіть автора у підписі.
Обкладинки та слайдери
Велика обкладинка або фото у слайдері в шапці сайту допомагає запам’ятати матеріал. Коли у користувача відкрито багато вкладок, він швидше повернеться, якщо побачить яскраве і впізнаване зображення із заголовком.
Відео
Відео доповнює статтю і спрощує сприйняття складних тем. Розміщуйте його так, щоб воно відтворювалося прямо на сторінці, без переходу на інші платформи. Більшість CMS дозволяє вбудовувати відео за посиланням.
Схеми та діаграми
Схеми, графіки та діаграми можуть замінити тисячу слів, якщо вони зрозумілі без пояснень. Простий тест: покажіть схему колезі або знайомому і попросіть пояснити, що він бачить. Якщо не може — її потрібно переробити.
Посилання, цитати та врезки
Гіперпосилання
Вставляйте посилання на інші матеріали блогу, дослідження або продукти в єдиному форматі. Якщо згадуєте термін, який уже пояснювали раніше — додайте посилання. Не пишіть «клікніть тут» або «читайте за посиланням». Посилання має бути на словах, які описують зміст цільової сторінки.
Цитати
Оформлюйте цитати в єдиному стилі: оберіть колір, шрифт і підкладку та використовуйте їх у всіх матеріалах. Візуально виділені цитати експертів привертають увагу і підвищують довіру.
Врезки та додаткові блоки
Врезки — це блоки з формами підписки, посиланнями на інші матеріали, важливими цифрами або фактами. Вони доповнюють основний текст і допомагають вирішувати бізнес-задачі: збирати контакти, збільшувати глибину перегляду, направляти читача до продуктів.
Розміщуйте врезки за змістом: наприклад, цифри та факти — поруч із абзацом, до якого вони відносяться. Так читач отримує додатковий контекст без відриву від тексту.
Мобільна адаптація
Читачі заходять на сайт із телефонів, планшетів і ноутбуків. Текст має коректно відображатися на всіх екранах. Це називається адаптивна типографіка.
Перевіряйте зручність перегляду сторінки на мобільних:
— розмір шрифту не зменшується при адаптації — мінімум 16 пікселів;
— рядки не розтягуються на всю ширину екрана — комфортна довжина зберігається;
— відступи не стискаються до нуля — користувачу потрібен простір для прокрутки;
— таблиці не виходять за межі екрана — передбачена горизонтальна прокрутка або альтернативне відображення.
Простий спосіб перевірки — відкрийте статтю на своєму телефоні і спробуйте прочитати її, стоячи в транспорті. Якщо доводиться напружувати зір або збільшувати масштаб — розмір шрифту потрібно доопрацювати.
Правила для україномовних текстів
Типографіка і правила оформлення для латиниці та кирилиці відрізняються.
Правила оформлення текстів кирилицею:
— використовуйте «ялинки» для лапок, а не англійські “подвійні”;
— тире має бути довгим (—), а не дефісом (-);
— дати і числа оформлюйте однаково: 15 000, а не 15000 — з пробілом для розділення розрядів;
— скорочення пишіть за правилами: «і т. д.», «у т. ч.».
Ці деталі рідко усвідомлюються читачем, але саме вони формують відчуття якості тексту і уваги до дрібниць. Акуратне оформлення допомагає читати текст без зайвого напруження.
Коротко про правила оформлення тексту
Щоб стаття на вашому сайті працювала на бізнес, дотримуйтеся цих принципів:
Типографіка
— тримайте ширину рядка в межах 35–95 символів, використовуйте шрифт 18–19 пікселів і достатній міжрядковий інтервал;
Візуальне «дихання»
— робіть відступи між абзацами, обмежуйте їх довжину 5–7 рядками і забезпечуйте високий контраст тексту з фоном;
Структура
— використовуйте підзаголовки, зміст і списки, щоб допомогти читачеві швидко переглянути текст;
Ілюстрації
— додавайте зображення, інфографіку та схеми кожні 75–100 слів для утримання уваги;
Акценти
— виділяйте головне жирним шрифтом або кольором, використовуйте врезки для цитат і ключових цифр.
Правильне оформлення — це повага до часу і комфорту вашого клієнта. Коли текст легко читається, довіра до компанії зростає автоматично.
