Выбранный вами шрифт - чрезвычайно важная (и часто упускаемая из виду) часть вашего бренда.
Правильный шрифт может задать весь тон вашему сайту.
Это может помочь пользователю почувствовать себя с вами комфортно или вызвать у вас больше доверия. Есть даже исследования, которые показывают, что люди с большей вероятностью поверят тому, что написано определенным шрифтом. (то есть НЕ COMIC SANS)
Теперь, когда на доступность веб-сайта обращают больше внимания, чем когда-либо, огромную роль играют шрифты, которые вы выбираете, и то, как вы их используете (также известные как типографика).
Формы букв, размер, расстояние, контрастность и контекст - все это влияет на разборчивость вашего контента, и вычертовски тяжело работали над этим контентом, поэтому позвольте мне показать вам несколько способов вы можете обеспечить успех типографики на своем веб-сайте.
Выбор шрифта заголовка и шрифта абзаца
При выборешрифтов заголовковвы часто можете обойти некоторые из лучших практик, поскольку вы будете использовать их в больших размерах и обычно немного изолированы от остального контента. визуально. Кроме того, они обычно содержат более короткие строки.
Если вы знаете, что ваш контент, как правило, более многословен, я определенно буду следовать тем же рекомендациям, что и для абзацев.
Наша основная цель в отношении типа абзаца - всегда разборчивость.
Большая часть вашего контента будет восприниматься таким образом, и мы хотим гарантировать, что его можно будет легко использовать, и он не будет создавать потенциальных проблем с доступностью, а также утомлять читателя, что может повлиять на любую аудиторию.
5 основных областей, которые следует учитывать при веб-типографике
-
Различные формы букв
Более четкая форма всех букв улучшает читаемость. Так, например, шрифты с похожими формами «q» и «p» в среднем труднее читать, чем шрифты с более разными формами для каждой из них. Возможно, вы захотите этого избежать.
-
Контраст букв
Копирование абзаца лучше всего работает со шрифтами со средней степенью контрастности (это означает, что должна быть некоторая разница в ширине штрихов, составляющих буквы) среди ширины обводки формы буквы. Формы букв со слишком малым или слишком большим контрастом должны быть зарезервированы для более коротких строк более крупного текста (например, заголовки, о которых я упоминал выше).
-
Размер основного текста
При рассмотрении размера текста крайне важно учитывать расстояние, на котором пользователь будет читать этот текст. Опыт, который пользователь получает при чтении на телефоне, сильно отличается от чтения на мониторе или телевизоре, и к нему следует относиться соответственно.
-
Длина строки
Длина строки или количество символов в ней может сильно способствовать утомлению читателя - и если пользователь утомлен вашим контентом, он может отвести взгляд в другое место. Хорошее эмпирическое правило - длина строк должна составлять 45–75 символов.
-
Цветовой контраст
Согласно рекомендациям по обеспечению доступности веб-контента, чтобы основной текст был разборчивым, его контрастность должна быть не менее 4,5:1. Вы можете легко проверить, проходят ли ваши шрифты тест, с помощью этой удобной программы проверки контрастности от WebAIM.
Следующая инфографика от Toptal поможет вам глубже понять, на каких областях следует сосредоточиться при проектировании для удобства чтения.
Инфографика от Toptal