Presets

Target Element

Ligatures

Common Ligaturesfi, fl, ff, ffi (liga)

Discretionary Ligaturesst, ct, sp (dlig)

Historical Ligaturesſt (hlig)

Contextual AlternatesSmart substitutions (calt)

Figures / Numbers

Lining Figures1234567890 (lnum)

Oldstyle FiguresVarying heights (onum)

Proportional FiguresVariable width (pnum)

Tabular FiguresFixed width for tables (tnum)

Slashed ZeroØ vs 0 (zero)

Small Capitals

Small CapsLowercase to small caps (smcp)

Caps to Small CapsAll text to small caps (c2sc)

Petite CapsSmaller small caps (pcap)

UnicaseMixed case forms (unic)

Stylistic Features

Stylistic Set 1Font-defined alternates (ss01)

Stylistic Set 2(ss02)

Stylistic Set 3(ss03)

Stylistic AlternatesGeneral alternates (salt)

SwashDecorative forms (swsh)

OrnamentsDecorative elements (ornm)

Positional Features

Fractions1/2 → ½ (frac)

Ordinals1st, 2nd, 3rd (ordn)

Superscriptx² (sups)

SubscriptH₂O (subs)

Other Features

KerningLetter spacing (kern)

Case-Sensitive SpacingPunctuation adjustments (case)

Horizontal KanaJapanese horizontal forms (hkna)

Vertical KanaJapanese vertical forms (vkna)

Custom Features

Add additional OpenType features (comma-separated)

Output Options

Use font-variant-* properties (recommended)Include "normal" when no features

Live Preview

Font Size: 24px

Office 1/2 fraction fi fl ff ffi No. 1st 2nd 3rd 0123456789

Without Features

Office 1/2 fraction fi fl ff ffi No. 1st 2nd 3rd 0123456789

With Features

Office 1/2 fraction fi fl ff ffi No. 1st 2nd 3rd 0123456789

Generated CSS

.opentype-text {
  font-variant-ligatures: no-discretionary-ligatures;
}

Feature Demonstrations

Ligatures

Off:fi fl ff ffi office

On:fi fl ff ffi office

Figures

Lining:0123456789

Oldstyle:0123456789

Fractions

Off:1/2 3/4 1/4 5/8

On:1/2 3/4 1/4 5/8

Slashed Zero

Normal:O0 0x1A 10

Slashed:O0 0x1A 10

Examples

Body Text Typography

body {
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
}

Data Tables

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

Headings with Small Caps

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

Scientific Text

.scientific {
  font-variant-numeric:
    lining-nums
    tabular-nums
    diagonal-fractions
    slashed-zero;
  font-feature-settings:
    "sups" 1, "subs" 1;
}

Code Blocks

code, pre {
  font-variant-ligatures: none;
  font-variant-numeric:
    lining-nums
    tabular-nums
    slashed-zero;
  font-feature-settings:
    "calt" 1, "ss01" 1;
}

Decorative Display

.display-heading {
  font-variant-ligatures:
    common-ligatures
    discretionary-ligatures
    historical-ligatures;
  font-feature-settings:
    "swsh" 1, "salt" 1;
}

CSS Variables for Typography

:root {
  --body-features:
    "liga" 1, "calt" 1, "onum" 1;
  --heading-features:
    "liga" 1, "smcp" 1;
  --data-features:
    "tnum" 1, "lnum" 1, "zero" 1;
}

.body {
  font-feature-settings: var(--body-features);
}
.heading {
  font-feature-settings: var(--heading-features);
}
.data {
  font-feature-settings: var(--data-features);
}

Progressive Enhancement

.text {
  /* Fallback */
  font-feature-settings:
    "liga" 1, "onum" 1;

  /* Modern browsers */
  @supports (font-variant-ligatures: common-ligatures) {
    font-variant-ligatures: common-ligatures;
    font-variant-numeric: oldstyle-nums;
    font-feature-settings: unset;
  }
}

Reference

OpenType Feature Tags

Tag	Feature	Description
liga	Standard Ligatures	fi, fl, ff, ffi, ffl
dlig	Discretionary Ligatures	st, ct, sp
hlig	Historical Ligatures	ſt, ct
calt	Contextual Alternates	Smart substitutions
lnum	Lining Figures	Uniform height numbers
onum	Oldstyle Figures	Varying height numbers
pnum	Proportional Figures	Variable width numbers
tnum	Tabular Figures	Fixed width numbers
smcp	Small Capitals	Lowercase → small caps
c2sc	Caps to Small Caps	All text → small caps
frac	Fractions	1/2 → ½
ordn	Ordinals	1st, 2nd, 3rd
sups	Superscript	x², footnotes
subs	Subscript	H₂O
zero	Slashed Zero	0 vs O
kern	Kerning	Pair adjustments
ss01-ss20	Stylistic Sets	Font-specific alternates
salt	Stylistic Alternates	General alternates
swsh	Swash	Decorative forms

font-variant-* Properties

Property	Values
font-variant-ligatures	none \| common-ligatures \| no-common-ligatures \| discretionary-ligatures \| no-discretionary-ligatures \| historical-ligatures \| contextual \| no-contextual
font-variant-numeric	lining-nums \| oldstyle-nums \| proportional-nums \| tabular-nums \| diagonal-fractions \| stacked-fractions \| ordinal \| slashed-zero
font-variant-caps	small-caps \| all-small-caps \| petite-caps \| all-petite-caps \| unicase \| titling-caps
font-kerning	auto \| normal \| none
font-variant-alternates	stylistic() \| styleset() \| swash() \| ornaments() \| annotation()

Browser Support

Property	Chrome	Firefox	Safari	Edge
font-feature-settings	16+	34+	9.1+	15+
font-variant-ligatures	34+	34+	9.1+	79+
font-variant-numeric	52+	34+	9.1+	79+
font-variant-caps	52+	34+	9.1+	79+
font-kerning	33+	32+	9.1+	79+

Best Practices

Use font-variant-* properties when possible (better readability)
Use font-feature-settings for features not in font-variant-*
Test with fonts that support OpenType features
Use tabular figures for data alignment
Use oldstyle figures for body text
Disable ligatures in code blocks
Enable slashed zero for code and data
Small caps work best with fonts that have true small caps
Check font documentation for available stylistic sets

Fonts with Good OpenType Support

Serif: Minion Pro, Garamond Premier Pro, Adobe Caslon Pro
Sans-Serif: Open Sans, Lato, Source Sans Pro, Inter
Monospace: Fira Code, JetBrains Mono, Cascadia Code
Display: Playfair Display, Libre Baskerville