Open Type Features
Open Type features provide ways to access embedded functionality in your typefaces that help you refine your typography by providing alternate forms. Depending on the genre of the font, these might include some from the list below. The general syntax font-feature-settings: featuretag on/off; or 1/0 (0 meaning off, 1 meaning on) provides general access to the features; some features may have a more specific CSS properties on modern browsers. Some features may be on by default.
| Open Type Feature | feature tag | modern browser property | example |
|---|---|---|---|
| Ligatures | liga |
font-variant-ligatures: common-ligatures; |
ff fi fl ffi ffl |
| Discretionary Ligatures | dlig |
font-variant-ligatures: discretionary-ligatures; |
fj ft |
| Small caps | smcp, or c2sc |
font-variant-caps: small-caps; |
Cap SMALL CAPS |
| Figures Styles (Tabular, lining, oldstyle) | tnum, lnum, onum |
font-variant-numeric: tabular-nums / lining-nums / olstyle-nums; |
0123 0123 0123 |
| Fractions | frac |
font-variant-numeric: diagonal-fractions; |
1/2 1/4 3/4 |
| Superscript / Subscripts | sups, subs |
font-variant-position: super / sub; |
footnote3 H20 |
| Open Type Feature | feature tag | example |
|---|---|---|
| Stylistic Set 01* | ss01 |
a á ă â ä à ā ą å ǻ ã |
| Stylistic Set 05* | ss05 |
& |
| Zero slash | case |
0 |
| Localized Forms† | locl |
Д Л в г д ж з и й ѝ к л п т ц ш щ ь ъ ю |
* The variants assigned to stylistic sets are up to the type designer—there are no standard mappings. A font can have up to 20 ss alternates.
† Localized forms need to be combined with the lang="xx" attribute on the element, where xx is the 2-letter ISO language code.
Multiple feature properties can be applied by comma-separating the different feature activations, so that the property can be applied to the whole text block, rather than individual letters.
font-feature-settings: 'liga' 1, 'ss01' 1; will turn on both ligatures and Stylistic Set 01 (i.e. a simpified a) to the element.
Details for refinement
Quotation marks
Be careful of the difference between ' and ’, " and ”.
For large texts, consider hanging your quotation mark.
“Straight quotes are the two generic vertical quotation marks located near the return key: the straight single quote (') and the straight double quote ("). Curly quotes are the quotation marks used in good typography. There are four curly quote characters: the opening single quote (‘), the closing single quote (’), the opening double quote (“), and the closing double quote (”).”
Matthew Butterick, Practical Typography
“Straight quotes are the two generic vertical quotation marks located near the return key: the straight single quote (') and the straight double quote ("). Curly quotes are the quotation marks used in good typography. There are four curly quote characters: the opening single quote (‘), the closing single quote (’), the opening double quote (“), and the closing double quote (”).”
Matthew Butterick, Practical Typography
Firefox weirdness
Firefox tends to display typefaces loaded via @font-face bolder than they should look. To mitigate this, add -moz-osx-font-smoothing: grayscale; to the body of your document.