Привет👋🏼
Качественная типографика невероятно важна в Ux&Ui дизайне. Правильные решения позволят не просто улучшить эстетический облик продукта, но и улучшить пользовательский опыт. Крутая типографика поможет пользователю быстрее читать текст, лучше ориентироваться в информации и значительно быстрее решать любые задачи.
Однако огромное количество современных продуктов допускает ряд типографических ошибок. Об этих ошибках мы и поговорим.
1. Использование в одном макете большого количества шрифтов
Одна из самых распространенных ошибок в типографике — использовать множество шрифтов в одном макете. А если, вдруг, используются разные шрифты в одном абзаце, то можно смело вызывать полицию.
Оптимально в одном проекте использовать 1-2 шрифта.
2. Использование экзотических шрифтов
Бывает, когда с целью отличиться и добавить в дизайн изюминку используются неудобные для чтения шрифты. Кроме того они идут вразрез с 4-ой эвристикой Якоба Нильсена о том, что большую часть времени пользователи проводят на других сайтах и приложениях, а значит для их комфортного взаимодействия с нашим дизайном мы не должны слишком резко отличаться от конкурентов.
Оптимальнее всего использовать шрифты проверенные временем, так как они по сей день смотрятся актуально. Примеры: Roboto, Bodoni, Open Sans, Montserrat и подобные.
3. Основной текст большими буквами
Текст большими буквами плохо читается и выглядит не эстетично. Его можно применять, но только когда идёт речь о небольших заголовках.
4. Текст поверх фото или видео
В редких случаях текст поверх фотографий и видео имеет право существовать, но в большинстве случаев это ухудшает читаемость.
5. Нарушенная иерархия
Для быстрого и удобного считывания информации в структуре текста должна быть чёткая иерархия. От H1 заголовка к тексту должен уменьшаться размер шрифта и как правило уменьшаться жирность.
6. Выравнивание не по левому краю
Выравнивание по правому краю осложняет чтение текста. Выравнивание по центру допустимо при небольшом количестве строк 2-4.
7. Длинные и короткие строки
Короткие строки делают текст рваным, а длинный очень не удобно читать.
8. Увеличение кёрнинга
Это правило иногда можно нарушать, но в большинстве случаев это приводит к неаккуратному и сложно читаемому тексту. Самый здравый кейс для увеличения кёрнинга - это текст полностью из заглавных букв. Опять же, всё должно быть в меру.
9. Использование жирности, наклонности и подчеркивания во всём блоке текста
Подчеркнутый, жирный или наклонный текст нужны в основном для выделения моментов в тексте, но никак для выделения всего текста. Исключением может быть цитата, которую можно полностью написать наклонным текстом.
10. Отступы между блоками текста такие же или меньше межстрочных отступов
Вспомним один из 7-ми замечательных принципов Гештальта - принцип близости. Тогда станет очевидно что строки внутри одного блока текста должны выглядеть более связанными, а значит расстояние их блока от остальных должно быть больше чем расстояние между строками.
Спасибо, что дочитали до конца! Делитесь своим мнением в комментариях.
Если понравилась эта статья, советую прочитать вторую часть.
Пока👋🏼
шикарная статья, помню когда писал документы , тоже были такие правила, еще никогда не забуду, что текст пишется шрифтом Times New Roman 14 )))
..Times New Roman ушёл из России )))
Полезное чтиво, спасибо. Теперь я знаю, что по типографике у меня в работах нет ошибок 😁👍
Для новичков отличное пособие!
А мне очень понравилось, большое спасибо за полезную информацию ❤
Очень рад!
Как бэ очевдности 80lvl
В статье достаточно простые примеры, но просто присмотритесь, даже на топовых сайтах допускают такие ошибки. Что уж говорить о лендингах, которые делают новички