Как подобрать размер текста для кнопок и интерактивных элементов

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

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

Одинаковый кегль воспринимается по-разному в разных шрифтах. У гарнитур с большой высотой строчных знаков текст 14 px может выглядеть заметнее, чем текст такого же размера в шрифте с маленьким x-height. На восприятие также влияют ширина букв, контраст штрихов, межбуквенный интервал и насыщенность начертания. Поэтому значение в пикселях — стартовая точка, а не универсальный ответ.

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

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

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

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

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

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

В широких интерфейсах особенно важна согласованность. Если кнопка «Создать» набрана 16 px, а соседняя «Отмена» — 12 px без явной причины, пользователь может воспринять их как элементы разных уровней. Иерархию лучше передавать цветом, заливкой, обводкой, положением и расстоянием, а не хаотичным изменением размера шрифта.

Высота строки для однострочной кнопки не должна создавать ощущение тесноты или случайного вертикального смещения. При кегле 16 px начните с высоты строки около 20–24 px и выровняйте текст по центру контейнера. Для двухстрочных названий увеличьте высоту кнопки и задайте предсказуемую высоту строки, чтобы строки не слипались. Итоговое решение зависит от конкретной гарнитуры и её вертикальных метрик.

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

Иконка не должна визуально перетягивать внимание с названия действия. Сначала проверьте читаемость текста без символа, затем добавьте иконку с согласованным оптическим размером и расстоянием. В кнопке «Скачать» пиктограмма стрелки может поддерживать смысл, но не должна заменять понятную подпись, если действие неочевидно. Выравнивайте группу «иконка плюс текст» как единый блок, а не центрируйте элементы независимо.

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

Для кнопки отправки формы «Оставить заявку» разумно начать с 16 px, если форма используется на мобильных устройствах и действие является главным на странице. Для кнопки «Изменить» в строке таблицы подойдёт 14 px при достаточной ширине столбца. Для вкладок «Описание», «Характеристики» и «Отзывы» выбирайте единый кегль, чтобы различие между активной и неактивной вкладкой выражалось состоянием, а не размером букв.

Для панели фильтров можно использовать кнопку «Показать фильтры» размером 14–16 px, а количество выбранных условий — отдельным текстовым маркером. Не уменьшайте оба элемента до миниатюрного кегля, если фильтры влияют на результат поиска. В карточке товара кнопка «Купить» должна иметь заметную надпись и ясное состояние недоступности; бледный текст на светлой заливке затрудняет понимание даже при формально достаточном размере.

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

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

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

Начните с 14–16 px для десктопного интерфейса и с 16 px для мобильного. Затем проверьте размер на реальной гарнитуре, с длинными подписями и во всех состояниях кнопки. Универсального кегля для любого продукта нет: важны контекст, контраст, длина текста и визуальная иерархия.

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

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

Для текста, который пользователь вводит или читает в поле, практичным стартом обычно является 16 px на мобильном устройстве и 14–16 px на десктопе. Подпись поля может быть меньше, но она должна оставаться различимой и не заменять обязательную информацию. Проверяйте также текст ошибки, подсказку и отображение введённого значения.

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

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

Размер текста для кнопок выбирают не изолированно, а как часть системы: учитывают кегль основного текста, гарнитуру, контраст, высоту строки, область нажатия и контекст действия. Начните с 14–16 px, протестируйте реальные сценарии и закрепите рабочие правила в дизайн-системе. Если интерфейсу нужен выразительный и читаемый шрифт с кириллицей, создайте его на fontgenerator.ru.