Вольный перевод статьи: https://uxplanet.org/10-tips-on-typography-in-web-design-13a378f4aa0d

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

В этой статье рассмотрим некоторые правила, которые могут помочь повысить читаемость и восприятие контента.

1. Минимальное количество шрифтов

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

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

Что-то новое — всегда хорошо для эксперимента. Но не стоит постоянно использовать новые начертания из Google Fonts. Попробуйте дать читателю отдохнуть от нового, использовав в оформлении стандартные шрифты, вроде Arial, Tahoma. Так пользователь не будет тратить время на восприятие незнакомой гарнитуры, а сосредоточится на чтении.

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

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

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

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

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

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

6. Избегайте заглавных букв

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

7. Не минимизируйте пространство между строк

В типографике есть понятие «высота строки» — это пространство между строчками текста и стандартно оно должно быть на 30% больше, чем высота букв текста. Увеличивая этот показатель, добавляем пустое пространство, разреживаем текст. Нужно понимать, что форма, которую образует текст, должна быть больше, чем та, которая образована пустым пространством.

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

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

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

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

10. Не используйте мерцающий текст

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

В заключение

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