Читабельність на сайті

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

1. Не використовуйте занадто багато різних розмірів шрифту
2. Використовуйте рубані шрифти для основного тексту
3. Не використовуйте багато різних гарнітур
4. Акценти
5. Вирівнювання
6. Контраст
7. Використання великих літер
8. Простір
9. Розміри текстових блоків

Не використовуйте занадто багато різних розмірів шрифту

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

З цієї причини не рекомендується використовувати більше 3 різних розмірів шрифту в основному тексті сторінки (головний заголовок, підзаголовок, зміст). Це стосується лише основного тексту, інші елементи сторінки, такі як навігація, футер, форми можуть використовувати різні розміри шрифту.

Використовуйте рубані шрифти для основного тексту

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

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

Шрифти з зарубками

Шрифти з зарубками (Антиква) служать вірою і правдою протягом століть. Вони виглядають старомодно і представницько. Зарубки на кінцях букв спрямовують погляд від букви до букви, роблячи читання більш рівномірним і простим, але це працює тільки на великому дозволі при друку. При маленьких дозволах складність літер зменшує їх розбірливість, а зменшена відстань між буквами ще більше погіршує становище і уповільнює читання. Шрифти з зарубками більше підходять для великих написів.

Рубані

Рубані шрифти (Гротески, гротескові шрифти) більш прості і не мають зарубок. Вони виглядають сучасними і відкритими. Рубані шрифти набагато більш перебірливі на екрані монітора, ніж готичні, завдяки своїй простоті вони легко відображаються на низькій роздільній здатності.

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

На думку багатьох дизайнерів, Verdana кращий шрифт для основного тексту сторінок. Гарнітура Verdana особливо добре підходить для читання з екрану, тому що має досить великі символи з великими інтервалами між символами, що дозволяє легко розпізнавати кожну букву навіть на низькій роздільній здатності.

Не використовуйте занадто багато різних гарнітур

Кожен шрифт має свій характер, що може бути корисно для брендингу.

Як основний шрифт рекомендовано використовувати Verdana (в першу чергу), Helvetica або інші рубані шрифти. Для заголовків і інших елементів сторінки (логотипи, навігація, реклама) можна використовувати набагато більше варіантів шрифтів. Проте використання безлічі різних гарнітур може бути контр-продуктивно, як правило, не варто використовувати більше трьох різних гарнітур на одній сторінці.

Акценти

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

Жирний текст збільшує контраст, але контраст працює, тільки якщо є з чим контрастувати. Велика кількість жирного тексту вже не привертає увагу, а тільки погіршує  його сприйняття.

Курсив більше підходить для виділення слів або коротких фраз. Він створює більш м’який ефект  ніж напівжирне накреслення. Курсив не повинен використовуватися для великих уривків тексту, оскільки може значно погіршувати читабельність рубаних шрифтів на низькій роздільній здатності. Рубані шрифти, які дуже добре читаються на екрані, втрачають свої переваги при курсивне накреслення.

Вирівнювання

Текст з вирівнюванням по лівому краю читається набагато простіше, ніж з вирівнюванням по правому.

Вирівнювання «по ширині» (коли слова розтягуються так, щоб ліва і права кордону параграфа були рівними) може бути ефективно, тільки якщо рядки мають достатню довжину (40 і більше символів). Але текст на екрані монітора набагато простіше сприймається, якщо колонка не надто широка, що не дозволяє застосовувати вирівнювання по ширині.

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

Контраст

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

Використання великих літер

НЕ використовуються прописні букви ДЛЯ великих фрагментів тексту, БО КОНТРАСТ МІЖ СИМВОЛАМИ СИЛЬНО ЗМЕНШУЄТЬСЯ, ЯКЩО ВСІ ВОНИ ОДНОГО РОЗМІРУ.

Прописні букви дуже важливі, тому що дозволяють виділити початок пропозиції або важливу інформацію, таку як ім’я. Вони втрачають ефективність, якщо використовуються не в міру. Текст, написаний прописними літерами, читається дуже повільно і важко.

У заголовках використовуйте великі літери обдумано.

Простір

Простір суттєво важливий для забезпечення гарної читабельності тексту, тому що воно дозволяє розділяти текстові блоки і швидко знаходити початок кожного рядка.

Використовуйте наближення, щоб зв’язати заголовок з текстом, пам’ятайте, що заголовок повинен бути ближчим до того параграфу, до якого він належить, ніж до попереднього.

CSS дозволяє дизайнерам управляти кернингом (за допомогою властивості letter-spacing) і Лідінгом (за допомогою властивості line-height), але у Вас повинні бути важливі причини для їх зміни.

Researchproofthatmarginsimprovereadability (andleadingisnice)

Розміри текстових блоків

Текстові блоки не повинні бути занадто широкими або дуже вузькими.

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

Широкі абзаци менш зручні для читання, ніж вузькі, це одна з головних причин використання газетами і журналами декількох вузьких колонок на сторінці.