Modern fonts often come with powerful OpenType features that allow for advanced typographic control. The `font-variant` CSS property gives you access to these features. This tool lets you visually toggle common options like ligatures, small caps, and different numeral styles (e.g., old-style figures that dip below the baseline). Select the features you want and see them applied to the preview text, then get the CSS code to use in your projects. Note that the selected font must support the chosen feature for it to be visible.
🖋️font-variant Generator
A figure of 50 states stood at 1234 feet.
Frequently Asked Questions
What are ligatures?
Ligatures are special characters that combine two or more letters into a single glyph for a more harmonious appearance. Common examples are 'fi' and 'fl'.
Why don't I see a change when I check a box?
For a `font-variant` property to have a visible effect, the font you are using must include the corresponding OpenType feature. The preview text uses Google's 'Source Serif 4', which supports many of these features.
