OpenType feautres are hidden powers. They provide both elaborate detail and specific control of your typesetting. Well-designed OpenType fonts will give you a set of cohesive features to create a successful typographic system. Therefore, considering OpenType features part of your type selection process will help narrowing down your choices. Knowing specific features you need will make your job much easier. For example, if you want a fancy header, you might want to search for a typeface that has swash italics. On the web, one of the key elements to unlock OpenType features is the font-variant CSS property. Let’s break down this property to see the capabilities of OpenType features.

Basic Features

While ornamental features such as discretionary ligatures, swashes, and stylistic alternates, are optional for specific typographical elements, essential features should be set as default to improve the legibility and readability of your typesetting. For body text, apply kerning, common ligatures, and contextual ligatures:

	
body {
 font-kerning: normal;
 font-variant-ligatures: common-ligatures contextual;
}
	

Contextual Alternates

Adobe created the contextual alternates feature to join glyphs together in script typefaces. Caflisch Script Pro, which based on Max Caflisch’s calligraphy, was one of the early typefaces that used this feature. As you can see in the illustration below, alternate glyphs work better than default glyphs in Caflisch Script Pro. The connecting strokes make the typeface feel more like hand-drawn.

Although many script typefaces today designed with connecting glyphs, it is still a good practice to turn on contextual alternates:

	
body {font-variant-ligatures: contextual;}
	

Discretionary Ligatures

Unlike common ligatures (ff, fi, and fl), which are designed to solve clashing characters, discretionary ligatures are more ornamental. Because of their decorative features, which interfere with reading, discretionary ligatures are more suitable for short text than long copy.

If you would like to add a bit of flair, you may want to consider adding discretionary ligatures:

	
h1 {font-variant-ligatures: discretionary-ligatures;}
	

Swashes

With OpenType’s capabilities, swash characters are flourishing. Swashes are useful for typographic enhancements. Because of their superfluous features, swashes are suitable for display text only.

The font-variant property doesn’t have support for swash yet, but you can still use swsh from font-feature-settings:

	
h1 {font-feature-settings: "swsh";}
	

Oldstyle Figures

Unlike lining figures, which have the same alignment and height, oldstyle figures are varied and non-lining. Because numbers in oldstyle figures work well with lowercase characters, they are less intrusive than lining figures in running text.

To enable oldstyle figures:

	
span {font-variant-numeric: oldstyle-nums;}
	

Performance

OpenType features are powerful, but they also come with a huge cost: performance, performance, performance. Additional OpenType fonts increase the filesize drastically; therefore, use them with care. If you don’t need OpenType fonts, don’t use them. If you need to use them, load basic fonts first before render OpenType fonts. Always design with the users in mind.