Типографика кнопок и полей: правила для UI-компонентов

Типографика кнопок и полей определяет, насколько быстро пользователь поймёт действие, прочитает подсказку и заметит ошибку. Для качественного UI-компонента важно согласовать шрифт, кегль, начертание, высоту строки, выравнивание и отступы, а затем проверить эти решения в обычном, активном, ошибочном и недоступном состояниях.

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

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

Для интерфейсных компонентов обычно выбирают нейтральный шрифт с хорошо различимыми формами букв, цифр и знаков препинания. Особенно важны похожие пары символов: кириллические и латинские «а», «е», «о», цифры 1 и 7, буквы «з» и цифра 3. Чем сложнее продукт и чем больше в нём данных, тем полезнее шрифт с ясной текстовой фактурой и полноценной кириллицей.

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

Размер текста в кнопке выбирают не изолированно, а относительно базового текста интерфейса. Для обычных действий часто подходит кегль основного UI-текста или немного более заметное начертание. Слишком крупная надпись визуально превращает кнопку в заголовок, а слишком мелкая создаёт ощущение второстепенности и ухудшает читаемость.

Высота строки должна позволять буквам свободно разместиться по вертикали и не создавать лишнего воздуха. В кнопке текст обычно центрируют по высоте самого компонента, поэтому отдельный line-height не должен конфликтовать с вертикальными отступами. Для короткой надписи в одну строку важнее оптический центр, чем механическое следование одной универсальной формуле.

Пример: если базовый текст интерфейса имеет размер 16 пикселей, подпись основной кнопки можно оставить такого же размера, выделив её полужирным начертанием. Вторичная кнопка может использовать тот же кегль, но обычное начертание и менее контрастный фон. Разница между действиями создаётся системой признаков, а не случайным набором размеров.

Полужирное начертание помогает выделить действие, но не должно превращать каждую кнопку в визуальный крик. Если все кнопки одинаково жирные, иерархия исчезает. Основное действие выделяют цветом, расположением и весом, вторичное делают спокойнее, а опасное действие сопровождают понятным словом и заметным, но не агрессивным сигналом.

Для русскоязычного интерфейса чаще удобен обычный регистр с прописной буквы: «Создать проект», «Изменить адрес», «Отправить заявку». Надписи целиком в верхнем регистре могут выглядеть компактно, однако хуже читаются в длинных фразах и требуют осторожного межбуквенного интервала. Не сокращайте действие до неясного «ОК», если можно написать точнее: «Сохранить изменения».

У кнопки должен быть запас вокруг текста: он защищает надпись от визуального давления и помогает отличить область нажатия от соседних элементов. Горизонтальные отступы обычно делают заметнее вертикальных, потому что ширина зависит от длины подписи, а высота должна оставаться стабильной внутри одного набора компонентов.

Для полей ввода важно разделять высоту самого поля и расстояния вокруг него. Текст, иконка, плейсхолдер и кнопка очистки не должны сталкиваться. Если поле поддерживает длинные значения, например адрес электронной почты или название компании, проверьте переполнение, курсор, выделение текста и отображение введённой строки на узком экране.

Текст кнопки обычно выравнивают по центру, когда действие самостоятельное и компонент имеет фиксированную визуальную форму. В широких панелях, списках и строках таблиц уместно выравнивание по левому краю, если кнопка должна продолжать общий поток. Главное правило — не смешивать разные принципы без понятной причины.

В полях ввода текст выравнивают по началу строки, чтобы пользователь понимал направление чтения и видел границы значения. Числа, суммы и короткие коды иногда выравнивают по правому краю, если так проще сравнивать значения. Это решение должно быть последовательным во всех похожих полях, а не зависеть от конкретного экрана.

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

Вспомогательный текст уточняет формат: «Например, +7 900 000-00-00» или «Не более 500 символов». Сообщение об ошибке должно описывать проблему и следующий шаг: «Введите адрес в формате name@example.com», а не просто «Неверно». Различайте цвет, формулировку и положение текста, чтобы информация не зависела только от цвета.

Состояния компонента не всегда требуют изменения шрифта. Обычно достаточно сохранить размер и структуру текста, а состояние показать фоном, границей, контуром, курсором или дополнительным сообщением. Резкое изменение начертания при наведении может менять ширину подписи и вызывать смещение соседних элементов.

Focus должен быть заметен при навигации клавиатурой и не сливаться с фоном. Error-состояние должно объяснять, что исправить. Disabled-состояние можно сделать менее контрастным, но текст всё равно должен оставаться распознаваемым, особенно если он объясняет причину недоступности действия. Не используйте полупрозрачность как единственный способ передать смысл.

Рассмотрим форму регистрации с полями «Имя», «Электронная почта» и «Пароль». У каждого поля есть постоянная подпись сверху, короткая подсказка только там, где она действительно нужна, и сообщение об ошибке под полем. Основная кнопка «Создать аккаунт» расположена после формы и описывает результат, а не технический шаг вроде «Отправить».

Наиболее распространённая ошибка — выбирать шрифт по внешнему виду одного макета. Компонент нужно проверять в системе: с короткой и длинной подписью, с кириллицей, цифрами, ошибкой, фокусом и локализованным текстом. Иначе красивое решение ломается при реальном содержимом.

Проверяйте типографику не только в макете, но и в работающем интерфейсе. Разные браузеры, операционные системы и способы ввода могут по-разному показывать шрифты, курсоры, системные подсказки и фокус. Финальная проверка должна включать реальные тексты и все состояния компонента.

Начните с небольшого набора текстовых ролей: основной текст, подпись поля, текст кнопки, вспомогательное сообщение и ошибка. Для каждой роли зафиксируйте шрифт, размер, начертание, высоту строки и цвет. Затем опишите размеры компонентов и правила переноса. Такая система быстрее масштабируется, чем ручная настройка каждой кнопки на каждом экране.

Если интерфейс использует собственный шрифт, подготовьте отдельные тестовые строки: «Сохранить изменения», «Введите электронную почту», «Пароль должен содержать символы», «₽ 12 990», «123456». Эти примеры показывают ширину, плотность и различимость символов лучше, чем абстрактная строка. После выбора шрифта повторно проверьте его в светлой и тёмной теме.

Для большинства интерфейсов разумно начать с размера основного UI-текста и проверить его на реальном устройстве. Часто используют диапазон 14–16 пикселей для стандартных кнопок, но итог зависит от гарнитуры, плотности экрана, длины подписи и требований продукта. Важнее согласованность и читаемость, чем конкретное число.

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

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

Начните с прямого описания проблемы и добавьте действие: «Введите номер из десяти цифр» или «Пароли не совпадают — проверьте оба поля». Сообщение размещают рядом с полем и визуально связывают с ним. Красный цвет может поддерживать сигнал, но не должен быть единственным носителем информации.

На мобильном сайте выбирайте шрифт с ясными формами и проверяйте его при обычном масштабе и увеличенном системном тексте. Учитывайте размер зоны нажатия, длину русских подписей и возможный перенос. Кнопка должна оставаться понятной даже при использовании одной рукой и на узком экране.

Обычно достаточно одной гарнитуры с разными ролями и начертаниями. Отдельный шрифт для кнопок допустим как осознанный брендовый приём, если он не снижает читаемость и не усложняет интерфейс. Смешение гарнитур без функциональной причины увеличивает визуальный шум и затрудняет поддержку дизайн-системы.

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