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.

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)

West Asian (Semitic, Arabic)

South-Asian alphasyllabaries (Indic/Brahmic)

Coming soon

Writing Direction

Coming soon

Access All Alternates: aalt at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">swsh

This feature replaces default character glyphs with corresponding swash glyphs.

Featured Fonts
Fred And Ginger
Fred And Ginger
.of-swsh { font-feature-settings: "swsh"; }

Contextual Swash: cswh at Microsoft" target="_blank" rel="noopener noreferrer">cswh

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

  • Note
Featured Fonts
I feel great today.
I feel great today.
.of-cswh { font-feature-settings: "cswh"; }

Contextual Alternates: calt at Microsoft" target="_blank" rel="noopener noreferrer">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.

  • Default*
  • Note
Featured Fonts
The bloom has gone off the rose
The bloom has gone off the rose
.of-calt--off { font-feature-settings: "calt" 0; font-variant-ligatures: none; }
.of-calt { font-feature-settings: "calt"; font-variant-ligatures: common-ligatures; }

Historical Forms: hist at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">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.

  • Default
  • Note
Featured Fonts
гпклдвзитжц
гпклдвзитжц
.of-locl { font-feature-settings: "locl"; }

Randomize: rand at Microsoft" target="_blank" rel="noopener noreferrer">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

  • Note
Featured Fonts
Free stood speech 777!
Free stood speech 777!
.of-rand--off { font-feature-settings: "rand" 0, "calt" 0; }
.of-rand { font-feature-settings: "rand"; }

Alternate Annotation Forms: nalt at Microsoft" target="_blank" rel="noopener noreferrer">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
あ
あ
あ
あ
あ
あ
あ
あ
あ
.of-nalt { font-feature-settings: "nalt"; }
.of-nalt-1 { font-feature-settings: "nalt" 1; }
.of-nalt-2 { font-feature-settings: "nalt" 2; }
.of-nalt-3 { font-feature-settings: "nalt" 3; }
.of-nalt-4 { font-feature-settings: "nalt" 4; }
.of-nalt-5 { font-feature-settings: "nalt" 5; }
.of-nalt-6 { font-feature-settings: "nalt" 6; }
.of-nalt-7 { font-feature-settings: "nalt" 7; }

Character Variant 1 – 99: cv01-cv99 at Microsoft" target="_blank" rel="noopener noreferrer">cv01-cv99

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

Stylistic Alternates: salt at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">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
H2O, CO2
H2O, CO2
.of-subs { font-feature-settings: "subs"; }

Superscript: sups at Microsoft" target="_blank" rel="noopener noreferrer">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
X2
X2
.of-sups { font-feature-settings: "sups"; }

Titling Alternates: titl at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">rvrn

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

  • Default
  • N/A
$713,40.19
$713,40.19
.of-rvrn { font-feature-settings: "rvrn"; }

Standard Ligatures: liga at Microsoft" target="_blank" rel="noopener noreferrer">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.

  • Default
Featured Fonts
Different first Afliction affidavit There
Different first Afliction affidavit There
.of-liga--off { font-feature-settings: "liga" 0, "clig" 0; }
.of-liga { font-feature-settings: "liga", "clig"; }

Discretionary Ligatures: dlig at Microsoft" target="_blank" rel="noopener noreferrer">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
ct sp st
ct sp st
.of-dlig { font-feature-settings: "dlig"; }

Optical size: size at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">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
abcdefg
abcdefg
.of-ornm { font-feature-settings: "ornm"; }

Glyph Composition / Decomposition: ccmp at Microsoft" target="_blank" rel="noopener noreferrer">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.

  • Default*
  • WIP
Featured Fonts
あﾞ
あﾞ
.of-ccmp { font-feature-settings: "ccmp"; }

Kerning: kern at Microsoft" target="_blank" rel="noopener noreferrer">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
Try As You Will
Try As You Will
.of-kern--off { font-feature-settings: normal; font-kerning: none; }
.of-kern { font-feature-settings: "kern"; }

Mark Positioning: mark at Microsoft" target="_blank" rel="noopener noreferrer">mark

Fine positioning of a mark glyph to a base character

  • help-wanted
Featured Fonts
ۂيئ
ۂيئ
.of-mark { font-feature-settings: "mark"; }

Mark-to-mark Positioning: mkmk at Microsoft" target="_blank" rel="noopener noreferrer">mkmk

Fine positioning of a mark glyph to another mark character

  • Default
  • help-wanted
Featured Fonts
ۂ
ۂ
.of-mkmk { font-feature-settings: "mkmk"; }

Small Caps: smcp at Microsoft" target="_blank" rel="noopener noreferrer">smcp

This feature turns lowercase characters into small capitals.

Featured Fonts
Changing case to Small Caps.
Changing case to Small Caps.
.of-smcp { font-feature-settings: "smcp"; }

Capitals to Small Caps: c2sc at Microsoft" target="_blank" rel="noopener noreferrer">c2sc

This feature turns uppercase characters into small capitals.

Featured Fonts
Changing case to Small Caps.
Changing case to Small Caps.
.of-c2sc { font-feature-settings: "c2sc", "smcp"; }

Petite Caps: pcap at Microsoft" target="_blank" rel="noopener noreferrer">pcap

Substitute lower-case letters with their petite caps analogs.

Featured Fonts
Georg Duffner - Principal Design
Georg Duffner - Principal Design
.of-pcap { font-feature-settings: "pcap"; }

Capitals to Petite Caps: c2pc at Microsoft" target="_blank" rel="noopener noreferrer">c2pc

Substitutes capital letters with petite caps.

Featured Fonts
Georg Duffner - Principal Design
Georg Duffner - Principal Design
.of-c2pc { font-feature-settings: "c2pc"; }

Unicase: unic at Microsoft" target="_blank" rel="noopener noreferrer">unic

Replaces lowercase and uppercase letters with a set of single case glyphs.

Featured Fonts
  • Arial (Windows version)
  • Hermes FB
Server Offline
Server Offline
.of-unic { font-feature-settings: "unic"; }

Capital Spacing: cpsp at Microsoft" target="_blank" rel="noopener noreferrer">cpsp

Adjusts spacing between letters in all-capitals text

Featured Fonts
THE LAZY DOG.
THE LAZY DOG.
.of-cpsp { font-feature-settings: "cpsp"; }

Case Sensitive Forms: case at Microsoft" target="_blank" rel="noopener noreferrer">case

Replace characters, especially punctuation, with forms better suited for all-capital text, cf. titl

Featured Fonts
{¿¡HO-HO—HO!?} [Target] (New)
{¿¡HO-HO—HO!?} [Target] (New)
.of-case { font-feature-settings: "case"; }

Italics: ital at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">ordn

Featured Fonts
1st, 2nd, 3rd
1st, 2nd, 3rd
.of-ordn { font-feature-settings: "ordn"; }

Lining Figures: lnum at Microsoft" target="_blank" rel="noopener noreferrer">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
0123456789
.of-lnum { font-feature-settings: "lnum"; }

Oldstyle Figures: onum at Microsoft" target="_blank" rel="noopener noreferrer">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
0123456789
.of-onum { font-feature-settings: "onum"; }

Proportional Figures: pnum at Microsoft" target="_blank" rel="noopener noreferrer">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
0123456789
.of-pnum { font-feature-settings: "pnum"; }

Tabular Figures: tnum at Microsoft" target="_blank" rel="noopener noreferrer">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
0123456789
.of-tnum { font-feature-settings: "tnum"; }

Fractions: frac at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">sinf

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

  • Partial
Featured Fonts
H2O SOx YCbCr NO2
H2O SOx YCbCr NO2
.of-sinf { font-feature-settings: "sinf"; }

Slashed Zero: zero at Microsoft" target="_blank" rel="noopener noreferrer">zero

Replaces 0 figure with slashed 0

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

Mathematical Greek: mgrk at Microsoft" target="_blank" rel="noopener noreferrer">mgrk

Replaces Greek characters with special forms for use in mathematics

Featured Fonts
Σ∑
Σ∑
.of-mgrk { font-feature-settings: "mgrk"; }

Flattened accent forms: flac at Microsoft" target="_blank" rel="noopener noreferrer">flac

  • N/A
Not available, feel free to contribute!
Not available, feel free to contribute!
.of-flac { font-feature-settings: "flac"; }

Dotless Forms: dtls at Microsoft" target="_blank" rel="noopener noreferrer">dtls

  • N/A
Not available, feel free to contribute!
Not available, feel free to contribute!
.of-dtls { font-feature-settings: "dtls"; }

Math script style alternates: ssty at Microsoft" target="_blank" rel="noopener noreferrer">ssty

  • N/A
Not available, feel free to contribute!
Not available, feel free to contribute!
.of-ssty { font-feature-settings: "ssty"; }

Stylistic Set 1 – 20: ss01-ss20 at Microsoft" target="_blank" rel="noopener noreferrer">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
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
.of-ss01-20 { font-feature-settings: "ss01", "ss02", "ss03", "ss04", "ss05", "ss06", "ss07", "ss08", "ss09", "ss10", "ss11", "ss12", "ss13", "ss14", "ss15", "ss16", "ss17", "ss18", "ss19", "ss20"; }
.of-ss01 { font-feature-settings: "ss01"; }
.of-ss02 { font-feature-settings: "ss02"; }
.of-ss03 { font-feature-settings: "ss03"; }
.of-ss04 { font-feature-settings: "ss04"; }
.of-ss05 { font-feature-settings: "ss05"; }
.of-ss06 { font-feature-settings: "ss06"; }
.of-ss07 { font-feature-settings: "ss07"; }
.of-ss08 { font-feature-settings: "ss08"; }
.of-ss09 { font-feature-settings: "ss09"; }
.of-ss10 { font-feature-settings: "ss10"; }
.of-ss11 { font-feature-settings: "ss11"; }
.of-ss12 { font-feature-settings: "ss12"; }
.of-ss13 { font-feature-settings: "ss13"; }
.of-ss14 { font-feature-settings: "ss14"; }
.of-ss15 { font-feature-settings: "ss15"; }
.of-ss16 { font-feature-settings: "ss16"; }
.of-ss17 { font-feature-settings: "ss17"; }
.of-ss18 { font-feature-settings: "ss18"; }
.of-ss19 { font-feature-settings: "ss19"; }
.of-ss20 { font-feature-settings: "ss20"; }

Simplified Forms: smpl at Microsoft" target="_blank" rel="noopener noreferrer">smpl

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

  • WIP
檯臺颱
檯臺颱
.of-smpl { font-feature-settings: "smpl"; }

Traditional Forms: trad at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">tnam

Japanese alternates for proper names

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

Expert Forms: expt at Microsoft" target="_blank" rel="noopener noreferrer">expt

Typographic alternatives for some Japanese tetragrams

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

Hojo Kanji Forms: hojo at Microsoft" target="_blank" rel="noopener noreferrer">hojo

Hojo alternates for Japanese tetragrams

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

NLC Kanji Forms: nlck at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">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"; }

Hangul: hngl at Microsoft" target="_blank" rel="noopener noreferrer">hngl

Transliterates Chinese-style characters with Korean Hangul

  • N/A
Not available, feel free to contribute!
Not available, feel free to contribute!
.of-hngl { font-feature-settings: "hngl"; }

Leading Jamo Forms: ljmo at Microsoft" target="_blank" rel="noopener noreferrer">ljmo

Initial group of consonants for a synthesized Korean Hangul tetragram

  • N/A
Not available, feel free to contribute!
Not available, feel free to contribute!
.of-ljmo { font-feature-settings: "ljmo"; }

Trailing Jamo Forms: tjmo at Microsoft" target="_blank" rel="noopener noreferrer">tjmo

Final group of consonants for a synthesized Korean Hangul tetragram

  • N/A
Not available, feel free to contribute!
Not available, feel free to contribute!
.of-tjmo { font-feature-settings: "tjmo"; }

Vowel Jamo Forms: vjmo at Microsoft" target="_blank" rel="noopener noreferrer">vjmo

Medial group of vowels for a synthesized Korean Hangul tetragram

  • N/A
Not available, feel free to contribute!
Not available, feel free to contribute!
.of-vjmo { font-feature-settings: "vjmo"; }

Full Widths: fwid at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">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 at Microsoft" target="_blank" rel="noopener noreferrer">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
運 (うん) 命 (めい)
運 (うん) 命 (めい) 
.of-ruby--off { font-feature-settings: "ruby" 0; }
.of-ruby { font-feature-settings: "ruby"; }

Horizontal Kana Alternates: hkna at Microsoft" target="_blank" rel="noopener noreferrer">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
あいうえおかきくけこがぎぐげご。
あいうえおかきくけこがぎぐげご。
.of-hkna { font-feature-settings: "hkna"; }

Vertical Kana: vkna at Microsoft" target="_blank" rel="noopener noreferrer">vkna

Alternate Japanese kana forms for vertical text, e.g. ｜ for chōonpu instead of ー, cf. hkna.

  • N/A
Not available, feel free to contribute!
Not available, feel free to contribute!
.of-vkna { font-feature-settings: "vkna"; }

Required Ligatures: rlig at Microsoft" target="_blank" rel="noopener noreferrer">rlig

Ligatures required for correct text display (any script, but in cursive)

  • Default
Featured Fonts
لا
لا
.of-rlig--off { font-feature-settings: "rlig" 0; }
.of-rlig { font-feature-settings: "rlig"; }

Initial Forms: init at Microsoft" target="_blank" rel="noopener noreferrer">init

Substitutes a special form of a letter occurring at the beginning of a word (required by Arabic and Syriac)

  • help-wanted
Featured Fonts
نص حكيم له سر قاطع وذو شأن عظيم مكتوب على ثوب أخضر ومغلف بجلد أزرق
نص حكيم له سر قاطع وذو شأن عظيم مكتوب على ثوب أخضر ومغلف بجلد أزرق
.of-init { font-feature-settings: "init"; }

Medial Forms: medi at Microsoft" target="_blank" rel="noopener noreferrer">medi

Substitutes a special form of letters between other letters in words (required by Arabic and Syriac)

  • help-wanted
Featured Fonts
نص حكيم له سر قاطع وذو شأن عظيم مكتوب على ثوب أخضر ومغلف بجلد أزرق
نص حكيم له سر قاطع وذو شأن عظيم مكتوب على ثوب أخضر ومغلف بجلد أزرق
.of-medi { font-feature-settings: "medi"; }

Medial Form #3: fina at Microsoft" target="_blank" rel="noopener noreferrer">fina

Substitutes a special form of a letter at end of words (required by Arabic and Syriac)

  • help-wanted
Featured Fonts
نص حكيم له سر قاطع وذو شأن عظيم مكتوب على ثوب أخضر ومغلف بجلد أزرق
نص حكيم له سر قاطع وذو شأن عظيم مكتوب على ثوب أخضر ومغلف بجلد أزرق
.of-fina { font-feature-settings: "fina"; }

You can donate to help me renew TypeKit subscription 😉

Back to Top