Free CSS Font Variant Generator
Control advanced typography with our free tool. Font-variant for caps, numerics, and ligatures.
- Small caps control
- Numeric figure styles
- Ligature settings
- Contextual alternates
- Live preview
Frequently Asked Questions
What's the difference between small-caps and font-variant?
font-variant: small-caps is the shorthand. font-variant-caps: small-caps is the specific property. Use font-variant-* for granular control over different features.
What are oldstyle vs lining figures?
Lining figures (1234) are uniform height, good for tables. Oldstyle figures have varying heights and descenders, blending better with body text.
Why use font-variant instead of font-feature-settings?
font-variant properties cascade properly and are more readable. font-feature-settings replaces all previous values. Use font-variant when the property exists.