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 One—NIMATYPE
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.
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.
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 ss01–ss20
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.
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 · ss01–ss20 · cv01–cv99: 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.
© 2026 Nimatype • Font Engineering Series • Article 1
Back to top