10 советов по типографии в веб-дизайне

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

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

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

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

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

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

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

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

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

  • Выберите любой шрифт
  • Сгенерируйте код и вставьте на в свой HTML документ

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

3. Определите длину строки

Наличие правильного количества символов в каждой строке является ключом к удобочитаемости вашего текста.
Для мобильных устройств вы должны использовать 30-40 символов в строке. Ниже приведен пример двух сайтов, просматриваемых на мобильном устройстве. Первый использует 50-75 символов в строке (оптимальное количество символов в строке для печати и лептопов и комьютеров ), а второй использует оптимальные 30-40 символов.

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

4. Выбирайте шрифт который одинаково хорошо выглядит при разных размерах

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

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

Во многих шрифтах существует проблема схожести букв, например «I» и «L», также проблемой явDon’t Minimize Spacing Between Linesляется расстояние между буквами, например «r» и «n» могут выглядеть как «m». Поэтому, проверяйте выбранный шрифт в разных контекстах, что бы убедится что это не создат проблемы для ваших пользователей.

6. Избегайте капс-лока

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

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

В веб разработке и типографии существует специальный теримн который обозначает высоту строки — «line height». Увеличивая расстояние между строками, вы как бправило улучшаете читаемость жертвуя местом на экране. Как правило расстояние между строками должно быть на 30% болше высоты букв.Было доказано, что правильное использование пробела между абзацами повышает понимание до 20%, как отметил Дмитрий Фадеев. Умение использовать пустое пространство заключается в том, чтобы предоставить пользователям удобоваримое количество контента, а затем удалять посторонние детали.

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

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

 

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

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

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

10. Избегайте мерцающего текста

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

2 комментариев для “10 советов по типографии в веб-дизайне

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *