Размер шрифта в мобильной верстке: где UI ломается и как этого не допустить

Размер шрифта в мобильной верстке: где UI ломается и как этого не допустить

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

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

Не делай типичную ошибку: задавать размеры только в пикселях и считать, что этого достаточно. На мобильных важнее связка размера, межстрочного интервала и длины строки. Слишком плотный набор выглядит «зажато», а слишком широкий ломает ритм и усложняет сканирование. Лучше проверять не отдельный текст, а блок в реальном макете с соседними элементами.

Хорошее правило: сперва собери читаемую базу для основного контента, потом уменьшай акценты только там, где это не мешает восприятию. Если сомневаешься, увеличивай не заголовок, а воздух вокруг него — так интерфейс часто выигрывает больше.