Align numbers with tabular-nums
3 min read, 3 skills
Most UI fonts use proportional digits: a 1 is narrower than an 8. In running text that looks good. In a column of prices, a timer, or a live counter it makes numbers wobble and stops the decimal points from lining up.
font-variant-numeric: tabular-nums switches to fixed-width digits that the font already ships. In Tailwind it is tabular-nums. Apply it to table cells, stats, countdowns, and anything that updates in place.
csstd, .stat, time { font-variant-numeric: tabular-nums; }
Right-align numeric columns so the place values stack, and keep the unit in the header instead of repeating it in every cell.
Skills in this chapter
Data Table Scannabilityby UI Skillbook
Structure table rows and columns so the eye can scan down and across without losing its place.
Layout
Dashboard Information Densityby UI Skillbook
Fit more real information on screen without it reading as cluttered, by controlling hierarchy instead of shrinking everything uniformly.
Layout
Better Typographyby jakubkrehel
Web typography from choosing fonts to spacing, wrapping and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale, styling text in components, truncating text, styling underlines, selection, placeholders or carets, or reviewing frontend code for typography. Triggers on typography, fonts, font formats, woff2, variable fonts, font-weight, opentype, font-feature-settings, letter-spacing, line-height, type scale, tabular numbers, text-wrap, truncation, line clamp, underlines, text-decoration, text selection, iOS input zoom, font smoothing, text contrast, measure, line length, text-box, smart punctuation, drop cap.
TypographyExternalGitHub stars: 9.2K