OpenType Feature Explorer

The OpenType feature explorer toggles the features webfonts actually ship and shows each sample line changing as the tags are switched. Two facts are stated rather than hidden: features are font-dependent, and the modern CSS properties are preferred over raw tag settings.

What is OpenType Feature Explorer?

The OpenType feature explorer switches the features a webfont may or may not contain and renders a sample line for each one, so the effect can be seen before it is trusted. Twelve tags are covered, from the ones every text face ships to the ones only a few families implement.

The tags are grouped by what they change.

• Shaping basics: kerning and standard ligatures, which are on by default in any sensible stylesheet.
• Letterform variants: discretionary ligatures, small caps, and stylistic alternates with the first two stylistic sets, which are the tags most likely to be missing from a given face.
• Figures: old-style figures, tabular figures and fractions, which matter whenever numbers sit in a table or a paragraph.
• Position and case: superscript forms and case-sensitive punctuation, which adjust marks near capitals.

The samples are not decorative, they are the evidence. The tabular figures sample stacks four ones over four nines, which is where equal widths show themselves as a clean column; the old-style sample shows how the same digits sit within a line of text; the small caps sample is set in lower case so the rendered result exposes whether the face has real small capitals or is synthesising them by shrinking capitals; and the case-sensitive sample puts capitals inside brackets, where the difference between a default and an adjusted form is visible immediately.

The two CSS modes are the part that matters in a stylesheet. The raw mode writes font-feature-settings as a list of all twelve tags with each value set to one or zero, which is explicit and also blunt: the tags that are off are actively disabled, and the declaration has to be maintained whenever a new tag is used. The property mode emits the registered font-variant properties instead — variant-ligatures, variant-numeric, variant-caps, variant-position and variant-alternates — which inherit and cascade like ordinary CSS and leave anything unmapped at its default. The reference table lists which property corresponds to each tag, so a design system can be written in properties and only fall back to raw tags for unregistered stylistic sets.

Two honest limits are stated on the panel, and two more follow from the way features are requested.

• A feature the font does not contain is ignored silently, with no error and no warning, so an unconfirmed tag produces no visible change and no complaint; the panel therefore lists which tags the chosen face plausibly ships, as a guide rather than a guarantee.
• Feature interaction is not modelled, since two tags can affect the same glyph, so combining several on one line is the only way to see the true result.
• The raw mode writes all twelve tags with explicit values, so the declaration has to be regenerated whenever a tag is added to the design.
• Nothing compares the rendered output against a synthesised alternative, so a face without true small capitals will simply look as though the feature did nothing.

Read the samples as the evidence and the reference table as the mapping: what a tag does is a property of the font, and what CSS should carry is a property of the project.

How to use OpenType Feature Explorer

1. Choose the face first and read the likely-present column, since the tags a face supports are the ones worth switching on.
2. Toggle the tags one at a time and watch their sample lines, using the custom sample field when the text you care about differs from the default.
3. Switch between the raw and property CSS modes to see both declarations and decide which the project's stylesheet should carry.
4. Copy the generated declaration, then confirm on a real page that the face actually contains the features and that nothing is being synthesised.

When to use OpenType Feature Explorer vs related tools

Reach for it when a design calls for small caps or old-style figures and it is unclear whether the face ships them or the browser is faking them, when a stylesheet needs to move from raw feature tags to the registered properties, or when a typographic detail behaves differently in different browsers. Seeing the sample change is the test. For spacing rather than features the kerning pair inspector measures pair adjustments, the variable font sliders explore axis values, and the font specimen sheet shows the whole repertoire as a printable page.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about OpenType Feature Explorer