OpenType features in CSS

Tutorials by Gustavo Ferreira
3 081 words16 min read
English

The CSS3 Specification defines two ways of accessing OpenType features in CSS: high-level and low-level properties.

High-level properties are independent of font format and have semantic, human-readable names. The specification recommends authors to use these properties whenever possible – but not all browsers support them yet.

The low-level property font-feature-settings is specific to OpenType fonts. It offers an easy way to access OpenType features directly using standard 4-letter tags. This property is supported by the latest versions of all major browsers.

The examples below use both the high-level and low-level CSS syntax, and include prefixed low-level syntax for older versions of Firefox and Webkit browsers.

Oldstyle Figures (onum)↑ back to index

Plan Grotesque 0123456789
0123456789

font-variant-numeric: oldstyle-nums;   /* high-level property          */
-moz-font-feature-settings: 'onum';    /* low-level (old Firefox)      */
-webkit-font-feature-settings: 'onum'; /* low-level (old Webkit)       */
font-feature-settings: 'onum' on;      /* low-level (all new browsers) */

Lining Figures (lnum)↑ back to index

Nara 0123456789
0123456789

font-variant-numeric: lining-nums;     /* high-level property          */
-moz-font-feature-settings: 'lnum';    /* low-level (old Firefox)      */
-webkit-font-feature-settings: 'lnum'; /* low-level (old Webkit)       */
font-feature-settings: 'lnum' on;      /* low-level (all new browsers) */

Tabular Figures (tnum)↑ back to index

Fedra Sans 0123456789
0123456789

font-variant-numeric: tabular-nums;    /* high-level property          */
-moz-font-feature-settings: 'tnum';    /* low-level (old Firefox)      */
-webkit-font-feature-settings: 'tnum'; /* low-level (old Webkit)       */
font-feature-settings: 'tnum' on;      /* low-level (all new browsers) */

Slashed Zero (zero)↑ back to index

Greta Display 0123456789
0123456789

font-variant-numeric: slashed-zero;    /* high-level property          */
-moz-font-feature-settings: 'zero';    /* low-level (old Firefox)      */
-webkit-font-feature-settings: 'zero'; /* low-level (old Webkit)       */
font-feature-settings: 'zero' on;      /* low-level (all new browsers) */

Fractions (frac)↑ back to index

Fedra Serif Display 1 1/2 h 3 98/100
1 1/2 h 3 98/100

font-variant-numeric: diagonal-fractions; /* high-level property          */
-moz-font-feature-settings: 'frac';       /* low-level (old Firefox)      */
-webkit-font-feature-settings: 'frac';    /* low-level (old Webkit)       */
font-feature-settings: 'frac' on;         /* low-level (all new browsers) */

Superscript (sups)↑ back to index

Brioni Text HO 0123456789
HO 0123456789

font-variant-position: super;             /* high-level property          */
-moz-font-feature-settings: 'sups';       /* low-level (old Firefox)      */
-webkit-font-feature-settings: 'sups';    /* low-level (old Webkit)       */
font-feature-settings: 'sups' on;         /* low-level (all new browsers) */

Subscript (subs)↑ back to index

Fedra Sans HO 0123456789
HO 0123456789

font-variant-position: sub;             /* high-level property          */
-moz-font-feature-settings: 'subs';     /* low-level (old Firefox)      */
-webkit-font-feature-settings: 'subs';  /* low-level (old Webkit)       */
font-feature-settings: 'subs' on;       /* low-level (all new browsers) */

Ordinals (ordn)↑ back to index

Fedra Serif A 1st 17th 2a
1st 17th 2a

font-variant-numeric: ordinal;          /* high-level property          */
-moz-font-feature-settings: 'ordn';     /* low-level (old Firefox)      */
-webkit-font-feature-settings: 'ordn';  /* low-level (old Webkit)       */
font-feature-settings: 'ordn' on;       /* low-level (all new browsers) */

Small Caps (smcp)↑ back to index

Brioni Text UNESCO Unicef
UNESCO Unicef

font-variant-caps: small-caps;          /* high-level property          */
-moz-font-feature-settings: 'smcp';     /* low-level (old Firefox)      */
-webkit-font-feature-settings: 'smcp';  /* low-level (old Webkit)       */
font-feature-settings: 'smcp' on;       /* low-level (all new browsers) */

[signup]

Capitals to Small Caps (c2sc)↑ back to index

Greta Display UNESCO Unicef
UNESCO Unicef

font-variant-caps: all-small-caps;              /* high-level property          */
-moz-font-feature-settings: 'c2sc', 'smcp';     /* low-level (old Firefox)      */
-webkit-font-feature-settings: 'c2sc', 'smcp';  /* low-level (old Webkit)       */
font-feature-settings: 'c2sc' on, 'smcp' on;    /* low-level (all new browsers) */

Case-sensitive Forms (case)↑ back to index

Nara {¿¡HO-HO—HO!?}
{¿¡HO-HO—HO!?}

text-transform: uppercase;              /* high-level property          */
-moz-font-feature-settings: 'case';     /* low-level (old Firefox)      */
-webkit-font-feature-settings: 'case';  /* low-level (old Webkit)       */
font-feature-settings: 'case' on;       /* low-level (all new browsers) */

Standard Ligatures (liga)↑ back to index

Fedra Sans koffie influence
koffie influence

font-variant-ligatures: common-ligatures;  /* high-level property          */
-moz-font-feature-settings: 'liga';        /* low-level (old Firefox)      */
-webkit-font-feature-settings: 'liga';     /* low-level (old Webkit)       */
font-feature-settings: 'liga' on;          /* low-level (all new browsers) */

Discretionary Ligatures (dlig)↑ back to index

Irma Slab HB HE OO UP
HB HE OO UP

font-variant-ligatures: discretionary-ligatures;  /* high-level property          */
-moz-font-feature-settings: 'dlig';               /* low-level (old Firefox)      */
-webkit-font-feature-settings: 'dlig';            /* low-level (old Webkit)       */
font-feature-settings: 'dlig' on;                 /* low-level (all new browsers) */

Historical Ligatures (hlig)↑ back to index

Fedra Serif B ſinful ſingular
ſinful ſingular

font-variant-ligatures: historical-ligatures;  /* high-level property          */
-moz-font-feature-settings: 'hlig';            /* low-level (old Firefox)      */
-webkit-font-feature-settings: 'hlig';         /* low-level (old Webkit)       */
font-feature-settings: 'hlig' on;              /* low-level (all new browsers) */

[social]

Contextual Alternates (calt)↑ back to index

Fedra Serif Display ginger giggle
ginger giggle

font-variant-alternates: contextual;     /* high-level property          */
-moz-font-feature-settings: 'calt';      /* low-level (old Firefox)      */
-webkit-font-feature-settings: 'calt';   /* low-level (old Webkit)       */
font-feature-settings: 'calt' on;        /* low-level (all new browsers) */

Swash (swsh)↑ back to index

Fedra Serif A Alpha Beta Quebec
Alpha Beta Quebec

-moz-font-feature-settings: 'swsh';      /* low-level (old Firefox)      */
-webkit-font-feature-settings: 'swsh';   /* low-level (old Webkit)       */
font-feature-settings: "swsh" on;        /* low-level (all new browsers) */

Historical Forms (hist)↑ back to index

Fedra Serif A paradise lost
paradise lost

font-variant-alternates: historical-forms;  /* high-level property          */
-moz-font-feature-settings: 'hist';         /* low-level (old Firefox)      */
-webkit-font-feature-settings: 'hist';      /* low-level (old Webkit)       */
font-feature-settings: 'hist' on;           /* low-level (all new browsers) */

Stylistic Sets 1-20 (ss**)↑ back to index

Fedra Sans nuggets fanfarre
nuggets fanfarre

-moz-font-feature-settings: 'ss01', 'ss02';      /* low-level (old Firefox)      */
-webkit-font-feature-settings: 'ss01', 'ss02';   /* low-level (old Webkit)       */
font-feature-settings: 'ss01' on, 'ss02' on;     /* low-level (all new browsers) */

Kerning (kern) ↑ back to index

Fedra Sans AVATAR LT.
AVATAR LT.

font-kerning: normal;                   /* high-level property          */
-moz-font-feature-settings: 'kern';     /* low-level (old Firefox)      */
-webkit-font-feature-settings: 'kern';  /* low-level (old Webkit)       */
font-feature-settings: "kern" on;       /* low-level (all new browsers) */

Localised Forms (locl) ↑ back to index

If a font contains a locl feature, localized forms are activated automatically based on the language declared in the element’s lang attribute.

Fedra Sans Pro гпклдвзитжц
гпклдвзитжц

<p lang='ru'>гпклдвзитжц</p>
<p lang='bg'>гпклдвзитжц</p>

Arabic

Required ligatures (rlig)
Medial Forms (medi)
Initial Forms (init)
Isolated Forms (isol)
Final Forms (fina)
Mark (mark)
Mark-to-mark Positioning (mkmk)

All features required for arabic are activated automatically if the language is declared.

Fedra Arabic نص حكيم له سر قاطع وذو شأن عظيم مكتوب على ثوب أخضر ومغلف بجلد أزرق

<p dir='rtl' lang='ar'>
نص حكيم له سر قاطع وذو شأن عظيم مكتوب على ثوب أخضر ومغلف بجلد أزرق
</p>

  • gustavo ferreira
    Gustavo Ferreira was born in Rio de Janeiro (1977), currently living and working in Amsterdam. Graduated in graphic and product design at the Esdi in Rio de Janeiro, continued his studies at the HfG Schwäbisch Gmünd in Germany (communication and planning) and at Type&Media/KABK in The Netherlands (type design and font production). Works on the Elementar font system since 2002/2003. Worked as community manager for FontStruct in 2009, while continuing his research and design work in his digital laboratory Hipertipo.