Размер шрифта на мобилке: как не убить читаемость и не потерять стиль
На экране телефона типографика ломается чаще, чем на десктопе: слишком мелко — текст не читают, слишком крупно — интерфейс разваливается. Рабочая база проста: основной текст должен быть комфортным без зума, а заголовки — заметно отличаться по весу и размеру, а не только «красиво смотреться».
Держите опорные правила:
— body-text не делайте меньше 16 px, если это обычный контент;
— второстепенный текст не должен конкурировать с основным;
— межстрочный интервал нужен щедрый, иначе строки слипаются;
— на маленьких экранах сокращайте количество уровней заголовков;
— не используйте один и тот же размер для разных смысловых блоков.
Ошибка, которую встречают чаще всего: дизайн выглядит аккуратно в макете, но на реальном телефоне длинные строки и плотные абзацы превращают страницу в «стену текста». Проверьте не только размер шрифта, но и ширину колонки, контраст, длину строки и состояние кнопок рядом с текстом.
Если нужен быстрый тест, откройте экран на расстоянии вытянутой руки: текст читается без напряжения, а заголовок не спорит с основным контентом — значит, размер выбран правильно.
Мобильная верстка: лучшее
@mobile_first_design_tips_ww
Размер шрифта на мобилке: как не убить читаемость и не потерять стиль
Этот пост опубликован в Telegram-канале Мобильная верстка: лучшее. Подписаться можно по ссылке: @mobile_first_design_tips_ww.