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.
Built with Almace Scaffolding.
Supported Font Features
Ligation & Alternate
Positioning
Bicameral [cased] Alphabets (Latin, Greek, Cyrillic, etc.)
Digits & Math
Stylistic Set 01-20
East Asian Tetragrams (Chinese, Japanese, Korean)
smpl
trad
tnam
expt
hojo
nlck
jp78
jp83
jp90
jp04
hngl
ljmo
tjmo
vjmo
fwid
hwid
halt
twid
qwid
pwid
palt
pkna
ruby
hkna
vkna
West Asian (Semitic, Arabic)
South-Asian alphasyllabaries (Indic/Brahmic)
Coming soon
Writing Direction
Coming soon
Access All Alternates: aalt
Special feature: used to present user with choice all alternate forms of the character
Featured Fonts
- Sorts Mill Goudy
- Yanone Kaffeesatz
- …and all fonts that support ligation and alternate forms
Swashes: swsh
This feature replaces default character glyphs with corresponding swash glyphs.
Featured Fonts
Contextual Swash: cswh
Converts letter to a swashed version based on characters around the letter
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.
Featured Fonts
Historical Forms: hist
Obsolete forms of characters to be applied at the user’s discretion, cf. hlig
Featured Fonts
Historical Ligatures: hlig
Obsolete ligatures to be applied at the user’s discretion
Featured Fonts
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
- San Francisco
- Fedra Sans Pro
Randomize: rand
Replaces character with random forms (meant to simulate handwriting).
It’s actually not random at all, but instead cyclical: it keeps track of each character’s last glyph variant and cycles to the next variant (or back to the first) the next time the character appears. Unfortunately this requires applications to implement a special kind of behavior for a more general class of lookup type, and as of this writing, no shipping applications support the feature as described. Typeface like FF Kosmik uses the Contextual Alternates feature is therefore a compromise, but it nonetheless delivers the desired behavior, even inside the limitations of currently shipping OT-savvy apps (i.e. just InDesign 2.0.) — Eccentrifuge Recent Projects: Kosmik
Featured Fonts
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.
Featured Fonts
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.
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
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
Titling Alternates: titl
Replaces characters with forms suited for large type, as in titles
Featured Fonts
Required Variation Alternates: rvrn
Special variants of a single character, which need apply to specific font variation, required by variable fonts
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.
Featured Fonts
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
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
- Clara
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
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.
Featured Fonts
- Most OpenType fonts support this feature
Mark Positioning: mark
Fine positioning of a mark glyph to a base character
Mark-to-mark Positioning: mkmk
Fine positioning of a mark glyph to another mark character
Small Caps: smcp
This feature turns lowercase characters into small capitals.
Featured Fonts
Capitals to Small Caps: c2sc
This feature turns uppercase characters into small capitals.
Featured Fonts
Petite Caps: pcap
Substitute lower-case letters with their petite caps analogs.
Featured Fonts
Capitals to Petite Caps: c2pc
Substitutes capital letters with petite caps.
Featured Fonts
Unicase: unic
Replaces lowercase and uppercase letters with a set of single case glyphs.
Featured Fonts
- Arial (Windows version)
- Hermes FB
Capital Spacing: cpsp
Adjusts spacing between letters in all-capitals text
Featured Fonts
Case Sensitive Forms: case
Replace characters, especially punctuation, with forms better suited for all-capital text, cf. titl
Featured Fonts
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
Ordinals: ordn
Featured Fonts
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
- Warnock Pro
- Hypatia Sans Pro
- …and many more
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
- Warnock Pro
- Hypatia Sans Pro
- …and many more
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
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
Fractions: frac
This feature replaces figures separated by a slash with common (diagonal) fractions.
Featured Fonts
Alternative Fractions: afrc
Converts figures separated by slash with alternative stacked fraction form
Featured Fonts
Denominator: dnom
Converts to appropriate fraction denominator form, invoked by frac
Featured Fonts
Numerator: numr
Converts to appropriate fraction numerator form, invoked by frac
Featured Fonts
Scientific Inferiors: sinf
As in “H2O”, “SOx”, “YCbCr”, or “NO2”
Featured Fonts
Slashed Zero: zero
Replaces 0 figure with slashed 0
Featured Fonts
Mathematical Greek: mgrk
Replaces Greek characters with special forms for use in mathematics
Flattened accent forms: flac
Dotless Forms: dtls
Math script style alternates: 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.
Featured Fonts
- Hypatia Sans Pro
- San Francisco
- …and many more
Simplified Forms: smpl
Replaces sinograms with their simplified versions, may be language dependent.
Traditional Forms: trad
Replaces ‘simplified’ Chinese hanzi or Japanese kanji forms with the corresponding ‘traditional’ forms.
Featured Fonts
Traditional Name Forms: tnam
Japanese alternates for proper names
Expert Forms: expt
Typographic alternatives for some Japanese tetragrams
Featured Fonts
Hojo Kanji Forms: hojo
Hojo alternates for Japanese tetragrams
Featured Fonts
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
JIS78 Forms: jp78
This feature replaces default (JIS90) Japanese glyphs with the corresponding forms from the JIS C 6226-1978 (JIS78) specification.
Featured Fonts
JIS83 Forms: jp83
This feature replaces default (JIS90) Japanese glyphs with the corresponding forms from the JIS X 0208-1983 (JIS83) specification.
Featured Fonts
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
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
Hangul: hngl
Transliterates Chinese-style characters with Korean Hangul
Leading Jamo Forms: ljmo
Initial group of consonants for a synthesized Korean Hangul tetragram
Trailing Jamo Forms: tjmo
Final group of consonants for a synthesized Korean Hangul tetragram
Vowel Jamo Forms: vjmo
Medial group of vowels for a synthesized Korean Hangul tetragram
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
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
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
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
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
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
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
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
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.
Featured Fonts
Horizontal Kana Alternates: hkna
This feature replaces standard kana with forms that have been specially designed for only horizontal writing. This is a typographic optimization for improved fit and more even color.
Featured Fonts
Vertical Kana: vkna
Alternate Japanese kana forms for vertical text, e.g. | for chōonpu instead of ー, cf. hkna
.
Required Ligatures: rlig
Ligatures required for correct text display (any script, but in cursive)
Initial Forms: init
Substitutes a special form of a letter occurring at the beginning of a word (required by Arabic and Syriac)
Featured Fonts
Medial Forms: medi
Substitutes a special form of letters between other letters in words (required by Arabic and Syriac)
Featured Fonts
Medial Form #3: fina
Substitutes a special form of a letter at end of words (required by Arabic and Syriac)
Featured Fonts
- Typotheque - OpenType features in CSS by Gustavo Ferreira
- FontLab Blog - OpenType Layout feature classification
- Thisarmy - Google Font OpenType Feature Preview
- Microsoft Docs - OpenType Layout tag registry
- Adobe - Syntax for OpenType features in CSS
- Wikipedia - List of typographic features
- Luc Devroye - Randomized fonts
- Special thanks: Gordian Zhang
You can donate to help me renew TypeKit subscription 😉
Back to Top