Summary
Numeric digits in most fonts have proportional widths by default (1 is narrower than 8). In price columns, order tables, and invoices this causes digits to misalign vertically. tabular-nums enforces uniform digit width.
Current state
optional/forms.css styles <input type="number"> but does not apply tabular numerics anywhere. There is no token or utility for this.
Proposed change
- Add a token to
core/tokens.css:
--sf-font-numeric: tabular-nums;
- Add a utility class to
optional/utilities.css:
.sf-tabular-nums { font-variant-numeric: var(--sf-font-numeric, tabular-nums); }
- Optionally apply it automatically on
<input type="number"> in optional/forms.css.
Why it matters
Critical for e-commerce — price lists, cart totals, invoices, dashboards. Numbers in a column look broken without it. Full browser support, zero risk.
Browser support
Universal.
Summary
Numeric digits in most fonts have proportional widths by default (
1is narrower than8). In price columns, order tables, and invoices this causes digits to misalign vertically.tabular-numsenforces uniform digit width.Current state
optional/forms.cssstyles<input type="number">but does not apply tabular numerics anywhere. There is no token or utility for this.Proposed change
core/tokens.css:optional/utilities.css:<input type="number">inoptional/forms.css.Why it matters
Critical for e-commerce — price lists, cart totals, invoices, dashboards. Numbers in a column look broken without it. Full browser support, zero risk.
Browser support
Universal.