Коммуникация играет жизненно важную роль в дизайне - важно установить четкую связь между веб-сайтом и пользователем, помочь своим пользователям выполнить свои задачи. Когда мы говорим об общении в контексте веб-дизайна, мы обычно подразумеваем текст. Типографика играет жизненно важную роль в этом процессе:
Более 95% процентов информации в Интернете представлено в виде письменного языка.
Хорошая типографика дает возможность чтения без усилий, в то время как плохая типографика убивает такую возможность. Как утверждает Оливер Райхенштейн в своей статье «Веб-дизайн - 95% типографика»:
Оптимизация типографики улучшает читаемость, доступность, удобство использования, общий графический баланс.
Другими словами: оптимизация вашей типографики также оптимизирует ваш пользовательский интерфейс. В этой статье я предоставлю набор правил, которые помогут улучшить читаемость и сделают разборчивее ваш текстовый контент.
1. Используйте минимальное количество шрифтов
Использование более трех разных шрифтов делает сайт неструктурированным и непрофессиональным. Имейте в виду, что слишком большой разброс кеглей и стилей одновременно могут также разрушить любую концепцию сайта.
Чтобы предотвратить подобную ситуацию, попробуйте ограничить количество семейств шрифтов до минимума
В общем, ограничьте количество семейств шрифтов до минимума (два - более чем, один - часто бывает достаточно) и придерживайтесь их на всем сайте. Если вы используете более одного шрифта, убедитесь, что семейства шрифтов дополняют друг друга в зависимости от их ширины символов. Ниже приведен пример сочетаний шрифтов. Комбинация Georgia и Verdana (слева) имеет сходные значения, которые создают гармоничное соединение. Сравните это с шрифтовой парой Baskerville и Impact (справа), где тяжелый вес Impact значительно затмевает его засечку.
Убедитесь, что семейства шрифтов дополняют друг друга в зависимости от их ширины символов
2. Старайтесь использовать стандартные шрифты
В сервисах встраивания шрифтов (например, в Google Web Fonts или Typekit) есть много интересных шрифтов, которые могут придать вашим проектам что-то новое, свежее и неожиданное. Они также очень просты в использовании. Возьмите Google, например:
- Выберите любой шрифт, такой как Open Sans.
- Создайте код и вставьте в
<Head>
HTML-документа. - Готово!
Так что может пойти не так?
На самом деле этот подход имеет одну серьезную проблему: пользователи более знакомы со стандартными шрифтами и могут читать их быстрее.
Если на вашем веб-сайте нет необходимости в особом шрифте, например, для целей брендинга или для создания особого опыта пользователя, то лучше всего придерживаться системных шрифтов. Суть заключается в использовании системного шрифта: Arial, Calibri, Tahoma и т. д. Имейте в виду, что хорошая типографика привлекает читателя к контенту, а не к самому шрифту.
3. Ограничьте длину строки
Наличие правильного количества символов в каждой строке является ключом к удобству прочтения вашего текста. Дизайн не должен диктовать ширину вашего текста. Рассмотрите этот совет по удобочитаемости и длине линии от Института Баймарда:
У вас должно быть около 60 символов на строку, если вы хотите получить хороший опыт чтения. Наличие правильного количества символов в каждой строке является ключом к удобочитаемости вашего текста
Если линия слишком короткая, глаз должен слишком часто возвращаться назад, нарушая ритм читателя. Если строка текста слишком длинная, пользователю будет сложно сосредоточиться на тексте. Источник изображения: Google Material Design
Для мобильных устройств вы должны использовать 30-40 символов в строке. Ниже приведен пример двух сайтов, просматриваемых на мобильном устройстве. Первая использует 50-75 символов в строке (оптимальное количество символов в строке для печати и персонального компьютера), а вторая использует оптимальные 30-40 символов.
Источник изображения: Usertesting
В веб-дизайне вы можете добиться оптимального количества символов в строке, ограничивая ширину ваших текстовых блоков с помощью em’ов (относительная единица, измеряемая в отношении к заглавной букве М) или пикселей.
4. Выберите шрифт, который хорошо выглядит в разных размерах
Пользователи заходят на ваш сайт с устройств с разными размерами экрана и разрешениями. В большинстве пользовательских интерфейсов требуются текстовые элементы различных размеров (копия кнопки, метки полей, заголовки разделов и т. д.). Важно выбрать шрифт, который хорошо работает в разных размерах и начертании, чтобы поддерживать читаемость и удобство использования в каждом размере.
Шрифт Roboto от Google
Убедитесь, что шрифт, который вы выбирали, читается на небольших экранах! Старайтесь избегать шрифтов, которые используют курсивный скрипт, например Vivaldi (в приведенном ниже примере): Хотя они и красивы, но их трудно читать.
Шрифт Vivaldi будет трудно читать на маленьком экране
5. Используйте шрифты с различимыми буквами
Многие шрифты могут легко спутать аналогичными формами букв, в частности с «i» и «L» (как видно на рисунке ниже), и плохими интервалами между буквами, например, когда «r» и «n» выглядят как «m». Поэтому, выбирая шрифт, обязательно проверяйте его в разных контекстах, чтобы убедиться, что это не вызовет проблемы для ваших пользователей.
6. Избегайте капитализации
Капитализация - это текст со всеми заглавными буквами - отлично применяется в местах, которые не связаны с чтением (например, аббревиатурами или логотипами), но когда текст связан с чтением, не заставляйте своих пользователей читать весь текст заглавными буквами. Как уже упоминалось Майлсом Тинкером, в его знаковой работе «Изящность печати», текст написанный верхним регистром значительно замедляет скорость сканирования и чтения по сравнению с нижним регистром.
7. Не уменьшайте расстояние между линиями
В типографике есть специальный термин для интервала между двумя строками текста - лидинг (leading) или межстрочное расстояние. Увеличивая лидинг, вы увеличиваете вертикальное пустое пространство между строками текста, как правило, улучшая читаемость в обмен на увеличение размера прокручиваемого экрана. Как правило, лидинг должен быть на 30% больше высоты символов для хорошей читаемости.
Было доказано, что правильное использование пробела между абзацами повышает понимание до 20%. Как отметил Дмитрий Фадеев: “Умение использовать свободное пространство заключается в предоставлении пользователям удобного количества контента, а затем удалении посторонних деталей”
Слева: почти перекрытый текст. Справа: Хорошее расстояние облегчает читаемость. Изображение: Apple
8. Убедитесь, что цветовой контраст достаточен
Не используйте те же или похожие цвета для текста и фона. Чем более заметен текст, тем быстрее пользователи могут сканировать и читать его. W3C (Консорциум Всемирной паутины) рекомендует использовать следующие коэффициенты контрастности для текста основного текста и изображения:
- Маленький текст должен иметь коэффициент контрастности не менее 4,5:1 по отношению к фону.
- Большой текст (при 14 пт. жирный / 18 пт. обычный и выше) должен иметь коэффициент контрастности не менее 3:1 по отношению к фону.
Эти строки текста не соответствуют рекомендациям контрастности и их трудно отличить от фона
Эти строки текста соответствуют рекомендациям контрастности и легко читаются на их фоне
После того, как вы сделали выбор цвета шрифта, необходимо проверить его с помощью реальных пользователей на большинстве устройств. Если какой-либо из тестов показывает проблему с чтением текста, вы можете быть уверены, что у ваших пользователей будет такая же проблема.
9. Избегайте окрашивания текста красным или зеленым
Цветная слепота - обычное явление, особенно среди мужчин (8% мужчин - не различают цвет совсем), рекомендуется использовать другие сигналы в дополнение к цвету, чтобы отличать важную информацию. Также избегайте использования только красных и зеленых цветов для передачи информации, поскольку красная и зеленая цветовая слепота является наиболее распространенной формой цветовой слепоты.
10. Избегайте мигающего текста
Контент, который вспыхивает или мерцает, может вызывать припадки у восприимчивых людей. Это может не только вызвать приступы, но, скорее всего, это будет раздражать или отвлекать пользователей в целом.
Заключение
Типографика - это очень важно. Правильный выбор типографики может дать вашему сайту ощущение идеальности и отполированности. С другой стороны, неудачные варианты типографики отвлекают и склонны привлекать внимание к себе. Очень важно сделать типографику читаемой, разборчивой и понятной.
Типографика существует чтобы восхвалять контент
Типографика должна соблюдать содержание таким образом, чтобы никогда не добавлять когнитивную нагрузку на пользователя.
Перевод и адаптация статьи автора Nick Babich
@orezaku Поздравляю! Вы добились некоторого прогресса на Голосе и были награждены следующими новыми бейджами:
Награда за количество голосов
Вы можете нажать на любой бейдж, чтобы увидеть свою страницу на Доске Почета.
Чтобы увидеть больше информации о Доске Почета, нажмите здесь
Если вы больше не хотите получать уведомления, ответьте на этот комментарий словом
стоп
Голосуя за это уведомление, вы помогаете всем пользователям Голоса. Узнайте, как здесь.
Ваш пост поддержали следующие Инвесторы Сообщества "Добрый кит":
zoss, kot, vasyl73, tom123, chika25, romapush, gryph0n, orezaku, gapel, oksana0407, logunov-evg, tatyanamishenko, myhardmoney, seagull15, nerengot
Поэтому я тоже проголосовал за него!
Если Вы проголосуете за этот комментарий, то поможете сделать "Доброго Кита" сильнее!
Вот спасибо!Мне часто приходится оформлять статьи у себя на сайте.Стараюсь конечно делать все по правилам,в вашей статье почти все нужные пункты учтены!
Поправка, статья не моя, я перевел и адаптировал некоторые изображения. В дальнейшем буду дальше заниматься этой деятельностью. Так же, я начал курс молодого веб-дизайнера, если интересно тоже можете посмотреть парой моих постов ниже.
Да,мне это интересно.Пришлось заниматься веб-дизайном.Стараюсь больше информации из разных источников черпать.
В целом умная статья!
Соглашусь. Коля фигни не пишет :)
@orezaku Ну будем приглядывать) Оформляю подписку на второе полугодие. Первое сегодня закончится уже)
welcome! =)