OpenType Features

OpenType Features Overview

OpenType features unlock the full potential of professional typefaces—ligatures, small caps, alternate figures, and much more.

What Are OpenType Features?

OpenType features are built-in capabilities within font files that enable advanced typography. They work through two mechanisms: glyph substitution (GSUB)—replacing one glyph with another—and glyph positioning (GPOS)—adjusting the placement of glyphs relative to each other.

GSUB (Substitution)

Replaces glyphs with alternates. Examples: ligatures (fi → ﬁ), small caps, stylistic alternates, contextual substitutions.

GPOS (Positioning)

Adjusts glyph positions. Examples: kerning pairs, mark positioning, cursive attachment for connected scripts.

Feature Categories

Ligatures

Ligatures combine two or more characters into a single glyph. They solve awkward collisions (like the dot of “i” hitting the overhang of “f”) and can add elegance to text.

fi fl ff

Without ligatures

→

ﬁ ﬂ ﬀ

With ligatures

Tip: Standard ligatures (liga) are on by default in most software. Discretionary ligatures (dlig) must be explicitly enabled and may be too decorative for body text.

Numeral Styles

Professional fonts often include multiple numeral styles. Choosing the right style improves readability and visual harmony.

0123456789

Lining Figures

All digits sit on the baseline and reach cap height. Best for headlines, all-caps text, and tables.

0123456789

Oldstyle Figures

Digits have varying heights like lowercase letters. Best for running text, blending with body copy.

111

888

Tabular Figures

All digits have equal width for vertical alignment. Essential for financial tables, data displays.

111

888

Proportional Figures

Digits have natural widths (1 is narrow, 0 is wide). Best for running text where alignment isn't needed.

Small Caps

True small caps are not simply scaled-down capitals—they're optically designed with adjusted stroke weights and proportions to match the x-height and color of lowercase letters.

FAKE SMALL CAPS

Scaled capitals: too light, poor proportions

ᴛʀᴜᴇ sᴍᴀʟʟ ᴄᴀᴘs

True small caps: balanced weight, proper design

Feature Reference

Tag	Name	Category	Default	Description
liga	Standard Ligatures	Substitution	On	Combines certain character pairs into single glyphs for improved appearance (fi, fl, ff, ffi, ffl).
dlig	Discretionary Ligatures	Substitution	Off	Additional ligatures for stylistic effect (ct, st, sp). Not always appropriate for body text.
calt	Contextual Alternates	Substitution	On	Replaces glyphs based on surrounding characters. Essential for connected scripts and code fonts.
smcp	Small Caps	Substitution	Off	Replaces lowercase letters with small capital forms, optically designed for this size.
c2sc	Caps to Small Caps	Substitution	Off	Converts uppercase letters to small caps as well.
onum	Oldstyle Figures	Numerals	Off	Uses old-style (text) figures that have varying heights, ideal for running text.
lnum	Lining Figures	Numerals	Off	Uses lining (tabular-height) figures, all the same height as capitals.
tnum	Tabular Figures	Numerals	Off	Uses monospaced (equal-width) figures for alignment in tables and columns.
pnum	Proportional Figures	Numerals	Off	Uses proportionally-spaced figures where each digit has natural width.
frac	Fractions	Substitution	Off	Converts sequences like 1/2 into proper fraction glyphs.
sups	Superscripts	Substitution	Off	Replaces characters with optically-designed superscript forms.
subs	Subscripts	Substitution	Off	Replaces characters with optically-designed subscript forms.
ordn	Ordinals	Substitution	Off	Formats ordinal indicators (1st, 2nd, 3rd) with proper superscript forms.
swsh	Swash	Substitution	Off	Provides decorative swash alternates, often for initial or final letters.
salt	Stylistic Alternates	Substitution	Off	Access to alternate glyph designs for individual characters.
ss01–ss20	Stylistic Sets	Substitution	Off	Grouped sets of alternates, each set applying a consistent style variation.
kern	Kerning	Positioning	On	Adjusts spacing between specific letter pairs for optical consistency.
case	Case-Sensitive Forms	Positioning	Off	Adjusts punctuation and symbols for use with all-caps text.

Using Features in CSS

OpenType features can be enabled in CSS using font-feature-settings or the newer, more readable high-level properties.

/* Low-level: font-feature-settings */
.fancy-text {
  font-feature-settings: "liga" 1, "dlig" 1, "smcp" 1;
}

/* High-level properties (recommended) */
.body-text {
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-variant-caps: small-caps;
}