Complete Guide to OpenType Features

Master advanced typography with comprehensive coverage of ligatures, alternates, stylistic sets, and CSS implementation

TL;DR

In Simple Terms

OpenType features are embedded typographic capabilities like ligatures (fi, fl combined), stylistic alternates (variant letter shapes), and number styles (old-style vs lining figures).Control with CSS: font-variant-ligatures for ligatures, font-variant-numeric for numbers, font-feature-settings for low-level access (e.g., font-feature-settings: "smcp" for small caps).Most useful features: standard ligatures (usually on by default), small caps for headings, tabular numbers for data tables, and stylistic sets for design variation.

Summarize this page with:

ChatGPT Perplexity Claude Grok AI Google AI

Share this page to:

LinkedIn Reddit

In this article

Convert Font Instantly Explore Font Converters Understand Font Formats

Quick Links

Convert Font Instantly

Explore Font Converters

Understand Font Formats

OpenType features are advanced typographic capabilities embedded within OpenType fonts that enable sophisticated text rendering, automatic glyph substitution, and precise positioning control. These features transform basic character input into refined typography through ligatures that join characters seamlessly, contextual alternates that adapt to surrounding letters, stylistic sets that offer design variations, and dozens of other refinements that elevate text from functional to beautiful.

Originally developed by Microsoft and Adobe in the mid-1990s, OpenType features revolutionized digital typography by enabling a single font file to contain thousands of glyphs and complex layout rules. Where traditional fonts offered only basic character mapping, OpenType fonts can include multiple versions of each letter, automatic fraction formatting, language-specific variants, mathematical symbols, and context-aware substitutions that respond intelligently to the characters around them.

This comprehensive guide explores all major OpenType features, explaining what they do, when to use them, and how to implement them in CSS for web typography. You'll learn about standard ligatures and discretionary ligatures, contextual alternates and stylistic alternates, small caps and petite caps, oldstyle and lining figures, swashes and ornaments, and the CSS properties that control them. Whether you're a designer seeking typographic refinement or a developer implementing professional web typography, understanding OpenType features unlocks the full potential of modern fonts.

What Are OpenType Features?

Technical Foundation

OpenType features are implemented through two main table types in the font file:

GSUB (Glyph Substitution): Controls character replacement
- Replaces one or more glyphs with alternatives
- Examples: ligatures, swashes, small caps
- Context-aware: can consider surrounding characters
GPOS (Glyph Positioning): Controls character positioning
- Adjusts spacing and placement of glyphs
- Examples: kerning, mark positioning
- Enables precise optical alignment

Feature Tags System

Each OpenType feature has a four-letter tag (e.g., 'liga', 'smcp', 'swsh'):

Tag	Feature Name	Category
liga	Standard Ligatures	Common
dlig	Discretionary Ligatures	Optional
calt	Contextual Alternates	Common
smcp	Small Capitals	Capitals
swsh	Swashes	Decorative

Browser Support

Modern browsers have excellent OpenType feature support:

• Chrome/Edge: Full support since 2011 (Chrome 16+)
• Firefox: Full support since 2011 (Firefox 4+)
• Safari: Full support since 2013 (Safari 7+)
• Mobile: iOS 7+, Android 5+ support most features
• Coverage: 97%+ of global browser usage
• Fallback: Unsupported features simply don't apply, text remains readable

Ligatures

Standard Ligatures (liga)

Purpose: Replace character combinations that would otherwise collide or look awkward

Common Standard Ligatures:

• fi, fl - Most common, prevents collision between f and tall letters
• ff, ffi, ffl - Multiple f combinations
• ft, tt - Less common but included in many fonts

Visual Example:

Without ligatures:

office fluffyffle

With ligatures:

office fluffyffle

CSS Implementation:

/* Enable standard ligatures (usually on by default) */
.with-ligatures {
  font-feature-settings: "liga" 1;
  /* Or use modern property: */
  font-variant-ligatures: common-ligatures;
}

/* Disable ligatures */
.no-ligatures {
  font-feature-settings: "liga" 0;
  font-variant-ligatures: no-common-ligatures;
}

Discretionary Ligatures (dlig)

Purpose: Stylistic ligatures for decorative or historical typography, not required for legibility

Examples:

• ct, st - Decorative connections
• sp, ck - Historical letterforms
• Th, ch - Display typography combinations
• Font-specific custom ligatures

When to Use:

• Headlines and display text
• Historical or decorative contexts
• Brand typography with distinctive character
• Print design and high-end publications
• Avoid: Body text, small sizes, accessibility-critical content

CSS Implementation:

.discretionary-ligatures {
  font-feature-settings: "dlig" 1;
  font-variant-ligatures: discretionary-ligatures;
}

/* Combine with standard ligatures */
.all-ligatures {
  font-variant-ligatures: common-ligatures discretionary-ligatures;
}

Contextual Ligatures (clig)

Purpose: Context-dependent ligatures that apply based on surrounding characters

• Often enabled by default alongside standard ligatures
• Used in script and handwriting fonts for natural connections
• Adjusts character shapes to blend with neighbors
• Example: cursive fonts connecting letters smoothly

Ligature Best Practices

Enable by default: Standard ligatures improve readability
Disable for: Code, passwords, technical content where exact characters matter
Use discretionary sparingly: Only in display sizes and appropriate contexts
Test accessibility: Ensure screen readers handle ligatures correctly
Consider language: Some ligatures inappropriate for certain languages

Contextual Alternates

Contextual Alternates (calt)

Purpose: Automatically substitute glyphs based on surrounding context to improve appearance and avoid collisions

Common Uses:

• Script fonts: Connecting letters naturally in cursive typefaces
• Collision avoidance: Adjusting glyphs to prevent awkward overlaps
• Optical improvements: Better spacing in specific letter combinations
• Randomization: Display fonts cycling through glyph variants

Examples in Script Fonts:

Without contextual alternates, script fonts have disconnected letters

With contextual alternates, connections flow naturally from one letter to the next

Example: "connecting" in a script font would adjust the 'n' after 'o' and 'c' after 'n' to create smooth joins

CSS Implementation:

/* Enable contextual alternates (usually on by default) */
.contextual {
  font-feature-settings: "calt" 1;
  font-variant-ligatures: contextual;
}

/* Disable if causing issues */
.no-contextual {
  font-feature-settings: "calt" 0;
  font-variant-ligatures: no-contextual;
}

Real-World Applications

Handwriting Fonts:

• Natural letter connections
• Entry and exit strokes adjusted
• Baseline alignment improvements
• Multiple alternates for variation

Display Fonts:

• Avoiding glyph collisions
• Optical spacing improvements
• Stylistic variations for interest
• Controlled randomization

Stylistic Sets and Alternates

Stylistic Sets (ss01-ss20)

Purpose: Grouped sets of alternate glyphs for consistent stylistic variations across the font

Common Stylistic Set Examples:

• ss01: Alternate a, g (single-story vs double-story)
• ss02: Alternate l, I (with or without serifs)
• ss03: Simplified @ symbol
• ss04: Rounder punctuation
• ss05: Alternate ampersand designs

CSS Implementation:

/* Enable specific stylistic set */
.stylistic-set-1 {
  font-feature-settings: "ss01" 1;
}

/* Combine multiple sets */
.multiple-sets {
  font-feature-settings: "ss01" 1, "ss03" 1, "ss05" 1;
}

/* Modern CSS (limited browser support) */
.modern-syntax {
  font-variant-alternates: styleset(ss01, ss03);
}

Discovering Available Sets:

• Check font specimen or documentation
• Use font inspection tools (FontGoggles, FontLab)
• Browser DevTools font features panel
• Adobe applications: Character panel → OpenType

Stylistic Alternates (salt)

Purpose: Individual alternate glyphs not grouped into sets

.stylistic-alternates {
  font-feature-settings: "salt" 1;
  font-variant-alternates: stylistic(salt);
}

Note: Less predictable than stylistic sets. Font applies designer-chosen alternates.

Character Variants (cv01-cv99)

Purpose: Individual character alternates, more granular than stylistic sets

/* Enable specific character variant */
.char-variant {
  font-feature-settings: "cv01" 1, "cv05" 1;
}

Common uses: Single letter alternates (a, g, y), number variants, punctuation styles

Case-Sensitive Forms

Case-Sensitive Forms (case)

Purpose: Adjusts punctuation and symbols to align better with uppercase letters

Affected Characters:

• Parentheses: ( ) raised to align with cap height
• Brackets: [ ] adjusted vertically
• Hyphens/dashes: – — positioned at cap height
• At symbol: @ centered on capitals
• Other symbols: % $ & raised appropriately

Visual Comparison:

Normal:

COMPANY (USA) – FOUNDED 2020

Case-sensitive:

COMPANY (USA) – FOUNDED 2020

Notice parentheses and dash align better with capitals

CSS Implementation:

/* Apply to all-caps text */
.all-caps {
  text-transform: uppercase;
  font-feature-settings: "case" 1;
}

/* Use with small-caps */
.small-caps {
  font-variant-caps: small-caps;
  font-feature-settings: "case" 1;
}

Small Capitals (smcp, c2sc)

Small Caps (smcp):

Converts lowercase letters to small capital letters designed to harmonize with lowercase x-height

.small-caps {
  font-feature-settings: "smcp" 1;
  /* Or use modern property: */
  font-variant-caps: small-caps;
}

Capitals to Small Caps (c2sc):

Converts uppercase letters to small capital letters, useful for acronyms

.all-small-caps {
  font-feature-settings: "smcp" 1, "c2sc" 1;
  /* Or: */
  font-variant-caps: all-small-caps;
}

Petite Caps (pcap, c2pc):

Smaller capitals designed to match lowercase height more closely. Less common but more refined.

When to Use Small Caps

• Acronyms in body text: NASA, FBI look less obtrusive
• Historical dates: AD, BC, CE in scholarly texts
• Opening passages: First few words of chapters
• Honorifics: Dr., Mr., Mrs. in formal documents
• Avoid: Long passages (reduces readability)

Number Styles and Fractions

Lining vs Oldstyle Figures

Lining Figures (lnum) - Default:

All numbers same height, align with capitals. Best for tables, data, all-caps text.

0123456789

Oldstyle Figures (onum):

Numbers have ascenders and descenders like lowercase letters. More elegant in body text.

0123456789

CSS Implementation:

/* Oldstyle figures for body text */
.body-text {
  font-feature-settings: "onum" 1;
  font-variant-numeric: oldstyle-nums;
}

/* Lining figures for tables */
.tabular-data {
  font-feature-settings: "lnum" 1;
  font-variant-numeric: lining-nums;
}

Proportional vs Tabular Figures

Proportional (pnum):

Numbers have varying widths (1 narrower than 8). Natural spacing in text.

111

888

Tabular (tnum):

All numbers same width. Essential for tables and columns to align vertically.

111

888

Notice vertical alignment

CSS Implementation:

/* Tabular figures for tables and timers */
.data-table {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* Combine oldstyle + tabular */
.elegant-data {
  font-variant-numeric: oldstyle-nums tabular-nums;
}

Fractions

Fractions (frac):

Automatically formats fractions with proper numerators and denominators

Without: 1/2 3/4 5/8

With: 1/2 3/4 5/8

CSS Implementation:

.fractions {
  font-feature-settings: "frac" 1;
  font-variant-numeric: diagonal-fractions;
}

/* Stacked fractions (afrc) - vertical layout */
.stacked-fractions {
  font-feature-settings: "afrc" 1;
  font-variant-numeric: stacked-fractions;
}

Numerators and Denominators:

• numr: Numerator style (small, raised)
• dnom: Denominator style (small, lowered)
• Used when manually constructing fractions

Other Numeric Features

Slashed Zero (zero): Distinguishes 0 from O
```
font-feature-settings: "zero" 1;
```
Superscripts (sups): Proper superscript numbers
```
font-variant-position: super;
```
Subscripts (subs): Proper subscript numbers
```
font-variant-position: sub;
```

Decorative Features

Swashes (swsh, cswh)

Purpose: Decorative flourishes on letters, typically at word beginnings or ends

Swashes (swsh): Generic swash alternates
```
font-feature-settings: "swsh" 1;
```
Contextual Swashes (cswh): Context-aware swashes
```
font-feature-settings: "cswh" 1;
```
Best for: Display text, headings, elegant invitations
Avoid: Body text, small sizes, extended passages

Ornaments (ornm)

Purpose: Decorative glyphs and symbols for embellishment

• Fleurons and dingbats
• Borders and dividers
• Decorative initial caps
• Often accessed via specific character codes

Titling Alternates (titl)

Purpose: Alternate glyphs optimized for large display sizes

.title-text {
  font-feature-settings: "titl" 1;
  font-size: 4rem;
}

Typically features tighter spacing, adjusted proportions for headlines

CSS Implementation

Modern CSS Properties

Modern CSS provides semantic properties for common features:

/* Ligatures */
font-variant-ligatures: common-ligatures discretionary-ligatures;

/* Numeric styles */
font-variant-numeric: oldstyle-nums tabular-nums diagonal-fractions;

/* Capitals */
font-variant-caps: small-caps;

/* Position */
font-variant-position: super;  /* or sub */

/* East Asian */
font-variant-east-asian: jis04;

Low-Level Control: font-feature-settings

Syntax: Use for features without dedicated CSS properties

/* Enable single feature */
font-feature-settings: "swsh" 1;

/* Multiple features */
font-feature-settings: "liga" 1, "dlig" 1, "swsh" 1;

/* Disable feature */
font-feature-settings: "liga" 0;

/* Numeric values for features with multiple levels */
font-feature-settings: "ss01" 1, "ss02" 1;

Important Notes:

• Not additive: Each declaration replaces previous one
• Include all features: List everything you need in one declaration
• Inheritance: Child elements inherit but can override
• Performance: No performance cost; browser-optimized

Practical Implementation Patterns

Body Text (Elegant):

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

Display Headings:

.heading {
  font-feature-settings: "liga" 1, "dlig" 1, "swsh" 1, "titl" 1;
}

Data Tables:

.data-table {
  font-variant-numeric: lining-nums tabular-nums;
  font-variant-ligatures: no-common-ligatures;
}

Code Blocks:

code, pre {
  font-variant-ligatures: none;
  font-feature-settings: "calt" 0, "liga" 0;
}

Feature Detection and Fallbacks

/* Feature query for browser support */
@supports (font-variant-numeric: oldstyle-nums) {
  .body-text {
    font-variant-numeric: oldstyle-nums;
  }
}

/* Fallback for older browsers */
@supports not (font-variant-numeric: oldstyle-nums) {
  .body-text {
    font-feature-settings: "onum" 1;
  }
}

Note: Modern browsers support both syntaxes. Fallbacks rarely needed in 2025.

Testing and Debugging

Chrome DevTools:
- Inspect element → Computed → scroll to font properties
- Shows active and available OpenType features
Firefox DevTools:
- Fonts panel shows all available features
- Toggle features on/off to preview
Wakamaifondue: Online tool to analyze font features (wakamaifondue.com)
Testing approach: Test with actual content, not Lorem Ipsum

OpenType Features Checklist

☐ Verify font actually contains desired features
☐ Enable standard ligatures for body text
☐ Use contextual alternates for script fonts
☐ Apply tabular figures to data tables
☐ Use oldstyle figures in elegant body text
☐ Enable case-sensitive forms for all-caps text
☐ Apply small caps to acronyms
☐ Disable ligatures in code blocks
☐ Test features in target browsers
☐ Document which features are used and why

Summary: Mastering OpenType Features

OpenType features transform basic typography into refined, professional text through intelligent glyph substitution and positioning. Standard ligatures and contextual alternates should be enabled by default for improved readability, while discretionary features like swashes and stylistic sets add distinctive character to display text. Number styles matter: use tabular figures for tables and oldstyle figures for elegant body text, and always apply case-sensitive forms to all-caps text for proper punctuation alignment.

Implementation requires understanding both modern CSS properties like font-variant-ligatures and font-variant-numeric for common features, and font-feature-settings for advanced control of stylistic sets, swashes, and ornaments. With 97%+ browser support, OpenType features are production-ready and essential for professional web typography. Test features in DevTools, verify fonts contain required features, and document your choices for maintainability.

Written & Verified by

Sarah Mitchell

Product Designer, Font Specialist