OpenType

OpenType is a font format specification developed jointly by Microsoft and Adobe in the late 1990s, building on and superseding the earlier TrueType and Type 1 formats. It became the dominant font format for print and digital publishing, and today virtually all professional typefaces are distributed as OpenType files with the .otf or .ttf extension.

OpenType's most significant contribution beyond its predecessor formats is an extensive system of typographic features — discrete capabilities that enable sophisticated typographic refinement. These features are accessed via standardized four-letter tags and can be enabled in CSS using font-feature-settings or the higher-level font-variant-* properties.

/* High-level font-variant properties (preferred approach) */
.refined-typography {
  /* Small capitals */
  font-variant-caps: small-caps;

  /* Oldstyle figures for body text */
  font-variant-numeric: oldstyle-nums;

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

  /* Proportional vs tabular nums */
  font-variant-numeric: proportional-nums;
}

/* Low-level font-feature-settings for precise control */
.data-table {
  font-feature-settings:
    "tnum" 1,   /* Tabular numbers — equal-width for alignment */
    "lnum" 1,   /* Lining figures — same height as capitals */
    "kern" 1;   /* Kerning */
}

.editorial-body {
  font-feature-settings:
    "onum" 1,   /* Old-style figures — varied height, more readable in text */
    "liga" 1,   /* Standard ligatures (fi, fl, ff) */
    "kern" 1;
}

/* Stylistic alternates */
.alternate-style {
  font-feature-settings: "ss01" 1, "ss02" 1; /* Stylistic set 1 and 2 */
}

/* Contextual alternates — automatically adjust based on surrounding chars */
.contextual {
  font-feature-settings: "calt" 1; /* Usually on by default */
}

Common OpenType features include: liga (standard ligatures like fi, fl), onum (old-style or text figures), lnum (lining figures), tnum (tabular/monospaced figures), sups and subs (superscript and subscript), smcp (small capitals), swsh (swash alternates), frac (diagonal fractions), and the ss01-ss20 stylistic sets which expose typeface-specific alternates.

Not every OpenType feature is available in every font. A font must explicitly include the feature data for CSS to activate it — requesting an unavailable feature simply has no effect. Google Fonts typefaces like EB Garamond include extensive OpenType features including swash alternates and old-style figures, while simpler display fonts may only contain the basics. The best way to discover what a font supports is to check its specimen on the type foundry's website or use a tool like Wakamai Fondue (wakamaifondue.com).