GitHub

Install it as an agent skill

npx skills@latest add vojtaholik/good-css

For Claude Code, Codex, Cursor and any other agent that reads skills. The source and the other ways to install are on GitHub.

Entry 03

Tabular numbers

Use it on any number that changes or sits in a column, such as prices, tables, timers and counters.

Open
In the first column the digits line up and the running timer keeps its width. In the second the digits drift and the unit jitters.
Code CSS · 3 lines 
.price,
td,
time { font-variant-numeric: tabular-nums; }
Why it works, the rules and the credits 1 reason · 2 rules · support · credits

Why it works

  1. Every digit gets the same width, so columns line up and a ticking value does not shift its neighbors.

Rules

  1. Do not set it globally. Proportional digits read better in prose.
  2. The font must ship tabular figures, or nothing changes.

Support

Chrome
52
Firefox
34
Safari
9.1

Credits

Borrowed from: Rauno Freiberg, Web Interface Guidelines · Vercel Web Interface Guidelines

04 / 08 5 entries

Text and media

  1. 01 Long text that wraps, truncates or clamps
  2. 02 Image box that holds any upload
  3. 03 Tabular numbers
  4. 04 Label centered on its letters with text-box
  5. 05 Icon sized by the text beside it