Читабельность

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

1. Не используйте слишком много различных размеров шрифта¹
2. Используйте рубленые шрифты для основного текста²
3. Не используйте много различных гарнитур³
4. Акценты⁴
5. Выравнивание⁵
6. Контраст⁶
7. Использование прописных букв⁷
8. Пространство⁸
9. Размеры текстовых блоков⁹

Не используйте слишком много различных размеров шрифта

Размер шрифта — отличный способ разделения текста. Он работает как знак, который говорит «Здесь что-то важное» или «Здесь начинается новый раздел, крупный текст указывает, чему посвящен этот раздел, а мелкий это содержание раздела». Как и в других способах визуального разделения, размер шрифтов должен достаточно различаться, чтобы это работало.

По этой причине не рекомендуется использовать более 3 различных размеров шрифта в основном тексте страницы (главный заголовок, подзаголовок, содержание). Это касается только основного текста, другие элементы страницы, такие как навигация, футер, формы могут использовать различные размеры шрифта.

Используйте рубленые шрифты для основного текста

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

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

Шрифты с засечками

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

Рубленые

Рубленые шрифты (Гротески, Гротесковые шрифты) более простые и не имеют засечек. Они выглядят современными и открытыми. Рубленые шрифты гораздо более разборчивы на экране монитора, чем готические, благодаря своей простоте они легко отображаются на низких разрешениях.

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

По мнению многих дизайнеров, Verdana лучший шрифт для основного текста страниц. Гарнитура Verdana особенно хорошо подходит для чтения с экрана, потому что имеет достаточно крупные символы с большими межсимвольными интервалами, что позволяет легко распознавать каждую букву даже на низком разрешении.

¹⁰

Не используйте слишком много различных гарнитур

Каждый шрифт имеет свой характер, что может быть полезно для брендинга.

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

Акценты

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

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

Курсив больше подходит для выделения слов или коротких фраз. Он создает более мягкий эффект чем полужирное начертание. Курсив не должен использоваться для больших отрывков текста, поскольку может значительно ухудшать читабельность рубленых шрифтов на низком разрешении. Рубленые шрифты, которые очень хорошо читаются на экране, теряют свои достоинства при курсивном начертании.

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

Выравнивание

Текст с выравниванием по левому краю читается гораздо проще, чем с выравниванием по правому.

Выравнивание «по ширине» (когда слова растягиваются так чтобы левая и правая границы параграфа были ровными) может быть эффективно, только если строки имеют достаточную длину (40 и более символов). Но текст на экране монитора гораздо проще воспринимается, если колонка не слишком широкая, что не позволяет применять выравнивание по ширине. Я думаю, что веб страница не место для применения выравнивания «по ширине», потому что не имеет достаточную ширину и разрешение, чтобы сделать его достаточно хорошо.

Приведенный выше абзац использует выравнивание «по ширине» и при этом сохраняет достаточную читабельность. Этот узкий абзац тоже использует выравнивание «по ширине», обратите внимание как неудобно и прерывисто чтение.

Контраст

Очень важен достаточный контраст между текстом и фоном. Используйте черный текст на белом фоне, везде где это возможно. Если использование белого фона невозможно, старайтесь использовать черный текст на более светлом фоне. Чтение белого текста на черном фоне очень утомительно.

Использование прописных букв

НЕ ИСПОЛЬЗУЙТЕ ПРОПИСНЫЕ БУКВЫ ДЛЯ БОЛЬШИХ ФРАГМЕНТОВ ТЕКСТА, ПОТОМУ ЧТО КОНТРАСТ МЕЖДУ СИМВОЛАМИ СИЛЬНО УМЕНЬШАЕТСЯ, ЕСЛИ ВСЕ ОНИ ОДНОГО РАЗМЕРА.

Прописные буквы очень важны, потому что позволяют выделить начало предложения или важную информацию, такую как имя. Они теряют эффективность, если используются не в меру. Текст, написанный прописными буквами, читается очень медленно и тяжело.

В заголовках используйте прописные буквы обдуманно. Я предпочитаю выделять прописными буквами только очень важные слова в заголовках.

Пространство

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

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

Расстояние между буквами в типографике называют кернинг, а межстрочное расстояние лидинг.

CSS позволяет дизайнерам управлять кернингом (с помощью свойства letter-spacing) и лидингом (с помощью свойства line-height), но у вас должны быть важные причины для их изменения. Не указывайте кернинг или лидинг меньше значений по умолчанию это ухудшает читабельность текста.

Research proof that margins improve readability (and leading is nice)¹¹

Размеры текстовых блоков

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

В коротком параграфе, читателю проще контролировать свое текущее положение, и находить начало следующей строки. Использование небольших параграфов, очень удобно на веб страницах, потому что позволяет выделять важные предложения и фразы в отдельные абзацы, или помещать их в начало нового абзаца.

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