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

Более 95% процентов информации в Интернете представлено в виде письменного языка.

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

Оптимизация типографики — это оптимизация читабельности, доступности, удобства использования (!), общего графического баланса.

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

1. Сведите число используемых шрифтов к минимуму

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

Сведите число используемых шрифтов к минимуму
Чтобы предотвратить подобную ситуацию, попробуйте ограничить количество семейств шрифтов до минимума
В общем, ограничьте количество семейств шрифтов до минимума (два — это много, часто бывает достаточно одного) и придерживайтесь их на всем веб-сайте. Если вы используете более одного шрифта, убедитесь, что семейства шрифтов дополняют друг друга в зависимости от ширины их символов. Ниже приведен пример сочетаний шрифтов. Сочетание Georgia и Verdana (слева) имеет сходные значения, которые создают гармоничное соединение. Сравните это с парой Baskerville и Impact (справа), где тяжелый вес шрифта Impact значительно затмевает другой шрифт.
Убедитесь, что семейства шрифтов дополняют друг друга, основываясь на ширине их символов
Убедитесь, что семейства шрифтов дополняют друг друга, основываясь на ширине их символов

2. Попробуйте использовать стандартные шрифты

В сервисах внедрения шрифтов (например, Google Web Fonts или Typekit) есть много интересных шрифтов, которые могут придать вашим проектам что-то новое, свежее и неожиданное. Они также очень просты в использовании. Возьмем, например, Google:

  1. Выберите любой шрифт, например, Open Sans.
  2. Сгенерируйте код и вставьте в <Head> своего HTML-документа.
  3. Готово!

Так что может пойти не так?

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

Если на вашем веб-сайте нет особой необходимости в использовании специального шрифта, например, для целей брендинга или создания впечатляющего опыта, обычно, лучше всего использовать системные шрифты. Беспроигрышный вариант — использовать системные шрифты: Arial, Calibri, Trebuchet и т. д. Имейте в виду, что хорошая типографика привлекает читателя к контенту, а не к самому шрифту.

3. Ограничивайте длину строки

Наличие правильного количества символов в каждой строке является ключом к удобочитаемости вашего текста. Не должно быть так, чтобы ваш дизайн диктовал вам ширину текста. Это также должно быть вопросом читабельности. Посмотрите этот совет по удобочитаемости и длине линии от Института Баймарда:

«У вас должно быть около 60 символов на строку, если вы хотите получить хороший опыт чтения. Наличие правильного количества символов в каждой строке является ключом к читабельности вашего текста».

Ограничивайте длину строки
Если линия слишком короткая, глазу придется слишком часто возвращаться, нарушая ритм читателя. Если строка текста слишком длинная, пользователю будет сложно сосредоточиться на тексте. Изображение: Material Design
Для мобильных устройств вы должны использовать 30−40 символов в строке. Ниже приведен пример двух сайтов, просматриваемых на мобильном устройстве. Первый использует 50−75 символов в строке (оптимальное количество символов в строке для печати и для компьютера), а второй использует оптимальные 30−40 символов.
Для мобильных устройств вы должны использовать 30–40 символов в строке
Изображение: Usertesting
В веб-дизайне вы можете добиться оптимального количества символов в строке, ограничивая ширину ваших текстовых блоков используя em (относительную единицу измерения) или пиксели.

4. Выберите шрифт, который хорошо работает в разных размерах

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

Шрифт Roboto от Google
Шрифт Roboto от Google
Убедитесь, что шрифт, который вы выбираете, может быть разборчивым на меньших экранах! Старайтесь избегать шрифтов, которые используют курсивное написание, например, Vivaldi (в приведенном ниже примере): хотя они красивы, их трудно читать.
Шрифт Vivaldi будет трудно читать на небольшом экране
Шрифт Vivaldi будет трудно читать на небольшом экране

5. Используйте шрифты с различимыми буквами

Во многих шрифтах слишком легко перепутать аналогичные формы букв, в частности «i» и «L» (как видно на изображении ниже), и маленькие расстояния между буквами, например, когда «r» и «n» выглядят как «m». Поэтому, выбирая шрифт, обязательно проверяйте его в разных контекстах, чтобы убедиться, что это не вызовет проблем у ваших пользователей.

Используйте шрифты с различимыми буквами

6. Избегайте печатать все прописными буквами

Текст, целиком написанный прописными буквами — отлично подходит в контекстах, которые не подразумевают чтение (например, акронимы или логотипы), но, когда ваше сообщение подразумевает чтение, не заставляйте своих пользователей читать текст, написанный заглавными буквами. Как уже упоминалось Майлсом Тинкером, в его знаковой работе «Легкость печати», текст целиком написанный в верхнем регистре значительно замедляет скорость просмотра и чтения по сравнению с нижним регистром.

Избегайте печатать все прописными буквами

7. Не уменьшайте расстояние между строчками

В типографике у нас есть специальный термин для расстояния между двумя строками текста — лидинг (leading) или межстрочный интервал. Увеличивая межстрочное расстояние, вы увеличиваете вертикальный пробел между строками текста, как правило, улучшая читаемость в обмен на ценное пространство экрана. Как правило, для хорошей читаемости межстрочный интервал должен быть на 30% больше, чем высота символов.

Не уменьшайте расстояние между строчками
Хорошо подобранное межстрочное расстояние улучшает читабельность. Изображение: Microsoft
Было доказано, что правильное использование пробела между абзацами повышает понимание до 20%, как отметил Дмитрий Фадеев. Умение использовать пустое пространство заключается в том, чтобы предоставить пользователям легко усваиваемое количество контента, а затем удалять посторонние детали.
Слева: Текст, строчки которого почти перекрывают друг друга. Справа: Хорошо подобранные интервалы способствуют читабельности.
Слева: Текст, строчки которого почти перекрывают друг друга. Справа: Хорошо подобранные интервалы способствуют читабельности. Изображение: Apple

8. Убедитесь, что у вас достаточный цветовой контраст

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

  • Маленький текст должен иметь коэффициент контрастности не менее 4,5: 1 по отношению к фону.
  • Большой текст (при 14 pt жирный / 18 pt обычный) должен иметь коэффициент контрастности по крайней мере 3: 1 по отношению к фону.
Эти строки текста не соответствуют рекомендациям цветового контрастности
Эти строки текста не соответствуют рекомендациям цветового контрастности и их трудно отличить от цветов фона.

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

9. Избегайте окрашивания текста в красный или зеленый цвета

Цветная слепота — распространенное заболевание, особенно среди мужчин (8% мужчин — дальтоники), рекомендуется использовать другие сигналы в дополнение к цвету, чтобы отметить важную информацию. Также избегайте использования только красных и зеленых цветов для передачи информации, поскольку красная и зеленая цветовая слепота является наиболее распространенной формой дальтонизма.

Избегайте окрашивания текста в красный или зеленый цвета

10. Избегайте использования мигающего текста

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

Избегайте использования мигающего текста
Избегайте мигающего текста!

Вывод

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

Типографика существует, чтобы обеспечивать контент

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

У вас есть собственные советы по типографике в веб-дизайне? Или вы хотите получить более подробную информацию о упомянутых выше вопросах? Дайте мне знать в комментариях ниже!

Подписывайтесь на UX Planet: Twitter | Facebook