Styling OpenType Fonts

OpenType fonts 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 glyths 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 glyths in Caflisch Script Pro. The connecting strokes make the typeface feel more like hand-drawn.

Contextual Alternates
Caflisch Script Pro default (left) and contextual alternates (right)

Although many script typefaces today designed with connecting glyths, 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.

Discretionary ligatures
Garamond Premier Pro with discretionary ligatures

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.

Swashes
Poetica Std regular (left) and with swashes (right)

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.

Oldstyle Figures
Granjon LT Std with oldstyle figures

To enable oldstyle figures:

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

Performance

Above are just select examples of OpenType features to get you started. If you would like to learn more, read Typekit’s documentation. 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.