Размер шрифта в мобильной верстке: 5 правил, которые спасают читаемость

Размер шрифта в мобильной верстке: 5 правил, которые спасают читаемость

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

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

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

Если сомневаетесь, уменьшайте сложность, а не читаемость: шрифт должен помогать контенту, а не доказывать дизайнерскую смелость.