Хорошая типографика – это качество, которое человек, заходя на ваш сайт, не замечает, но чувствует.
Более 60 процентов информации в Интернете представлено в виде письменного языка.
Веб-дизайн – это 65% типографики и 35% инфографики
Оптимизация типографики
оптимизируя типографику вы также оптимизируете ваш пользовательский интерфейс —
- Сведите число используемых шрифтов к минимуму
Использование более трех разных шрифтов заставляет сайт выглядеть неструктурированным и непрофессиональным. Имейте в виду, что слишком много размеров и стилей шрифта одновременно также могут разрушить любой макет. Правило: Выберите Один шрифт, который стабильно хорошо работает в разных размерах.Убедитесь, что шрифт, который вы выбираете, может быть разборчивым на меньших экранах!
2) ограничьте количество семейств шрифтов до минимума (два – это много, часто бывает достаточно одного) и придерживайтесь их на всем веб-сайте.
Правило:Убедитесь, что шрифт, который вы выбираете, может быть разборчивым на меньших экранах! Старайтесь избегать шрифтов, которые используют курсивное написание, например, Vivaldi (в приведенном ниже примере): хотя они красивы, их трудно читать.
3) использовать стандартные шрифты или нет — все зависит от замысла дизайнера. Используйте правило — шрифты должны быть читаемыми , это значит что не возникнет вопросов с тем какая это буква ш или м , и или л большинство людей режет глаз слово написанное с ошибкой. Во многих шрифтах слишком легко перепутать аналогичные формы букв, в частности “i” и “L” (как видно на изображении ниже), и маленькие расстояния между буквами, например, когда “r” и “n” выглядят как “m”. Поэтому, выбирая шрифт, обязательно проверяйте его в разных контекстах, чтобы убедиться, что это не вызовет проблем у ваших пользователей.
правило: Выберите шрифт, который хорошо работает в разных размерах
4) ограничивайте длинну строки — это даст преимущество при протчении .
Правило: У вас должно быть около 60 символов на строку ( Для мобильных устройств рекомендую использовать 30–40 символов в строке), если вы хотите получить хороший опыт чтения. Наличие правильного количества символов в каждой строке является ключом к читабельности вашего текста.
5) Не используйте одинаковые или похожие цвета для текста и фона. Чем более заметен текст, тем быстрее пользователи могут просмотреть и прочитать его. W3C рекомендует следующие коэффициенты контрастности для текста и текста на изображении:
- Маленький текст должен иметь коэффициент контрастности не менее 4,5: 1 по отношению к фону.
- Большой текст (при 14 pt жирный / 18 pt обычный) должен иметь коэффициент контрастности по крайней мере 3: 1 по отношению к фону.
После того, как вы выбрали цвет, крайне необходимо проверить его с помощью реальных пользователей на большинстве устройств. Если какой-либо из тестов показывает проблему с чтением вашего текста, вы можете быть уверены, что у ваших пользователей будет аналогичная проблема.
Правило:Убедитесь, что у вас достаточный цветовой контраст
6) В типографике у нас есть специальный термин для расстояния между двумя строками текста – лидинг (leading) или межстрочный интервал. Увеличивая межстрочное расстояние, вы увеличиваете вертикальный пробел между строками текста, как правило, улучшая читаемость в обмен на ценное пространство экрана. Как правило, для хорошей читаемости межстрочный интервал должен быть на 30% больше, чем высота символов.
Было доказано, что правильное использование пробела между абзацами повышает понимание до 20%, как отметил Дмитрий Фадеев. Умение использовать пустое пространство заключается в том, чтобы предоставить пользователям легко усваиваемое количество контента, а затем удалять посторонние детали.
Правило: Не уменьшайте расстояние между строчками, а наоборот добавьте немного воздуха
7)Текст, целиком написанный прописными буквами – отлично подходит в контекстах, которые не подразумевают чтение (например, акронимы или логотипы), но, когда ваше сообщение подразумевает чтение, не заставляйте своих пользователей читать текст, написанный заглавными буквами, текст целиком написанный в верхнем регистре значительно замедляет скорость просмотра и чтения по сравнению с нижним регистром.
Правило: не пишите прям все в верхнем регистре. Если получилось так, добавьте воздуха между строк и сделайте строки короче чтобы бегло можно было без труда прочесть