Доступность текста в дизайн-системе: размер, вес и масштаб

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Эти параметры работают вместе, поэтому нельзя компенсировать серьёзную проблему одного только увеличением другого. Крупный текст с низким контрастом остаётся трудноразличимым, а контрастный мелкий текст быстро утомляет. Сначала обеспечьте понятную иерархию, достаточный размер и различимость, затем уточняйте визуальные акценты.

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

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

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

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

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