Как настроить табличные и пропорциональные цифры в CSS
Табличные цифры в CSS получают одинаковую ширину и выстраиваются в аккуратные колонки, а пропорциональные занимают столько места, сколько требует их форма. Для настройки обычно используют свойство font-variant-numeric: tabular-nums или proportional-nums. Ниже разберём синтаксис, совместимость, практические сценарии и ошибки, которые портят ритм интерфейса.
Актуально на 28 августа 2026 года. Примеры подходят для веб-страниц, дизайн-систем и интерфейсов, где цифры должны быть либо удобны для сравнения, либо гармонично встроены в обычный текст.
Что такое табличные и пропорциональные цифры
Табличные цифры, или tabular figures, имеют одинаковую горизонтальную ширину. В конкретном шрифте цифры 1, 4 и 8 могут выглядеть по-разному, но занимают одну и ту же ячейку. Благодаря этому числа в соседних строках выравниваются по разрядам, а взгляд быстрее сравнивает значения.
Пропорциональные цифры, или proportional figures, имеют различную ширину. Узкая единица занимает меньше места, чем широкая восьмёрка или ноль. Такой набор обычно выглядит естественнее в предложениях, датах, заголовках и коротких подписях, потому что текст сохраняет более плотный и живой ритм.
Выбор зависит не от того, какой вариант считается правильным, а от задачи. Табличная ширина нужна там, где цифры сравниваются в одной визуальной сетке. Пропорциональная ширина лучше подходит для чтения, когда число является частью фразы и не должно создавать лишних пробелов.
Как включить нужный режим через font-variant-numeric
Основной современный способ настройки — свойство font-variant-numeric. Значение tabular-nums включает табличные цифры, а proportional-nums возвращает пропорциональный набор. Свойство относится к OpenType-возможностям шрифта: браузер не рисует цифры заново, а просит шрифт использовать соответствующий набор или позиционирование глифов.
Пример для числовой колонки: .stats { font-variant-numeric: tabular-nums; } Такой класс можно назначить таблице, списку показателей, блоку котировок или панели мониторинга. Для обычного текста применяйте обратный вариант: .article-text { font-variant-numeric: proportional-nums; }
Значения можно комбинировать с другими числовыми функциями. Например, запись font-variant-numeric: tabular-nums lining-nums; включает табличные цифры и цифры, выровненные по высоте строки. Если шрифт поддерживает старостильные цифры, вместо lining-nums можно использовать oldstyle-nums.
Когда применять табличные цифры
Табличный набор полезен в интерфейсах, где пользователь сопоставляет несколько чисел. Одинаковая ширина знаков создаёт вертикальный ритм: разряды находятся примерно на одной позиции, а изменение значения заметно без повторного пересчёта глазами. Это особенно важно для плотных экранов с большим количеством метрик.
- Используйте tabular-nums в финансовых таблицах и отчётах.
- Применяйте его к таймерам, счётчикам и цифровым часам.
- Включайте табличные цифры для рейтингов, статистики и дашбордов.
- Проверяйте этот режим в календарях, расписаниях и списках дат.
- Назначайте его ценам, если суммы расположены в одной колонке и должны выравниваться.
Например, в прайс-листе значения «9 900 ₽», «12 500 ₽» и «105 000 ₽» должны начинаться и заканчиваться предсказуемо внутри колонки. Для этого можно задать .price-list { font-variant-numeric: tabular-nums; text-align: right; } Выравнивание по правому краю и одинаковая ширина цифр работают вместе, но решают разные задачи: первое задаёт положение блока, второе — ритм внутри чисел.
Когда лучше выбрать пропорциональные цифры
Пропорциональные цифры подходят для длинного текста, карточек товаров, заголовков, рекламных сообщений и подписей к изображениям. В таких случаях число читается как слово или часть предложения, а не как элемент таблицы. Узкая единица позволяет экономить место, широкие знаки сохраняют естественный визуальный вес.
В строке «Скидка 15% до 30 сентября» пропорциональный набор обычно выглядит органичнее. Если принудительно включить tabular-nums для всего сайта, короткие числа могут стать шире, а в заголовках появятся заметные промежутки. Поэтому глобальное правило для всех компонентов часто хуже локальной настройки по контексту.
Как настроить цифры в конкретных компонентах
Лучше задавать числовой режим не всему документу, а компонентам с понятной функцией. Текстовый слой сохраняйте пропорциональным, а для данных используйте отдельный класс. Такой подход облегчает поддержку дизайн-системы: разработчик сразу видит, почему настройка применена и какое поведение ожидается.
Для таблицы задайте класс .data-table { font-variant-numeric: tabular-nums; } Для карточки с крупным показателем используйте .metric-value { font-variant-numeric: tabular-nums lining-nums; } Для даты в обычной подписи оставьте .date { font-variant-numeric: proportional-nums; } Эти правила можно дополнить размером, начертанием и межбуквенным интервалом, но числовой режим отвечает именно за форму и ширину цифр.
Если один компонент содержит и название, и значение, разделяйте их семантически. Число можно поместить в отдельный span с классом metric-value, а пояснение оставить в обычном текстовом стиле. Так табличные цифры не распространятся на дату, единицу измерения или соседний текст без необходимости.
Альтернативный способ: font-feature-settings
Свойство font-feature-settings позволяет включать OpenType-функции напрямую через четырёхсимвольные теги. Для табличных цифр используется тег tnum, для пропорциональных — pnum. Пример: .numbers { font-feature-settings: "tnum"; } Обратный вариант: .text-numbers { font-feature-settings: "pnum"; }
В большинстве обычных интерфейсов предпочтительнее font-variant-numeric: запись проще читается и точнее описывает намерение. font-feature-settings пригодится, когда нужно управлять редкой функцией конкретного шрифта или объединить несколько OpenType-тегов, для которых нет удобного высокоуровневого CSS-свойства.
Что проверить в самом шрифте
CSS управляет функциями, которые должны быть предусмотрены шрифтом. Если гарнитура не содержит отдельные табличные или пропорциональные варианты, браузер может не дать заметного результата. Это не ошибка свойства: настройка не способна добавить в файл шрифта отсутствующие глифы или изменить исходную метрику без поддержки соответствующей функции.
Проверяйте цифры после подключения итогового веб-шрифта, а не только в системном fallback-шрифте. Разные гарнитуры по-разному проектируют ширину знаков, высоту цифр, форму единицы и интервалы. Тестовый набор должен включать все цифры от 0 до 9, повторяющиеся значения, даты, проценты, денежные суммы и числа с разным количеством разрядов.
Частые ошибки при настройке числового набора
- Назначать tabular-nums всему сайту, включая длинные абзацы и заголовки.
- Путать одинаковую ширину цифр с выравниванием текста по правому краю.
- Проверять свойство только на одном числе и не тестировать разные разряды.
- Забывать о fallback-шрифте, который может иметь другую метрику.
- Использовать font-feature-settings без понимания тегов tnum и pnum.
- Ожидать одинакового визуального результата от разных гарнитур.
- Не проверять цифры рядом с процентами, валютными знаками и единицами измерения.
Отдельная ошибка — смешивать назначение числовой функции и форматирование данных. CSS меняет визуальное представление, но не добавляет разделители тысяч, не округляет значения и не заменяет локализацию. Формат «12 500,50 ₽» должен быть подготовлен на уровне данных или шаблона, а tabular-nums лишь помогает аккуратно показать готовую строку.
Практический чеклист перед публикацией
- Определите, сравниваются ли числа между собой или читаются внутри фразы.
- Выберите tabular-nums для сеток данных и proportional-nums для текстовых сценариев.
- Проверьте поддержку нужной функции выбранным шрифтом.
- Примените правило локально к компоненту, а не ко всему документу без необходимости.
- Сравните цифры 0–9 на рабочем размере и начертании.
- Протестируйте таблицу, мобильную ширину, длинные значения и короткие числа.
- Убедитесь, что CSS не пытается заменить форматирование или локализацию данных.
Для контроля полезно сделать небольшой тестовый стенд: вывести один и тот же набор чисел в двух блоках, один с tabular-nums, другой с proportional-nums. Добавьте к ним даты, время, проценты и суммы. Если различие почти незаметно, это не обязательно проблема: конкретный шрифт может иметь близкие метрики или не поддерживать нужную OpenType-функцию.
Часто задаваемые вопросы
Какие CSS-свойства включают табличные цифры?
Основной вариант — font-variant-numeric: tabular-nums. Если требуется низкоуровневое управление OpenType-функцией, можно использовать font-feature-settings: "tnum". Оба способа зависят от поддержки соответствующей функции в выбранном шрифте.
Чем proportional-nums отличаются от tabular-nums?
Proportional-nums используют разную ширину цифр, поэтому набор выглядит компактнее и естественнее в предложениях. Tabular-nums задают одинаковую ширину знаков, благодаря чему числа выравниваются и легче сравниваются в таблицах, списках показателей и цифровых панелях.
Можно ли применить табличные цифры только к одному числу?
Да. Оберните значение в отдельный элемент и назначьте ему класс с font-variant-numeric: tabular-nums. Локальное применение особенно удобно для счётчика, цены, рейтинга или метрики внутри карточки, когда окружающий текст должен сохранить пропорциональный набор.
Почему CSS-свойство не меняет ширину цифр?
Чаще всего причина в том, что шрифт не поддерживает нужную числовую функцию или на странице фактически используется fallback-гарнитура. Проверьте загрузку веб-шрифта, начертание и тестовый набор цифр. Также убедитесь, что другое CSS-правило не переопределяет настройку.
Нужно ли использовать tabular-nums для денежных сумм?
Если суммы расположены в одной колонке и сравниваются, табличные цифры обычно уместны. Для цены в заголовке, кнопке или короткой рекламной подписи чаще достаточно пропорционального набора. Само свойство не форматирует валюту, поэтому разделители, знак валюты и количество знаков после запятой задаются отдельно.
Работают ли табличные цифры на мобильных устройствах?
Свойство является частью стандартной CSS-настройки OpenType и применяется в современных браузерах при наличии поддержки в шрифте. На мобильном экране важно дополнительно проверить переполнение, переносы и минимальную ширину колонок: одинаковая ширина цифр может сделать длинные значения заметно шире.
Вывод
Табличные цифры CSS использует для выравнивания и сравнения чисел, а пропорциональные — для естественного набора в тексте. Начинайте с font-variant-numeric, применяйте правило по компонентам и обязательно проверяйте фактический шрифт, его OpenType-функции и поведение на разных значениях.
Если нужна гарнитура с подходящей метрической системой и выразительными цифрами, создайте собственный шрифт на fontgenerator.ru и настройте типографику под задачи сайта или продукта.