Presets

Target Element

Capitalization (font-variant-caps)

Controls how uppercase and lowercase letters are displayed.

Numbers (font-variant-numeric)

Figure StyleFigure SpacingFractions

Slashed Zero (0 vs O)Ordinal (1st, 2nd, 3rd)

Ligatures (font-variant-ligatures)

Common Ligatures (fi, fl, ff)Discretionary LigaturesHistorical LigaturesContextual Alternates

Alternates (font-variant-alternates)

Stylistic AlternatesHistorical Forms

Position (font-variant-position)

Use proper OpenType sub/superscripts instead of scaled text.

East Asian (font-variant-east-asian)

VariantWidth

Ruby (annotation glyphs)

Emoji (font-variant-emoji)

Control how emoji characters are rendered.

Options

Include "normal" when no changes

Live Preview

Font Size: 24px

Default:ABCdef 1234567890 fi fl ffi 1/2 3/4 1st 2nd

With Styles:ABCdef 1234567890 fi fl ffi 1/2 3/4 1st 2nd

Feature Demonstrations

Small CapsHello World

All Small CapsHello World

Lining Figures1234567890

Oldstyle Figures1234567890

Tabular Figures$1,234.56

Diagonal Fractions1/2 3/4 1/8

Generated CSS

.typography {
  font-variant: normal;
}

Usage Examples

Body Text Typography

body {
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: oldstyle-nums proportional-nums;
}

Data Tables

table {
  font-variant-numeric: lining-nums tabular-nums slashed-zero;
  font-variant-ligatures: no-common-ligatures;
}

Headings with Small Caps

h1, h2, h3 {
  font-variant-caps: small-caps;
  font-variant-ligatures: common-ligatures;
  letter-spacing: 0.05em;
}

Fractions and Ordinals

.recipe-amounts {
  font-variant-numeric: diagonal-fractions ordinal;
}

/* Makes 1/2 → ½ and 1st → 1ˢᵗ */

Proper Subscripts/Superscripts

.chemical-formula sub {
  font-variant-position: sub;
}

.math-formula sup {
  font-variant-position: super;
}

/* Uses proper OpenType glyphs instead of scaled text */

CSS Variables for Typography

:root {
  --font-variant-body: common-ligatures contextual oldstyle-nums;
  --font-variant-code: no-common-ligatures tabular-nums slashed-zero;
  --font-variant-headings: small-caps common-ligatures;
}

body {
  font-variant: var(--font-variant-body);
}

code, pre {
  font-variant: var(--font-variant-code);
}

h1, h2, h3 {
  font-variant: var(--font-variant-headings);
}

Reference

font-variant-caps Values

Value	Description
normal	No special capitalization
small-caps	Lowercase letters as small capitals
all-small-caps	All letters as small capitals
petite-caps	Smaller small capitals
all-petite-caps	All letters as petite capitals
unicase	Mixed case with uniform heights
titling-caps	Capitals designed for titles

font-variant-numeric Values

Value	Description
lining-nums	Numbers with uniform height (default for most fonts)
oldstyle-nums	Numbers with varying heights (text figures)
proportional-nums	Variable-width numbers
tabular-nums	Fixed-width numbers (for tables)
diagonal-fractions	Diagonal fraction glyphs (1/2 → ½)
stacked-fractions	Stacked fraction glyphs
slashed-zero	Zero with a slash (0 vs O)
ordinal	Ordinal markers (1st, 2nd)

Browser Support

Property	Chrome	Firefox	Safari	Edge
font-variant-caps	52+	34+	9.1+	79+
font-variant-numeric	52+	34+	9.1+	79+
font-variant-ligatures	34+	34+	9.1+	79+
font-variant-position	117+	34+	9.1+	117+
font-variant-east-asian	63+	34+	15.4+	79+
font-variant-emoji	129+	108+	17.5+	129+

Best Practices

Use fonts that support OpenType features (e.g., Source Sans Pro, Lato, Open Sans)
Use font-variant-numeric: tabular-nums for number columns in tables
Use font-variant-caps: small-caps for acronyms like "NASA" or "HTML"
Use font-variant-ligatures: no-common-ligatures in code blocks
Prefer font-variant-position over vertical-align with scaled font-size
Test with actual OpenType-capable fonts to see the effects