Как использовать font-variant-numeric для таблиц и финансовых данных

Свойство CSS font-variant-numeric управляет OpenType-возможностями цифр: их шириной, высотой, стилем, отображением дробей, порядковых числительных и нуля. Для таблиц и финансовых данных чаще всего используют tabular-nums, чтобы знаки имели одинаковую ширину и выстраивались по вертикали. Дополнительные значения помогают сделать цены, проценты, даты и показатели понятнее.

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

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

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

Проблема особенно заметна в финансовых карточках. Если значения 1 250,00, 8 900,00 и 12 450,00 набраны пропорциональными знаками, колонки могут казаться неровными даже при правильной верстке. Разработчик иногда пытается исправить это пробелами, ручным выравниванием или разными элементами для каждой цифры. Такие решения усложняют HTML, ломают адаптивность и не решают задачу системно.

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

tabular-nums уместен там, где положение цифр важно: в таблицах расходов, списках счетов, финансовых дашбордах, спортивных результатах, таймерах и счетчиках. Базовая запись выглядит так: font-variant-numeric: tabular-nums;. Для обычного текста лучше оставить proportional-nums, потому что пропорциональные знаки занимают меньше места и не создают ощущения монотонной сетки.

На практике часто объединяют ширину и высоту цифр: font-variant-numeric: tabular-nums lining-nums;. Такой вариант особенно удобен для таблиц с короткими строками, где числа должны одновременно стоять в ровных колонках и не выглядеть уменьшенными или поднятыми относительно букв.

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

Начните с отдельного класса для числовых ячеек, а не назначайте табличные цифры всему документу. Это позволяет сохранить нормальный ритм текста в заголовках и описаниях. Пример декларации: .financial-table .amount { font-variant-numeric: tabular-nums lining-nums; }. Числа будут занимать одинаковую ширину, а строки таблицы получат предсказуемую вертикальную структуру.

Для колонок с суммами добавьте выравнивание по правому краю: text-align: right;. Свойство text-align отвечает за положение содержимого в ячейке, а tabular-nums — за одинаковую ширину самих цифр. Эти настройки решают разные задачи и должны использоваться вместе. Не заменяйте типографическое выравнивание большим количеством пробелов или неразрывных пробелов.

Если в таблице есть отрицательные значения, проценты и валютные обозначения, заранее определите структуру данных. Например, числовую часть можно хранить в одном элементе, а валютный знак — в другом, если это помогает выравниванию и адаптивности. CSS-стилизация не должна скрывать минус, разделитель дробной части или обозначение валюты от пользователя.

Для интернет-магазина подойдет правило .price, .percentage, .balance { font-variant-numeric: tabular-nums lining-nums; }. Оно делает сравнимыми цены 990, 1 490 и 12 990, а также показатели 7,5%, 12,0% и 105,4%. Если рядом расположен текстовый комментарий, применяйте класс только к числовому значению, чтобы вся строка не превращалась в плотную цифровую колонку.

В сводном отчете можно использовать отдельные стили для разных ролей. Основные суммы получают tabular-nums lining-nums, короткие подписи вроде «рост на 12%» сохраняют proportional-nums, а код операции или номер счета при необходимости получает slashed-zero. Такое разделение делает типографику функциональной: один стиль отвечает за сравнение, другой — за естественное чтение, третий — за исключение двусмысленности.

Значение diagonal-fractions полезно для рецептов, технических характеристик, размеров и тарифных условий, где встречаются записи вроде 1/2 или 3/4. Запись font-variant-numeric: diagonal-fractions; просит шрифт показать числитель и знаменатель в компактной форме. Не все гарнитуры поддерживают эту функцию одинаково, поэтому проверяйте результат на реальном наборе цифр и в нужном браузере.

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

Значение ordinal предназначено для порядковых обозначений, например 1st или 2nd в англоязычном интерфейсе. Для русскоязычного текста оно обычно не требуется, потому что порядковые числительные чаще записываются словами или цифрой с точкой. Slashed-zero полезен в идентификаторах, кодах, серийных номерах и других последовательностях, где ноль должен явно отличаться от буквы O.

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

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

font-variant-numeric — предпочтительный способ включать стандартные числовые функции OpenType, потому что декларация читается по назначению: tabular-nums прямо говорит о табличных цифрах. Низкоуровневое свойство font-feature-settings тоже может активировать функции через короткие четырехбуквенные теги, но такие теги хуже документируют намерение и требуют знания конкретной реализации шрифта.

font-feature-settings уместен для точечной работы с нестандартными функциями, когда высокоуровневого CSS-свойства недостаточно. Для типовых сценариев финансового интерфейса лучше начинать с font-variant-numeric, а затем проверять вычисленные стили и фактическое отображение. Не включайте оба способа без необходимости: конфликтующие настройки затрудняют поддержку и поиск ошибок.

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

font-variant-numeric управляет стилем отображения цифр и связанных с ними OpenType-функций. Свойство позволяет выбрать одинаковую или пропорциональную ширину, выровненную или старостильную форму, компактные дроби, порядковые обозначения и перечеркнутый ноль. Оно не изменяет текстовое значение числа в HTML.

Назначьте числовым ячейкам font-variant-numeric: tabular-nums lining-nums; и добавьте text-align: right; для сумм. Tabular-nums задает одинаковую ширину цифр, а text-align отвечает за положение содержимого внутри ячейки. Проверьте результат на реальном шрифте, потому что поддержка функции зависит от его OpenType-настроек.

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

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

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

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

font-variant-numeric помогает превратить набор чисел в понятную визуальную систему. Для таблиц и финансовых данных начинайте с tabular-nums lining-nums, для обычного текста используйте proportional-nums, а специальные функции включайте только при наличии реальной задачи и поддержки шрифта. Такой подход улучшает читаемость без усложнения разметки.