Як правильно оформити текст на сайті: що миліше оку і легше для сприйняття

Як показує практика в 90% випадків вся користь від виплеканої статті розбивається об стіну невірного оформлення тексту.

Якщо допис виглядає, як стара інструкція з діловодства, то будьте готові до того, що матеріал до кінця дочитають хіба що ваші фанати. 

Так, вас не стануть читати, якщо:

• текст не має гарного заголовка;
• текст викладений однією великою «цеглиною»;
• текст не має структурованих абзаців і підзаголовків до них;
• текст написаний шрифтом, що погано сприймається оком;
• текст оформлений у невідповідній кольоровій гаммі.

Крок 1: структура тексту, заголовки і підзаголовки

Яким повинен бути заголовок: довгим чи коротким – питання спірне. Одне достеменно точно доведено: заголовку – бути! Точний і такий, що відповідає суті статті.

Добре, якщо в назві згадуються ключові слова – слова, які вводять користувачі в рядок пошуковика. В такому разі ваш текст швидше знайдуть ваші читачі, коли шукатимуть відповіді на свої питання.

Кожний текст повинен бути розбитий на абзаци по 2–3 речення (3–5 рядочків). Один абзац – одна завершена думка. Якщо текст має обсяг більше 2 тисяч символів, варто його розбити на смислові блоки з підзаголовками.

Як визначити кількість знаків у тексті, дивіться на малюнках.

Якщо виділити частину тексту, то побачимо статистику по цій області

Обов'язково використовуйте списки. Списки бувають нумеровані і ненумеровані. Обирати вам, але всюди, де використовуєте перерахування більше двох елементів – послуговуйтесь списками. Зі списками текст виглядає більш логічним і довершеним. Він легше сприймається читачем і краще сприймається пошуковими системами.

В налаштуваннях є кілька варіантів маркерів для списків

Я маю "дурну" звичку – за нагоди передивляюсь, як виглядає мій текст на сайті. І якщо виклад матеріалу на сайт не моя справа, то дуже боляче дивитись, коли гарно структурований і оформлений текс у Word перетворюється на безформенну ряднину в Інтернеті.

Для прикладу: перше фото – мій файл із структурованим текстом, а друге – скан із сайту. Визначте просто на око – що приємніше виглядає і на чому погляд може зупинитись?

Крок 2: визначальна роль шрифта, його кольору і розміру

Хочете здивувати читача і тому використовуєте оригінальні шрифти? Це можна. Але чи впевнені ви, що такий текст буде однаково гарно виглядати на моніторі комп'ютера чи ноутбука і на дисплеї смартфона? Рідкісні шрифти краще не використовувати.

Щоб матеріал гарно читався з екрану, використовуйте шрифти без засічок:

Віддавайте перевагу поширеним шрифтам, які є доступними у всіх браузерах, наприклад, Arial та Calibri.

Розмір шрифта для основного тексту – 12–14 кеглів, для підзаголовків – 14–16 кеглів, для основного заголовку – 16–18 кеглів.

Налаштування Word на панелі завдань

Налаштувати розмір та форму шрифта у Word допоможуть прості підказки на панелі завдань зверху. Для сайтів, запущених на WordPress та Joomla! всі стандартні налаштування вже зроблено і коригувати їх доведеться вручну шляхом втручання у код розмітки. 

Яким має бути колір шрифта та колір фону? Відповідь однозначна – літери темні, фон світлий. Ні, не чорні літери по білому фону – так очі швидко втомляться і захочеться чим швидше закрити вкладку.

Обирайте темно-сірий шрифт на світло-сірому фоні (чи щось подібне). Для прикладу просто зверніть увагу на текст, який ви зараз читаєте.

І ще одне важливе зауваження. Не намагайтесь заповнити текстом весь простір сторінки. Заповненню підлягає не більше 80% простору. Не допускайте утворення важких для читання «стін з багатьох літер».

Списки і абзаци додадуть тексту легкості, але зверніть увагу на ширину сторінки і міжрядковий інтервал. Оптимальна кількість знаків у рядочку – 75–100. В іншому випадку оку буде важко слідкувати за рядками.

Що стосується міжрядкового інтервалу, то його оптимальна величина залежить від розміру шрифта і варіюється від 130% до 160% величини літер. Знову ж таки для WordPress та Joomla! все закладено за умовчанням і змінити це власними силами не дуже просто. А щоб побачити різницю і визначити на око, чи "правильний" у вас на сайті міжрядковий інтервал, зверніться до Word – тут налаштування простенькі.

Налаштування міжрядкового інтервалу та інтервалу між абзацами

А ще, намагайтесь привернути увагу читача гарними емоційними (або смисловими) картинками. Ми – в більшості своїй – візуали, врахуйте це.

По секрету:

• Підписи під картинками читають у 98% випадків. Гріх цим не скористатись.

Ви теж прочитали цей текст? Значить, правду кажуть...

На останок скажу, що гарне оформлення тексту може стати вашим добрим помічником і привернути увагу читачів. Але знайте міру! Адже можна так «пересолити», що навіть якщо матеріал суперкорисний і цікавий, пістряве розмаїття сторінок сайту може відлякати навіть прихильників.

Отже, підходимо до всього «без фанатизму» і буде нам щастя!