Вы когда-нибудь заходили на веб-сайт, и вам было трудно читать его содержимое? Или у вас есть ощущение, что « что- то не так », но вы не можете понять, почему?

Причиной часто является неправильное использование типографики на этих сайтах.

7 самых распространенных типографских ошибок на сайтах

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

На практике все эти ошибки — это элементы, которые снижают удобство использования веб-сайта .

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

Вы готовы? Давайте начнем.

1. Текстовый столбец слишком широкий

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

Это связано с тем, что сотни лет истории издательского дела научили нас тому, что существует более или менее оптимальная ширина текста. Читается более-менее легко.

Слишком широкий столбец текста трудно читать (как и слишком узкий столбец, который редко можно увидеть в Интернете).

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

Пример ошибки такого типа (как это ни парадоксально) можно найти на одном из самых посещаемых веб-сайтов в мире: Википедии.

Столбцы текста в Википедии, особенно при чтении на очень большом мониторе, например 4k, определенно слишком широкие и излишне напрягают глаза и ум читателя.

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

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

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

Какую ширину текстового столбца выбрать?

Таким образом, это зависит от количества столбцов:

  • Текстовый столбец, вставленный в сетку с другими столбцами текста (поэтому более одного столбца): около 7-8 слов на один столбец;
  • Один текстовый столбец (например, для книг или блогов, подобных этому): около 50–75 символов.

2. Неправильное использование полужирного шрифта и курсива

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

В тот момент, когда вы решите выделить весь абзац жирным шрифтом, вы лишите его смысла.

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

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

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

Как использовать жирный шрифт и курсив в текстах

Жирным шрифтом следует пользоваться только для выражений или слов, которые должны выделяться в тексте, а курсивом — клише, цитатами, речами, научными выражениями или иностранными терминами.

3. Неправильное использование заглавных букв

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

ЗАГЛАВНЫЕ БУКВЫ, как и курсив и полужирный, также имеют точную функцию, а не просто украшение.

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

Если, с другой стороны, ВЫ ПИШЕТЕ ВЕСЬ ТЕКСТ ЗАГЛАВНЫМИ БУКВАМИ… ну, это равносильно крику.

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

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

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

4. Плохой визуальный контраст между текстом и фоном

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

В последние годы распространилось то, что я называю « модой серого веба »: многие веб-сайты начали вставлять темно-серый текст на светло-серый фон. Или светло-серые тексты на белом фоне!

Это приводит к снижению контраста и, следовательно, разборчивости.

Но чтобы обеспечить достаточную читабельность, слова должны выделяться, быть, по сути, разборчивыми, определенными и идеально очерченными.

Если меня интересует информация, я хочу читать ее четко и чисто: именно текст должен гармонировать с человеческим глазом, а не наоборот!

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

Точнее, минимальный контраст для обеспечения удобочитаемости должен быть равен или превышать соотношение 4,5/1 , ниже которого текст становится все более и более неразборчивым по мере уменьшения соотношения.

5. Слишком яркий цвет фона

Что может быть хуже на свете, чем текст, написанный при полном отсутствии контраста?

Просто: красочный фон, особенно если он очень яркий или слишком насыщенный.

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

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

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

Все это, однако, не означает, что все должно быть красным! Гораздо лучше попытаться оптимизировать графику сообщения об ошибке этого типа, вставив «правильное количество» красного цвета.

6. Чрезмерное использование выравнивания по центру

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

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

Попытка быть оригинальным любой ценой и выравнивание текста по центру не делает вашу работу более творческой, а просто скучной.

Нет, и здесь здравый смысл устанавливает границу между употреблением и злоупотреблением.

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

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

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

Я повторяю: если вы сомневаетесь, всегда выбирайте выравнивание текста «флажком» по левому краю или «по умолчанию», всегда по левому краю, и вы будете в безопасности!

7. Слишком тонкий или слишком большой шаг

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

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

Интерлиньяж в тексте — это не что иное, как высота текстовой строки и, следовательно, управление пространством между строками текста.

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

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

И поэтому вы должны настроить его в правильном направлении.

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

Поэтому для получения сбалансированного и гармоничного текста необходимо установить межстрочный интервал между 120% и 145% высоты основного текста.

То есть, если ваш текст имеет гипотетическую высоту 10pt, оптимальный междустрочный интервал составляет от 12pt до 14pt, как это происходит по умолчанию почти во всех программах, предназначенных для нумерации страниц.

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

Предыдущая статья5 основных принципов дизайна пользовательского интерфейса для повышения удобства использования
Следующая статья9 принципов веб-дизайна, которые дизайнеры должны принять во внимание