OpenType Feature Reference

A font file can hold far more than one shape per character. OpenType features are named, switchable rules, built into the font itself, that swap in alternate glyphs, rewrite numeral styles, or reshape whole clusters of letters, all without changing a single word of the underlying text. This reference walks through every commonly used feature with a live before/after example, and the exact CSS to turn each one on.

Fast facts

OpenType features, in one screen

Features are grouped into two OpenType tables: GSUB for substitution (swapping one glyph or cluster of glyphs for another) and GPOS for positioning (moving glyphs relative to each other). Every feature below is one or the other.

Two tables
GSUB substitutes glyphs (ligatures, small caps, swashes). GPOS repositions them (kerning, mark attachment).
Turned on where
By the app or browser rendering the text. The font only supplies the alternates; it doesn't force their use.
Support varies by font
A feature tag only does something if the specific font you're using actually implements it.
On the web
font-variant-* for the common cases, font-feature-settings for everything else.
1.How features get turned on

Every OpenType feature has a four-letter tag, such as liga, smcp, or onum, defined by the OpenType specification. A font's own metadata decides which tags it supports and what glyphs each one swaps in; nothing about the tag itself is universal beyond its name and general intent. Some tags are conventionally on by default (like liga and kern), and some are conventionally opt-in (like smcp and swsh), but that's a design convention, not a rule the browser enforces.

On the web, most common features have a dedicated CSS property so you don't have to remember raw tags:

Shorthand properties

  • font-variant-ligatures
  • font-variant-caps
  • font-variant-numeric
  • font-variant-position
  • font-kerning

Raw feature settings

  • font-feature-settings: "swsh" 1;
  • font-feature-settings: "ss01" 1;
  • font-feature-settings: "cv01" 1;
  • font-feature-settings: "case" 1;
  • Any tag not covered by a shorthand
Reading this page
Wherever a feature affects specific characters rather than the whole line, those characters are highlighted in both rows below, so you know exactly where to look for the difference. Every demo uses EB Garamond (self-hosted here), Cormorant Garamond, or Inter, three free fonts whose full desktop releases carry unusually thorough OpenType support. Most rows below show a real, visible substitution. A few are marked with a note explaining that this build of a particular family doesn't include the feature, even though the format supports it. That gap is itself a useful, common thing to know about serving fonts on the web, and the CSS shown is correct regardless of which specific font file ends up loading it.
2.Ligatures

A ligature replaces two or more letters that collide or look awkward side by side with a single, redesigned glyph. liga covers the common, near-mandatory cases; dlig and hlig cover optional, more decorative or historical ones that a designer might not want switched on by default.

Standard ligatures liga
Fixes letter collisions like the dot of an "i" crashing into the hood of an "f". Nearly always on by default.
Off
Difficult, final, cliff
liga: 1
Difficult, final, cliff
font-variant-ligatures: no-common-ligatures | common-ligatures;
Discretionary ligatures dlig
Decorative joins the type designer built but doesn't force on: a stylistic choice, not a fix.
Off
star, actor, The quick fox
dlig: 1
star, actor, The quick fox
font-variant-ligatures: discretionary-ligatures; This build of EB Garamond doesn't define any discretionary ligatures, so these two rows render identically; the property is what to take away.
3.Contextual & stylistic alternates

calt lets a glyph's shape depend on its neighbors: essential in connecting script and handwriting fonts, where a letter has to physically join the one before and after it, and useful in any font that wants to avoid awkward repeated shapes in a row. salt is a simpler, non-contextual cousin: a straight one-for-one swap to an alternate letterform, applied everywhere regardless of context.

Contextual alternates calt
Turning it off removes the neighbor-aware substitutions a font relies on for natural joins and spacing.
Off
Waffle & Toffee—1.5 x 3.25
calt: 1
Waffle & Toffee—1.5 x 3.25
font-variant-ligatures: contextual | no-contextual; calt is on by default in nearly every font, and several browsers treat it as effectively mandatory rather than something a page can switch off, so these two rows commonly render identically. The clearest place to see calt actually change something is a connecting script typeface, where disabling it (in a browser that honors the override) breaks the joins between letters.
Where calt matters most
Connecting script fonts depend on calt almost entirely. Without it, cursive letters render as isolated, unjoined shapes instead of a flowing line. If you're evaluating a script font for a project, check that this feature is implemented before anything else.
4.Small capitals

Small capitals are not just scaled-down regular capitals. A well-built font draws them at their own weight and proportions so they sit comfortably next to lowercase text. smcp converts lowercase letters to small caps; c2sc does the same for letters that are already capitals, useful for acronyms inside running text.

Small capitals smcp / c2sc
Purpose-built glyphs, not the browser faking it by shrinking regular capitals.
Default
Chapter OneNIMATYPE
smcp
Chapter One—NIMATYPE
smcp + c2sc
Chapter One—NIMATYPE
font-variant-caps: small-caps; (lowercase only) or all-small-caps; (lowercase and capitals).
5.Numeral styles

Most text fonts ship two figure styles and two spacing modes, combinable in any pairing. lnum (lining) figures are all the same height, like capital letters: the default in most UI and data contexts. onum (oldstyle) figures rise and descend like lowercase letters, blending into running prose. tnum (tabular) gives every digit identical width so columns of numbers align; pnum (proportional) lets digit width vary for a more natural rhythm in text.

Lining vs. oldstyle lnum / onum
Lining figures for IDs, prices, and UI. Oldstyle figures for dates and numbers set inside prose.
lnum: 1
Product ID: 89302
onum: 1
Born in 1732, died in 1804
font-variant-numeric: lining-nums | oldstyle-nums;
Proportional vs. tabular pnum / tnum
Tabular figures keep every digit the same width: essential wherever numbers need to line up vertically.
pnum: 1
111,111
888,888
tnum: 1
111,111
888,888
font-variant-numeric: proportional-nums | tabular-nums;
6.Fractions, ordinals & slashed zero

Three small, high-utility substitutions round out numeral handling. frac turns a typed sequence like 3/4 into a properly proportioned fraction. ordn raises and shrinks ordinal suffixes (1st, 2nd) instead of leaving them full-size. zero adds a slash or dot through the digit zero, so it can't be confused with the letter O in codes, IDs, and technical text.

Fractions frac
Replaces the typed slash with a proper fraction bar and correctly sized numerator/denominator.
Off
Mix 1/2 cup sugar with 3/4 cup milk
frac: 1
Mix 1/2 cup sugar with 3/4 cup milk
font-variant-numeric: diagonal-fractions;
Ordinals ordn
Automatically superscripts st/nd/rd/th instead of leaving them the same size as the number.
Off
1st place, 2nd runner-up, 23rd overall
ordn: 1
1st place, 2nd runner-up, 23rd overall
font-variant-numeric: ordinal; The ordn row above genuinely superscripts st/nd/rd, smaller and raised compared to the row above it.
Slashed zero zero
A small but real disambiguation fix for order numbers, license keys, and serial codes.
Off
Order NT-100150 · Code O0O0
zero: 1
Order NT-100150 · Code O0O0
font-variant-numeric: slashed-zero; Not included in Inter's (or most tested coding fonts') Google Fonts web build; several monospaced fonts draw a dotted zero into their default glyph instead of gating it behind this feature.
7.Superscript & subscript

sups and subs swap in purpose-drawn superscript and subscript figures, properly weighted and positioned, unlike the browser's default fallback of shrinking and nudging the regular glyph, which tends to look thin and misaligned at small sizes. A related tag, sinf ("scientific inferiors"), is used specifically for chemical formula subscripts.

Superscript & subscript sups / subs
Real glyphs at the right weight, not a scaled-and-shifted regular figure.
Default
E = mc2, footnote reference4, H2O
sups / subs
E = mc2, footnote reference4, H2O
font-variant-position: super | sub; Unlike the other font-variant-* properties on this page, browser support for this one is thin and it has no synthetic fallback, so it commonly does nothing even in fonts that implement sups/subs. For reliable superscripts on the web today, most teams still reach for vertical-align: super with a smaller font-size instead.
8.Swashes & stylistic sets

swsh swaps in flourished, calligraphic alternates for selected letters, usually capitals at the start of a word, for display and invitation-style settings. Stylistic sets (ss01 through ss20) are a more general mechanism: a type designer bundles any group of alternate letterforms under one numbered tag, and documents what each number does in the font's own specimen. There's no universal meaning to "ss01" across different fonts; always check the source.

Swashes swsh
Decorative alternate capitals, typically reserved for display sizes rather than body text.
Off
Queen
swsh: 1
Queen
font-feature-settings: "swsh" 1; Swashes are almost always paired with the font's italic. Shown here in Cormorant Garamond, whose web build keeps its swash alternates; EB Garamond's does not.
Stylistic sets ss01ss20
A grab-bag mechanism for whatever alternates a designer wants to offer as a named group.
Off
a single-story a, and a double-story g
ss01: 1
a single-story a, and a double-story g
font-feature-settings: "ss01" 1; This font maps its ss01 to a full alternate caps-like form rather than swapping just the single-story a and double-story g, an unusual but real example of how open-ended this tag is: a designer can attach any alternate to it.
9.Character variants

Character variants (cv01 through cv99) work like stylistic sets but at the level of a single character rather than a named group, commonly used to offer an alternate 1, a, g, or ampersand independent of everything else. Inter's full desktop release documents more than a dozen of these on its own specimen page, including an alternate figure "1" without the base serif, mapped to cv01.

Character variants cv01
Inter's cv01: documented as an alternate figure "1" without the base serif.
Off
1,110 units in lot 1
cv01: 1
1,110 units in lot 1
font-feature-settings: "cv01" 1; The Google Fonts web build doesn't always ship every character variant found in a font's full desktop release, so this row may render identically to the one above; the syntax is what to take away.
10.Case-sensitive forms

Punctuation is normally centered for mixed-case text, but next to all-capital letters, that centering reads as too low. case raises and re-centers punctuation like parentheses, brackets, hyphens, and quotation marks so they sit correctly beside full capitals, which matters most in headlines, logotypes, and all-caps UI labels.

Case-sensitive forms case
Re-centers punctuation to sit correctly next to capital-height letters.
Off
Nimatype (Est. 2019) Fonts & Type
case: 1
Nimatype (Est. 2019) Fonts & Type
font-feature-settings: "case" 1; Not included in Inter's Google Fonts web build. Fonts that do implement it noticeably lower and re-center the parentheses and em dash above compared to the row above.
11.Kerning & localized forms

kern is the oldest and most fundamental OpenType feature: pair-specific spacing adjustments so combinations like "AV," "To," and "Wa" don't sit with visually uneven gaps. It's a GPOS feature: it repositions glyphs rather than substituting them, and it's on by default in essentially every browser and font.

Kerning kern
Pair-specific spacing correction, most visible in capital-letter combinations.
off
AVATAR, To Wave, Yoga
kern: 1
AVATAR, To Wave, Yoga
font-kerning: normal | none;

locl (localized forms) is different in kind from every feature above: instead of a stylistic choice, it's a correctness rule that depends on the language tag applied to the text, not a simple on/off switch. The classic example is Turkish, where a capital "I" lowercases to a dotless "ı," not the dotted "i" every other Latin-script language expects, so a font needs a Turkish-specific substitution to render either language correctly from the same glyph set. Indic scripts depend on locl even more heavily, since it is one of the features every Brahmic script shaping engine relies on to pick the right regional glyph forms.

12.Quick reference

Every feature covered above, with its tag and the CSS that turns it on.

Ligatures
liga · dlig · hlig: font-variant-ligatures
Alternates
calt · salt: font-variant-ligatures: contextual
Case
smcp · c2sc: font-variant-caps
Numerals
lnum · onum · pnum · tnum: font-variant-numeric
Fractions & more
frac · ordn · zero: font-variant-numeric
Position
sups · subs · sinf: font-variant-position
Decorative
swsh · ss01ss20 · cv01cv99: font-feature-settings
Punctuation
case: font-feature-settings
Spacing & language
kern: font-kerning · locl: driven by the lang attribute
Design takeaway
A font isn't "done" once it has glyphs for every character. The features above are what turn a static glyph set into typography that responds correctly to context, language, and use case. When you're evaluating a font for a project, check its specimen page for which of these it actually implements.