Skip to content
PПромтбук
RUEN
Главная/Дизайн/Типографика
02Типографика

Tabular nums для таблиц и данных

Где обязательны tabular-nums, как включить через font-feature-settings и font-variant-numeric, fallback-стек и как проверить выравнивание колонок.

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

1. Где обязательны tabular-nums

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

Включай tabular-nums в:

  • Таблицы с числами (прайс, аналитика, бухгалтерия)
  • Дашборды, метрики, KPI-карточки
  • Таймеры, обратный отсчёт, длительности
  • Биржевые тикеры, котировки, диффы
  • Любые столбцы выровненные по правому краю
  • Версии (v1.024.317), номера задач (PROM-0042)

НЕ включай в:

  • Body-текст, заголовки, описания
  • Кнопки и микрокопию, где цифра одна
  • Логотипы, маркетинговые числа-герои

2. Два способа включить — и они НЕ эквивалентны

/* Старый, низкоуровневый — работает везде */
.tabular {
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Современный, высокоуровневый — предпочтительный */
.tabular {
  font-variant-numeric: tabular-nums lining-nums;
}

font-variant-numeric композируется: можешь добавить slashed-zero или ordinal без переписывания. font-feature-settings — bulldozer: одно объявление перетирает все предыдущие фичи. Если у тебя уже включены cv11 или ss01 — font-feature-settings: "tnum" их выключит.

Правило: в дизайн-системе используй font-variant-numeric. font-feature-settings оставь для legacy-браузеров (опционально как fallback в @supports).

3. Куда применять — на узел, а не глобально

/* Хорошо: точечно на поверхностях с данными */
table,
.metric,
.price,
.timer,
[data-tabular] {
  font-variant-numeric: tabular-nums;
}

/* Плохо: глобально на :root — body-текст становится холоднее */
:root { font-variant-numeric: tabular-nums; }

Tailwind: утилита tabular-nums. Применяй на <td>, <th>, ячейку метрики, а не на <body>.

4. Fallback-стек: когда шрифт не загрузился

Системные шрифты по умолчанию пропорциональные. Если ты ждёшь Inter, а пришёл -apple-system — колонка снова поедет. Добавь моноширинный аварийный стек для критических данных:

.price {
  font-family: {{primary_font}}, ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1; /* для старых браузеров */
}

Моноширинный fallback решает 95% случаев. Альтернатива — font-display: optional и принять FOIT (никакой замены, пустой текст 100ms). Для денег это допустимо.

5. OldStyle vs Lining — частая ловушка

Некоторые шрифты (Georgia, EB Garamond, Source Serif) по умолчанию используют oldstyle-цифры — спускающиеся под baseline. В тексте красиво, в таблице — ад. Принудительно включай lining:

font-variant-numeric: tabular-nums lining-nums;

6. Как тестировать

  1. Колонка-сетка. Поставь 10 ячеек подряд с разными числами одинаковой длины:

    1,111,111
8,888,888
1,818,181

    Каждая цифра должна стоять ровно над соответствующей выше. Линейкой проверь — правая граница цифр строго одна вертикаль.

  2. Анимированный счётчик. Сделай таймер 00:00 → 99:99. Без tabular-nums ширина блока скачет — это видно как тик.

  3. DevTools «Computed». Открой инспектор, проверь computed font-variant-numeric — должно быть tabular-nums, не normal.

  4. Скриншот-диф. Сравни до/после на одной таблице. Если ничего не изменилось — шрифт по умолчанию уже tnum (редко, но бывает у моноширинных и некоторых дисплейных).

7. Формат вывода

## Tabular nums spec

### Где применяется
- Селекторы: table, .price, .metric, [data-tabular]
- Утилита Tailwind: tabular-nums

### CSS
```css
[data-tabular],
.price,
.metric,
table {
  font-variant-numeric: tabular-nums lining-nums;
}

Fallback

  • Шрифт: {{primary_font}} → ui-monospace → Menlo
  • font-display: swap (или optional для критики)

Тесты

  • Колонка из 10 чисел: правый край совпадает
  • Таймер 00:00 → 99:99: ширина не прыгает
  • DevTools Computed: tabular-nums

## Anti-patterns

- ❌ `font-variant-numeric: tabular-nums` на `<body>` — body-текст становится холоднее, цифры в предложениях выглядят инородно.
- ❌ `font-feature-settings: "tnum"` поверх уже включённых `"cv11"`, `"ss01"` — стилистические альтернативы молча выключаются.
- ❌ Только `tabular-nums` без `lining-nums` в серифном шрифте — цифры свисают под baseline, колонка кривая.
- ❌ Нет моноширинного fallback — пока Inter грузится, колонка прайса скачет на 200ms.
- ❌ Тестирование одной строкой «42» — выровнять одно число легко, проблема видна только на 10 строках.
- ❌ Включение через inline `style="font-variant-numeric: tabular-nums"` на каждой ячейке — раздувает HTML на 30%, должно быть в CSS на родителе.
- ❌ Использование моноширинного шрифта для всей таблицы вместо tnum-варианта — теряется единая типографика интерфейса.
- ❌ tabular-nums в логотипе или маркетинговом числе-герое — цифры выглядят технично и скучно, теряется характер.
- ❌ Игнорирование `<th>` с числами в заголовках — заголовок «Цена» выровнен, а «2024» под ним прыгает.
К подразделу «Типографика»
Похожие промты
site / audit

Brand guidelines с нуля

Сборка полного гайдлайна: voice, color tokens, типографика, правила логотипа, антипаттерны и примеры. Готовый DESIGN.md.

brandguidelinesdesign-system
Продвинутый2-4 часа
design / design-system

Дизайн-токены из референса

Извлечь систему цветов, типографики, теней, радиусов и spacing из примера и оформить как токены.

design-systemtokenscss
Средний30-60 мин
design / typography

Подбор пары шрифтов

Headline + body шрифт которые работают вместе. Принципы, примеры, проверка.

typographyfontspairing
Средний30-60 мин