Шрифт в интерфейсе часто выбирают по характеру: «геометрический, технологичный, дружелюбный». На заявки сильнее влияет другое: читается ли текст с телефона, отличим ли заголовок от абзаца, не сливается ли подпись поля с фоном. Типографика интерфейса — это система чтения, а не логотип, растянутый на весь экран.
Размер и иерархия
На сайте услуг человеку нужно за секунду понять, где заголовок экрана, где название блока и где обычный текст. Для этого хватает трёх ступеней, а не восьми кеглей. Заголовок заметно крупнее текста, подзаголовок — между ними, подписи и мета — мельче, но всё ещё читаемые.
Основной текст на десктопе редко бывает удобен мельче 16–18 px. На мобильном его не уменьшают «чтобы влезло»: уменьшают ширину колонки и длину абзаца. Кнопки и пункты меню не должны быть мельче текста, который они сопровождают.
Контраст
Серый текст на сером фоне выглядит «дорого», пока его не открывают на улице или на недорогом мониторе. Для обычного абзаца нужен контраст, при котором строку не приходится выделять пальцем. Приглушённый цвет оставьте для второстепенных подписей, не для оферты и не для цены.
Тот же принцип у ссылок и кнопок. Если действие оформлено тем же цветом и насыщенностью, что и пояснение, человек его пропускает. Это уже не эстетика, а дыра в сценарии — такие вещи всплывают на UX-аудите.
Длина строки и ритм
Строка длиннее примерно 70–80 знаков читается хуже: глаз теряет начало следующей. На широком макете текст поэтому не растягивают на всю сетку. Узкая колонка статьи и более широкая колонка карточек — разные задачи, и ширина у них разная.
Ритм — это повторяемые отступы между заголовком, абзацем и списком. Когда у каждого блока свой случайный воздух, страница выглядит дороже в файле и дешевле в браузере: непонятно, что к чему относится. Одна шкала отступов важнее редкого шрифта.
Что выбрать для IT-продукта
Для интерфейсов и длинных текстов надёжнее нейтральная гарнитура с кириллицей нормального качества: ровные строчные, различимые «н» и «и», нормальные цифры. Декоративный дисплейный шрифт уместен в заголовке бренда и почти никогда — в формах, таблицах и кабинете.
Если набор правил уже повторяется от экрана к экрану, его стоит записать: кегли, интерлиньяж, цвета текста. Это первый слой дизайн-системы, и он дешевле, чем потом выравнивать пять разных подписей в личном кабинете.
