CSS Tutorial: font-variant-numeric 🎯
Introduction to font-variant-numeric in CSS 🔢
The font-variant-numeric property controls how numbers, fractions, and ordinal indicators appear in your text. It helps improve typography by using OpenType font features likelining numbers, old-style numbers, tabular numbers, and more. Perfect for dashboards, UI design, financial data, and beautiful typography! ✨
Why Use font-variant-numeric? 🤔
- To improve readability in tables and dashboards 📊
- To match design aesthetics like dates, fractions, or ordinals 🗓️
- To ensure numbers align properly in UI layouts 📐
- To activate built-in OpenType numeric features 🔠
Syntax 📌
Basic Syntax
selector {
font-variant-numeric: <value>;
}Note
These styles work only if the font supports corresponding OpenType features.
Available Values 🧩
1. Common numeric styles
- lining-nums — Uniform height numbers (default in many fonts)
- oldstyle-nums — Numbers with varying heights, like lowercase letters
2. Alignment-based styles
- proportional-nums — Numbers with variable widths
- tabular-nums — Equal-width numbers (excellent for tables)
3. Special numeric formatting
- diagonal-fractions — Formats numbers like 1/2 as diagonal fractions
- stacked-fractions — Stacked fraction formatting ½
- ordinal — Formats ordinals like 1st, 2nd, 3rd
- slashed-zero — Zero appears with a slash to avoid confusion (0 vs O)
Examples 🔥
1. Tabular Numbers for Tables 📊
Example: tabular numbers
.prices {
font-variant-numeric: tabular-nums;
}2. Fractions Display 🍰
Example: fractions
.recipe {
font-variant-numeric: diagonal-fractions;
}3. Combining multiple values 🧠
Example: combining features
.data {
font-variant-numeric: oldstyle-nums tabular-nums slashed-zero;
}Quick Comparison Table 📚
| Feature | Description |
|---|---|
| lining-nums | All numbers have equal height |
| oldstyle-nums | Numbers with ascenders and descenders |
| tabular-nums | Equal width for perfect alignment |
| diagonal-fractions | Fractions appear with diagonal style |
| ordinal | Formats ordinals like 1st, 2nd, 3rd |
>>“Typography is the art of making written language not just legible, but beautiful.” ✨
Conclusion 🎉
The font-variant-numeric property is an amazing tool to bring clarity and refinement to your numeric text. Whether you're designing dashboards, forms, financial charts, or premium UI — this property helps maintain consistency and aesthetics. Start using it today to level up your typography! 🚀