I ran across an article on the TypeKit Practice blog about OpenType features and how to enable and use them on the web.

OpenType features are more than just fancy swashes, they’re the superpowers of fonts! The best typefaces are full of sophisticated reasoning and little surprises — things that are often integral to the design of the typeface itself, or that help it work better for specific typesetting tasks. Being a graphic design student, I can appreciate the nuances of ligatures and old style numbers, and have always struggled to bring these same features from print over to the web.

I’m not going to go into all of the points and methods of the article, because you can easily follow their post from the link above. But the simplest and easiest method of using the OpenType features that always matter, and should always matter to people interested in good typography, can be implemented right in your CSS.

The features that matter most are common ligatures, contextual alternates, and kerning. If you’re using a webfont that includes all of these (and more), it’s easy to turn these features on in your CSS. For example, let’s say you’re setting up your body text to be a TypeKit version of Adobe Caslon. You would enable all these features like this:

body {
	font-family: "Adobe Caslon", Times, "Times New Roman", serif;
	font-size: 1rem;
	font-kerning: normal;
	font-variant-ligatures: common-ligatures, contextual;
	-moz-font-feature-settings: "kern", "liga", "clig", "calt";
	-ms-font-feature-settings: "kern", "liga", "clig", "alt";
	-webkit-font-feature-settings: "kern", "liga", "clig", "calt";
	font-feature-settings: "kern", "liga", "clig", "calt";
}

This turns on all of our essential features, and replaces, for example, fi with the ligature combined version of fi.

For more information on implementing other features, visit the TypeKit Practice blog.