Был у тебя сайт, который ты закрыл просто потому, что текст было невозможно читать? Шрифт мелкий, строки слипаются, важное не видно. Обычно это списывают на «дизайн такой». На самом деле это типографика — и именно она делает UX либо удобным, либо мучительным.
Начнём с вывесок и меню, а не с Figma
Ты же каждый день сталкиваешься с типографикой, даже не замечая этого. Вот смотри, заходишь ты в кафе. Перед тобой меню. Если там названия блюд крупнее, описания чуть мельче, а цены выровнены по одной линии — читать легко, правда? Ты быстро находишь то, что хочешь, и делаешь заказ. Это хорошая типографика в действии.
А теперь представь другое меню: всё написано одним размером, каким-то витиеватым шрифтом, без отступов. Уже на третьей строке глаз сдаётся, и ты просто тыкаешь пальцем наугад. Знакомо? То-то же. Или указатели в аэропорту: крупный заголовок направления, второстепенная информация мельче. Ты считываешь это с десяти метров, потому что кто-то подумал о тебе. Типографика — это не про то, «какой шрифт поставили», а про то, как текст структурирован: размер, расстояние между строками, контраст с фоном. Это фундамент, а не декор.
Шрифт в интерфейсе: почему это половина UX
Теперь перенесёмся в цифровой мир. в интерфейсах 70–90% того, что видит человек, — это текст: заголовки, кнопки, подписи, ошибки, подсказки. Почти всё! Если шрифт плохо настроен, человек не может прочитать, что написано, путается, пропускает важное — и весь UX, то есть пользовательский опыт, рушится к чертям.
Вот тебе пример: личный кабинет в банке. Если заголовок раздела крупный и жирный, подписи к полям заметно меньше, а кнопка «Продолжить» контрастная и читаемая — ты быстро разберёшься, куда жать и что вводить. А если всё одним размером, без иерархии, бледным серым по светло-серому? Нужно всматриваться, чтобы вообще понять, где что. Серьёзно, ты правда думаешь, что 12-й серый шрифт — это «премиум», а не «мы вас не любим»? Если пользователь не может прочитать текст — он не может воспользоваться интерфейсом. Тут не спасёт никакая красивая картинка.
Что делает типографика в UX: три простые задачи
Типографика в UX решает три ключевые задачи, и они гораздо важнее, чем «красиво».
1.Делает текст читаемым. Это база. Достаточный размер (обычно основному тексту ближе к 16 px и выше, а не 12 px «ради элегантности»). Нормальный контраст с фоном: не светло-серый по белому. Если тебе нужно прищуриться, чтобы прочитать текст на своём макете — это не «минимализм», это ошибка.
2.Строит иерархию. Заголовки больше и жирнее, подзаголовки поменьше, тело текста — ещё проще. Кнопки и важные элементы выделены начертанием и размером. Это как указатели в аэропорту: главное написано крупно, второстепенное мельче. Ты сразу понимаешь, что важно, а что можно пропустить.
3.Ведёт взгляд. Человек сканирует экран, а не читает буква в букву. Типографика подсказывает, с чего начать, что главное, что можно прочитать потом. Вспомни хорошую лонгрид-страницу с ясными заголовками, подзаголовками, списками и абзацами. А теперь представь сплошную стену текста без отступов. Чувствуешь разницу? Хороший шрифт помогает мозгу не напрягаться и быстро понять, что тут вообще написано.
Как шрифт может убить хороший дизайн
Порой даже самый крутой дизайн можно убить плохой типографикой. Вот типичные фейлы:
•«Красиво, но нечитаемо»: декоративный шрифт в основном тексте, особенно в мобильной версии. Это как инструкция к технике, напечатанная микрошрифтом серым по серому — легче угадать, чем прочитать.
•«Мелко, бледно, плотно»: маленький размер, малый межстрочный интервал, слабый контраст. Глаз устаёт через 10 секунд, и ты уже чувствуешь, что зрение ухудшилось на -1.
•«Каша из стилей»: три шрифта на одном экране, куча жирных, курсива, капса. Непонятно, что действительно важно, а что просто для «красоты». Это как книга, набранная красивыми витиеватыми буквами, но таким мелким шрифтом, что её хочется не читать, а сдать обратно.
Плохая типографика — это не просто «некрасиво», это когда человек не дочитывает до кнопки, не понимает, что от него хотят, и уходит. И никакие анимации или модные картинки тут не спасут.
Минимальный набор правил типографики для UX
Чтобы не облажаться со шрифтами, вот тебе простой чек-лист, без всяких «кернингов» и «гарнитур»:
•Один-два шрифта на проект. Часто одного для всего интерфейса достаточно. Не надо устраивать цирк с конями.
•Чёткая иерархия стилей. H1, H2, основной текст, подписи, кнопки — и не придумывать новый размер на каждый экран. Это как указатели в аэропорту, где главное написано крупно, второстепенное мельче.
•Размер основного текста не менее 15–16 px, на мобайле часто 16–18 px.
•Межстрочный интервал не меньше 1.3–1.5 от размера шрифта. Чтобы текст не слипался и не превращался в сплошную стену.
•Контраст. Текст либо достаточно тёмный на светлом, либо наоборот. Нет «модно-серого нечитабельного».
Практика на сегодня: проверь свои шрифты
1. Открой любой свой макет или приложение. Посмотри только на текст: какие блоки считываешь первыми, а какие игнорируешь?
2. Увеличь масштаб до 100% и поставь экран на расстоянии вытянутой руки. Можешь ли читать основной текст, не щурясь?
3. Сделай макет в оттенках серого. Понятно ли, что заголовок, что кнопка, что обычный текст? Если нет — иерархия хромает.
Так что же такое типографика в UX?
Типографика в UX — это не про «красивый шрифт», а про то, сможет ли человек прочитать и понять, что происходит, не уставая и не бесясь. Это часть логики интерфейса, а не украшение. Если типографика плохая, интерфейс разваливается, даже если всё остальное красиво.
Хотите глубже? Примеры хорошей и плохой типографики в реальных сервисах с разбором — на dizko.ru
В каком приложении или на каком сайте тебе физически тяжело читать текст — и что там не так со шрифтом? Напиши пример.
Дальше — можно разобрать конкретные кейсы: примеры хорошей и плохой типографики в популярных сервисах, что именно там сделано и как можно улучшить