No Login Data Private Local Save

font‑variant‑numeric Demo - Online Table Figures & Fractions

Developer Tools Typography CSS font‑variant‑numeric numbers table
43
0
0
0

font‑variant‑numeric Demo

Explore OpenType numeric styles: lining, oldstyle, tabular, proportional figures, fractions, ordinals & slashed zero.

Current Style font‑variant‑numeric: normal;
Numbers
0123456789
Tabular Alignment
1,234.56$12.34
789.01$7,890.12
23,456.78$345.67
Fractions
1/2   3/4   7/8
Ordinals
1st 2nd 3rd 4th 10th
Zero
10 0.50 1000
Default (normal)
Numbers
0123456789
Tabular Alignment
1,234.56$12.34
789.01$7,890.12
23,456.78$345.67
Fractions
1/2   3/4   7/8
Ordinals
1st 2nd 3rd 4th 10th
Zero
10 0.50 1000
Applied CSS: font‑variant‑numeric: normal;

Frequently Asked Questions

This CSS property controls advanced numeric typography using OpenType features. It enables designers to choose between lining/oldstyle figures, proportional/tabular spacing, special fraction glyphs, ordinals and a slashed zero — all within one property.

Lining figures sit on the baseline like capital letters (uniform height). Oldstyle figures have ascenders and descenders, blending better with lowercase text. Use lining‑nums for headings or dashboards, and oldstyle‑nums for body copy.

tabular‑nums forces numbers to have equal width, making columns of figures align perfectly — essential for financial tables, invoices, or timetables. Without it, proportional numbers can look jagged in vertical lists.

Use diagonal‑fractions for an inline slash format (1/2), or stacked‑fractions for a vertical numerator/denominator style. Both rely on the font containing the proper glyphs; not all fonts support stacked fractions.

A slashed zero (0̸) helps distinguish zero from the letter 'O', especially in code, serial numbers, or monospaced contexts. Add slashed‑zero to your font‑variant‑numeric value.

Yes — the font must include the relevant OpenType layout tables. Many professional fonts (like Inter, Source Sans, Georgia, or Times New Roman) support most numeric variants. If a feature is missing, the browser falls back to the default rendering.

Absolutely — you can write font‑variant‑numeric: lining‑nums tabular‑nums diagonal‑fractions ordinal slashed‑zero; to enable multiple features at once. The demo above lets you mix and match to see the result.

Support is excellent across all modern browsers (Chrome, Firefox, Safari, Edge). Older browsers (like Internet Explorer) may ignore the property and show standard numbers — a harmless fallback.
🔧 Related Tools