Пропорциональные и табличные цифры OpenType: что выбрать

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

В шрифте цифры могут быть подготовлены в нескольких наборах, отличающихся шириной и формой. Функция proportional figures, или pnum, включает пропорциональные цифры: единица обычно уже, чем восьмерка, а ноль и другие знаки имеют собственные интервалы. Функция tabular figures, или tnum, заменяет их табличными цифрами одинаковой ширины. Это не масштабирование и не ручное растягивание текста, а переключение заранее спроектированных вариантов глифов.

Ширина знака и его вертикальный рисунок — разные параметры. Поэтому pnum и tnum можно сочетать с lnum, то есть lining figures, или с onum, то есть oldstyle figures. Линейные цифры имеют одинаковую высоту с прописными буквами и хорошо работают в заголовках. Старостильные цифры имеют разную высоту и отдельные верхние или нижние выносные элементы, благодаря чему лучше сливаются с наборным текстом.

Пропорциональные цифры нужны там, где число воспринимается как часть фразы, а не как ячейка данных. Разная ширина знаков уменьшает монотонность и позволяет строке выглядеть компактнее. Например, заголовок «Скидка 25%» обычно воспринимается гармоничнее с пропорциональными цифрами: узкая единица не создает лишнего пустого пространства, а широкая пятерка получает столько места, сколько требует ее рисунок.

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

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

Табличные цифры выбирают для данных, которые сравнивают по позиции знаков. Если в соседних строках стоят 8 450, 12 900 и 103 500, одинаковая ширина каждого символа помогает визуально сопоставить разряды. Читателю проще увидеть изменение суммы, процента или количества, когда цифры находятся на общей вертикальной сетке. В этом случае равномерность важнее компактности и индивидуального ритма знаков.

Особенно важен табличный режим для динамических интерфейсов. Если счетчик меняется с 9 на 10, пропорциональные цифры могут изменить ширину блока и слегка сдвинуть соседние элементы. При tnum ширина каждой позиции остается стабильной: кнопка, цена или индикатор не «прыгают» при обновлении значения. Это улучшает визуальную устойчивость интерфейса, но не означает, что табличные цифры нужно включать для всех чисел на странице.

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

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

В каталоге товарная цена обычно является самостоятельным визуальным акцентом: «2 490 ₽», «от 799 ₽» или «Старая цена 3 200 ₽». Для крупных ценников чаще подходят линейные пропорциональные цифры, потому что число выглядит компактно и выразительно. Если рядом размещены несколько цен в одной вертикальной колонке и пользователю нужно сравнить их разряды, переключите только этот блок на tnum, не меняя числовой режим всего интерфейса.

В дашборде показатель «128 450» может быть крупным и пропорциональным, если он отображается как единичный KPI. В списке «Выручка», «Расходы», «Прибыль» табличные цифры полезнее: одинаковые позиции разрядов ускоряют визуальное сравнение. Для отрицательных значений заранее проверьте ширину минуса, пробела и обозначения валюты, иначе ровные цифры не гарантируют ровного края всей колонки.

В таблице расписания значения «09:00», «10:30» и «12:45» должны сохранять одинаковую геометрию, особенно если время стоит в нескольких строках. Табличные цифры помогают удерживать колонку, а линейные формы делают ее более заметной. В календаре tnum удобен для сетки дней, однако при небольшом размере кегля необходимо проверить, не становятся ли узкие знаки визуально слишком плотными.

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

В графических редакторах и программах верстки ищите панель OpenType, Typography или Character. Названия функций могут отличаться, но смысл остается тем же: Proportional Figures отвечает за ширину, Tabular Figures — за выравнивание, Lining Figures — за высоту, Oldstyle Figures — за исторический рисунок. После переключения проверяйте не один пример, а реальные строки: даты, валюты, проценты, отрицательные значения и числа с разделителями.

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

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

Табличные цифры имеют одинаковую ширину. Благодаря этому числа выстраиваются по вертикальным колонкам и легче сравниваются в таблицах, отчетах, календарях и счетчиках. В OpenType такая функция обозначается тегом tnum, а в CSS обычно задается значением tabular-nums.

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

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

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

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

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