The Complete CSS Demo for OpenType Features

This project is a comprehensive CSS font-feature-settings demo for OpenType features, a refined version of Syntax for OpenType features in CSS by Adobe, licensed under CC BY-NC-SA 3.0.

Featured fonts listed below are hand-picked with high quality. If you find some cool fonts with specific OpenType features support or want to add missing OpenType features, feel free to contribute it on GitHub.

West Asian (Semitic, Arabic)

South-Asian alphasyllabaries (Indic/Brahmic)

Writing Direction

Access All Alternates: aalt

Special feature: used to present user with choice all alternate forms of the character

Featured Fonts

Sorts Mill Goudy’s 1/3 wizard dog.

Sorts Mill Goudy’s 1/3 wizard dog.

.of-aalt{font-feature-settings:"aalt";}

Swashes: swsh

This feature replaces default character glyphs with corresponding swash glyphs.

Featured Fonts

Fred AndGinger

Fred AndGinger

.of-swsh{font-feature-settings:"swsh";}

Contextual Swash: cswh

Converts letter to a swashed version based on characters around the letter

Featured Fonts

I feel great today.

I feel great today.

.of-cswh{font-feature-settings:"cswh";}

Contextual Alternates: calt

This feature, in specified situations, replaces default glyphs with alternate forms which provide better joining behavior. Like ligatures (though not strictly a ligature feature), contextual alternates are commonly used to harmonize the shapes of glyphs with the surrounding context.

Historical Forms: hist

Obsolete forms of characters to be applied at the user’s discretion, cf. hlig

Featured Fonts

Aparadise lost

Aparadise lost

.of-hist{font-feature-settings:"hist";}

Historical Ligatures: hlig

Obsolete ligatures to be applied at the user’s discretion

Featured Fonts

ſinful ſingular

ſinful ſingular

.of-hlig{font-feature-settings:"hlig";}

Localised Forms: locl

Many scripts used to write multiple languages over wide geographical areas have developed localized variant forms of specific letters, which are used by individual literary communities. For example, a number of letters in the Bulgarian and Serbian alphabets have forms distinct from their Russian counterparts and from each other. In some cases the localized form differs only subtly from the script ‘norm’, in others the forms are radically distinct. This feature enables localized forms of glyphs to be substituted for default forms.

Featured Fonts

гпклдвзитжц

гпклдвзитжц

.of-locl{font-feature-settings:"locl";}

Randomize: rand

Replaces character with random forms (meant to simulate handwriting)

Free stood speech!

Free stood speech!

.of-rand{font-feature-settings:"rand";}

Alternate Annotation Forms: nalt

This feature replaces default glyphs with various notational forms (e.g. glyphs placed in open or solid circles, squares, parentheses, diamonds or rounded boxes). In some cases an annotation form may already be present, but the user may want a different one.

Character Variant 1 – 99: cv01-cv99

Multiple variants of a single character, which may not apply to many other characters, see references for voluminous documentation.

Stylistic Alternates: salt

This feature replaces default character glyphs with stylistic alternates.

Featured Fonts

Easy Sunday morning&my fox.

Easy Sunday morning&my fox.

.of-salt{font-feature-settings:"salt";}

Subscript: subs

This feature may replace a default glyph with a subscript glyph, or it may combine a glyph substitution with positioning adjustments for proper placement.

Featured Fonts

.of-subs{font-feature-settings:"subs";}

Superscript: sups

This feature replaces lining or oldstyle figures with superior figures (primarily for footnote indication), and replaces lowercase letters with superior letters (primarily for abbreviated French titles).

Featured Fonts

.of-sups{font-feature-settings:"sups";}

Titling Alternates: titl

Replaces characters with forms suited for large type, as in titles

Featured Fonts

Quick brown lazy Grumpy

Quick brown lazy Grumpy

.of-titl{font-feature-settings:"titl";}

Required Variation Alternates: rvrn

Special variants of a single character, which need apply to specific font variation, required by variable fonts

.of-rvrn{font-feature-settings:"rvrn";}

Standard Ligatures: liga

This feature replaces a sequence of glyphs with a single glyph, called a ligature, which is preferred for typographic purposes. When enabled, this feature inserts the ligatures which the designer/manufacturer judges should be used in normal conditions.

Discretionary Ligatures: dlig

This feature, in specified situations, replaces default glyphs with alternate forms which provide better joining behavior. Like ligatures (though not strictly a ligature feature), contextual alternates are commonly used to harmonize the shapes of glyphs with the surrounding context.

Featured Fonts

.of-dlig{font-feature-settings:"dlig";}

Optical size: size

Not a lookup: feature’s table provides to applications information about the appearance and intent of the font, to aid in font selection. Demo is not available on the web.

Featured Fonts

Ornaments: ornm

This is a dual-function feature, which uses two input methods to give the user access to ornament glyphs (e.g. fleurons, dingbats and border elements) in the font. One method replaces the bullet character with a selection from the full set of available ornaments; the other replaces specific “lower ASCII” characters with ornaments assigned to them. The first approach supports the general or browsing user; the second supports the power user.

Featured Fonts

.of-ornm{font-feature-settings:"ornm";}

Glyph Composition / Decomposition: ccmp

To minimize the number of glyph alternates, it is sometimes desired to decompose a character into two glyphs. Additionally, it may be preferable to compose two characters into a single glyph for better glyph processing. This feature permits such composition/decompostion. The feature should be processed as the first feature processed, and should be processed only when it is called.

Featured Fonts

.of-ccmp{font-feature-settings:"ccmp";}

Kerning: kern

This feature adjusts the amount of space between glyphs, generally to provide optically consistent spacing between glyphs. Although a well-designed typeface has consistent inter-glyph spacing overall, some glyph combinations require adjustment for improved legibility. Note that this feature may apply to runs of more than two glyphs, and would not be used in monospaced fonts. Also note that this feature does not apply to text set vertically.

Italics: ital

Some fonts (such as Adobe’s Pro Japanese fonts) will have both Roman and Italic forms of some characters in a single font. This feature replaces the Roman glyphs with the corresponding Italic glyphs.

Featured Fonts

Infinite Jestを読みたい。

Infinite Jestを読みたい。

.of-ital{font-feature-settings:"ital";}

Ordinals: ordn

Featured Fonts

1st, 2nd, 3rd

1st, 2nd, 3rd

.of-ordn{font-feature-settings:"ordn";}

Lining Figures: lnum

This feature changes numeral glyphs from default or oldstyle figures to lining figures. Note that some fonts may contain lining figures as their default figure style, in which case enabling this feature may not appear to affect the style of glyphs.

Featured Fonts

.of-lnum{font-feature-settings:"lnum";}

Oldstyle Figures: onum

This feature changes numeral glyphs from default or lining figures to oldstyle figures. Note that some fonts may contain oldstyle figures as their default figure style, in which case enabling this feature may not appear to affect the style of glyphs.

Featured Fonts

.of-onum{font-feature-settings:"onum";}

Proportional Figures: pnum

This feature replaces numeral glyphs set on uniform (tabular) widths with corresponding glyphs set on glyph-specific (proportional) widths. Note that some fonts may contain proportional figures by default, in which case enabling this feature may not appear to affect the width of glyphs.

Featured Fonts

.of-pnum{font-feature-settings:"pnum";}

Tabular Figures: tnum

This feature replaces numeral glyphs set on glyph-specific (proportional) widths with corresponding glyphs set on uniform (tabular) widths. Note that some fonts may contain tabular figures by default, in which case enabling this feature may not appear to affect the width of glyphs.

Featured Fonts

.of-tnum{font-feature-settings:"tnum";}

Fractions: frac

This feature replaces figures separated by a slash with common (diagonal) fractions.

Featured Fonts

1 3/4 C of flour, 1/2 cup.

1 3/4 C of flour, 1/2 cup.

.of-frac{font-feature-settings:"frac";}

Alternative Fractions: afrc

Converts figures separated by slash with alternative stacked fraction form

Featured Fonts

1 3/4 C of flour, 1/2 cup.

1 3/4 C of flour, 1/2 cup.

.of-afrc{font-feature-settings:"afrc";}

Denominator: dnom

Converts to appropriate fraction denominator form, invoked by frac

Featured Fonts

1 3/4 C of flour, 1/2 cup.

1 3/4 C of flour, 1/2 cup.

.of-dnom{font-feature-settings:"dnom";}

Numerator: numr

Converts to appropriate fraction numerator form, invoked by frac

Featured Fonts

1 3/4 C of flour, 1/2 cup.

1 3/4 C of flour, 1/2 cup.

.of-numr{font-feature-settings:"numr";}

Scientific Inferiors: sinf

As in “H2O”, “SOx”, “YCbCr”, or “NO2”

Featured Fonts

H2O SOx YCbCr NO2

H2O SOx YCbCr NO2

.of-sinf{font-feature-settings:"sinf";}

Slashed Zero: zero

Replaces 0 figure with slashed 0

Featured Fonts

.of-zero{font-feature-settings:"zero";}

Mathematical Greek: mgrk

Replaces Greek characters with special forms for use in mathematics

Featured Fonts

.of-mgrk{font-feature-settings:"mgrk";}

Flattened accent forms: flac

Not available, feel free to contribute!

Not available, feel free to contribute!

.of-flac{font-feature-settings:"flac";}

Dotless Forms: dtls

Not available, feel free to contribute!

Not available, feel free to contribute!

.of-dtls{font-feature-settings:"dtls";}

Math script style alternates: ssty

Not available, feel free to contribute!

Not available, feel free to contribute!

.of-ssty{font-feature-settings:"ssty";}

Stylistic Set 1 – 20: ss01-ss20

This feature replaces sets of default character glyphs with stylistic variants. Glyphs in stylistic sets may be designed to harmonise visually, interact in particular ways, or otherwise work together. See also: stylistic alternates (salt), which is designed to offer stylistic alternatives of individual glyphs.

To enable it with font-feature-settings, use the ss## feature tag, where ## is any two-digit combination from 01–20. Note that fonts employ stylistic sets in completely arbitrary and custom ways. For example, two different fonts may employ the same feature (like ss01) to replace totally different sets of glyphs; or, a particular font may use ss01 and ss03 to replace sets of glyphs, but ignore ss02. Some type foundries offer documentation about how features are organized.

Simplified Forms: smpl

Replaces sinograms with their simplified versions, may be language dependent.

.of-smpl{font-feature-settings:"smpl";}

Traditional Forms: trad

Replaces ‘simplified’ Chinese hanzi or Japanese kanji forms with the corresponding ‘traditional’ forms.

Featured Fonts

.of-trad{font-feature-settings:"trad";}

Traditional Name Forms: tnam

Japanese alternates for proper names

.of-tnam{font-feature-settings:"tnam";}

Expert Forms: expt

Typographic alternatives for some Japanese tetragrams

Featured Fonts

.of-expt{font-feature-settings:"expt";}

Hojo Kanji Forms: hojo

Hojo alternates for Japanese tetragrams

Featured Fonts

.of-hojo{font-feature-settings:"hojo";}

NLC Kanji Forms: nlck

The National Language Council (NLC) of Japan has defined new glyph shapes for a number of JIS characters in 2000. The ‘nlck’ feature is used to access those glyphs.

Featured Fonts

.of-nlck{font-feature-settings:"nlck";}

JIS78 Forms: jp78

This feature replaces default (JIS90) Japanese glyphs with the corresponding forms from the JIS C 6226-1978 (JIS78) specification.

Featured Fonts

.of-jp78{font-feature-settings:"jp78";}

JIS83 Forms: jp83

This feature replaces default (JIS90) Japanese glyphs with the corresponding forms from the JIS X 0208-1983 (JIS83) specification.

Featured Fonts

.of-jp83{font-feature-settings:"jp83";}

JIS90 Forms: jp90

This feature replaces Japanese glyphs from the JIS78 or JIS83 specifications with the corresponding forms from the JIS X 0208-1990 (JIS90) specification.

Featured Fonts

.of-jp90{font-feature-settings:"jp90";}

JIS2004 Forms: jp04

The National Language Council (NLC) of Japan has defined new glyph shapes for a number of JIS characters, which were incorporated into JIS X 0213:2004 as new prototypical forms. The ‘jp04’ feature is a subset of the ‘nlck’ feature, and is used to access these prototypical glyphs in a manner that maintains the integrity of JIS X 0213:2004.

Featured Fonts

.of-jp04{font-feature-settings:"jp04";}

Transliterates Chinese-style characters with Korean Hangul

Not available, feel free to contribute!

Not available, feel free to contribute!

.of-hngl{font-feature-settings:"hngl";}

Leading Jamo Forms: ljmo

Initial group of consonants for a synthesized Korean Hangul tetragram

Not available, feel free to contribute!

Not available, feel free to contribute!

.of-ljmo{font-feature-settings:"ljmo";}

Trailing Jamo Forms: tjmo

Final group of consonants for a synthesized Korean Hangul tetragram

Not available, feel free to contribute!

Not available, feel free to contribute!

.of-tjmo{font-feature-settings:"tjmo";}

Vowel Jamo Forms: vjmo

Medial group of vowels for a synthesized Korean Hangul tetragram

Not available, feel free to contribute!

Not available, feel free to contribute!

.of-vjmo{font-feature-settings:"vjmo";}

Full Widths: fwid

This feature replaces glyphs set on other widths with glyphs set on full (usually em) widths. In a CJKV font, this may include “lower ASCII” Latin characters and various symbols. In a European font, this feature replaces proportionally-spaced glyphs with monospaced glyphs, which are generally set on widths of 0.6 em.

Featured Fonts

チーズバーガー12個をお願いします。

チーズバーガー12個をお願いします。

.of-fwid{font-feature-settings:"fwid";}

Half Widths: hwid

This feature replaces glyphs on proportional widths, or fixed widths other than half an em, with glyphs on half-em (en) widths. Many CJKV fonts have glyphs which are set on multiple widths; this feature selects the half-em version. There are various contexts in which this is the preferred behavior, including compatibility with older desktop documents.

Featured Fonts

チーズバーガー12個をお願いします。

チーズバーガー12個をお願いします。

.of-hwid{font-feature-settings:"hwid";}

Alternate Half Widths: halt

This feature re-spaces glyphs designed to be set on full-em widths, fitting them onto half-em widths. This differs from hwid in that it does not substitute new glyphs.

Featured Fonts

きょう、『広辞苑』を買いたいです。

きょう、『広辞苑』を買いたいです。

.of-halt{font-feature-settings:"halt";}

Third Widths: twid

This feature replaces glyphs on other widths with glyphs set on widths of one third of an em. The characters involved are normally figures and some forms of punctuation.

Featured Fonts

チーズバーガー120個をお願いします。

チーズバーガー120個をお願いします。

.of-twid{font-feature-settings:"twid";}

Quarter Widths: qwid

This feature replaces glyphs on other widths with glyphs set on widths of one quarter of an em (half an en). The characters involved are normally figures and some forms of punctuation.

Featured Fonts

チーズバーガー1200個をお願いします。

チーズバーガー1200個をお願いします。

.of-qwid{font-feature-settings:"qwid";}

Proportional Widths: pwid

This feature replaces glyphs set on uniform widths (typically full or half-em) with proportionally spaced glyphs. The proportional variants are often used for the Latin characters in CJKV fonts, but may also be used for Kana in Japanese fonts.

Featured Fonts

きょう、本を買った。

きょう、本を買った。

.of-pwid{font-feature-settings:"pwid";}

Proportional Alternate Widths: palt

This feature re-spaces glyphs designed to be set on full-em widths, fitting them onto individual (more or less proportional) horizontal widths. This differs from pwid in that it does not substitute new glyphs (GPOS, not GSUB feature). The user may prefer the monospaced form, or may simply want to ensure that the glyph is well-fit and not rotated in vertical setting (Latin forms designed for proportional spacing would be rotated).

Featured Fonts

きょう、本を買った。

きょう、本を買った。

.of-palt{font-feature-settings:"palt";}

Proportional Kana: pkna

This feature replaces kana and kana-related glyphs set on uniform widths (half or full-width) with proportional glyphs. It is similar to the proportional widths feature, but only affects kana.

Featured Fonts

あいうえおかきくけこがぎぐげご。

あいうえおかきくけこがぎぐげご。

.of-pkna{font-feature-settings:"pkna";}

Ruby Notation Forms: ruby

Japanese typesetting often uses smaller kana glyphs, generally in superscripted form, to clarify the meaning of kanji which may be unfamiliar to the reader. These are called ruby, from the old typesetting term for four-point-sized type. This feature identifies glyphs in the font which have been designed for this use, substituting them for the default designs.