Tools
OpenType Feature Tester
An OpenType feature tester turns the OpenType tables inside a font on and off from CSS. Each feature is a four-character tag the browser reads through font-feature-settings. Not every font supports every feature, so the tester loads a real font, applies your toggles, and shows the effect live with copy-ready CSS.
What Are OpenType Features?
OpenType is a font format jointly developed by Microsoft and Adobe that stores glyph substitutions and positioning rules in tables inside the font file. The browser reads these tables and applies the rules when you toggle a feature. The four-character tags are short names for those tables, registered by Microsoft and Adobe. The Microsoft OpenType specification is the canonical reference for every registered tag.
CSS exposes those tags through two properties. The low-level property is font-feature-settings, documented on MDN. It takes a list of tags and a 0 or 1 to turn each one off or on. The high-level property is font-variant, which uses human-readable keywords like common-ligatures and small-caps. The high-level form is preferred because it lets the browser pick sensible defaults and respects user preferences. Use the low-level form when you need a tag the high-level property does not cover, such as ss01 through ss20.
Font support varies. A font with no GSUB table will not run any substitution features. A sans-serif built for UI may ship only liga, kern, and tnum. An editorial serif like Fraunces or Playfair Display ships small caps, oldstyle figures, discretionary ligatures, and several stylistic sets. If a toggle in this tool produces no visible change, the selected font does not include that OpenType table.
Common OpenType Features
The features in this tester cover the tags a working designer reaches for most. Figure style (oldstyle or lining) and figure width (tabular or proportional) are mutually exclusive pairs.
| Tag | Name | What it does |
|---|---|---|
| liga | Standard ligatures | Replaces colliding letter pairs like fi, fl, and ff with single glyphs. |
| dlig | Discretionary ligatures | Decorative ligatures the designer chooses to enable, like ct or st. |
| kern | Kerning | Adjusts spacing between specific letter pairs for tighter or looser fitting. |
| onum | Oldstyle figures | Lowercase-style digits with descenders and ascenders for running text. |
| lnum | Lining figures | Uppercase-style digits that sit on the baseline at a single height. |
| tnum | Tabular figures | Mono-width digits so columns of numbers line up vertically. |
| pnum | Proportional figures | Variable-width digits tuned for body text. |
| smcp | Small caps | Replaces lowercase letters with small uppercase forms at cap height. |
| c2sc | Caps to small caps | Replaces uppercase letters with small caps for a uniform look. |
| frac | Fractions | Turns slash-separated digits like 1/2 into proper fractions. |
| calt | Contextual alternates | Swaps in alternates based on neighboring letters, common in scripts. |
| swsh | Swash | Decorative flourishes on letters for display and titling. |
| ss01 | Stylistic set 1 | Foundry-defined alternate glyph set. Meaning depends on the font. |
| ss02 | Stylistic set 2 | Foundry-defined alternate glyph set. Meaning depends on the font. |
Related Tools
The OpenType feature tester sits next to four other tools. Browse the full font catalog to see which faces ship which features, drag the variable-font axes to test weight and optical size, drop a local file into the inspector to read its tables, or compose a full layout in the playground.