Working with Alternate Characters


Jason Tselentis in Learning on May 27, 2016

If you want to add style and functionality to your Web typography, look for fonts that have alternate characters. And if working economically, with just one font, the added characters you get with alternates can stretch your design further.

An alternate character—sometimes called an alt character—is a different version of a standard character design. An alternate character may look slightly different than the standard one, and in some cases, noticeably different. For example, some alternate character designs may look more geometric. Others may look handwritten. In one font, there might be a single-story a, and the alternate a could be double-story, or vice versa. There are also functional uses for alternates. You may have a standard Q with a long tail, but it gets in the way when setting a title, so you could use an alternate Q with a shorter tail.

It just takes a little CSS know-how to take advantage of the extra character designs. If a font has alternate characters and browsers support it, you can enable them with the stylistic alternate value ("salt") in the font-feature-settings CSS property.

Working with Alternate Characters

The Muller typeface, which has a total of 20 styles including the hairline shown here, has a standard a that’s two-story (top), but you can enable the more geometric single-story a (bottom) using CSS.

Working with Alternate Characters

The Aviano Contrast typeface has alternate characters, seen in the bottom, that have different crossbars and tails. And notice how the alternate B shown in the bottom row has an unconventionally large upper bowl.

Alternate Characters, Alternate Styles

Alternate characters come in handy for stylistic uses, such as the longer tail of the Warnock® Pro typeface’s alternate Q. Its elongated quality makes for a more elegant appearance, especially when it comes to setting headings that you want to get noticed.

Working with Alternate Characters

The Warnock® Pro typeface designed by Robert Slimbach, has an alternate Q, y, w, and v featured in the lower, smaller version of Quietly woven.

If a font has alternate characters, you can enable them with CSS using the salt value:

font-feature-settings: "salt";

-webkit-font-feature-settings: "salt";

-o-font-feature-settings: "salt";

-moz-font-feature-settings: "salt";

-ms-font-feature-settings: "salt";

If a font has a second alternate character, you would use "salt" 2. If a third, you would use "salt" 3, and so forth.

Working with Alternate Characters

Not only does Mark Simonson’s Mostra Nuova typeface have 30 styles in one font, but it also has a variety of stylistic alternates. Standard characters appear in the topmost example, with first ("salt"), second ("salt" 2), and third (“salt" 3) stylistic alternates appearing beneath.

Working with Alternate Characters

The sans serif Bree™ typeface by Veronika Burian and José Scaglione has a handwritten quality seen in standard characters such as the Q, e, g, k, v, w, y, and z. But alternate characters, seen in the bottom example, give a different look and feel that’s more conservative.

Working with Alternate Characters

The Bree Serif typeface is similar to its sans serif relative, only with chunky slab serifs. It has alternate characters too (bottom example) such as the two-story a and g. Notice the difference between the two e characters.

Alternate Characters in Use

Functionally, alternate characters can help differentiate a heading from the running text, especially if you use the same font for both, and want to create added contrast between the two.

Working with Alternate Characters

In the example above, alternate characters have been enabled with Bree’s heading, but the running text set in Bree Light uses the standard characters for more of that handwritten touch.

Working with Alternate Characters

Here, with Bree Serif, we have the alternates in the heading as well, and the running text, set in the same weight, with the standard characters. But sometimes, the alternate characters can get in the way of things. In the example below, the alternate Q has a tail that comes too close to the heading continued on the next line.

Working with Alternate Characters

This is a good case for a Q with a shorter tail found in the standard design, instead of the alternate character and its longer tail. So we remove the font-feature-settings: "salt" property from the heading, to use the standard Q, shown below. For good measure, the leading—called line-height in CSS—has been increased for added air in between the heading’s lines.

Working with Alternate Characters

Harness the Power of Alternate Characters Early

When going through the process of choosing a typeface, look at how it functions for your Web typography by creating permutations of headings, running text, captions, and pull quotes. Test for readability and legibility. And use alternate characters for fun and flair, and function too.

Jason Tselentis is a designer, writer, and educator. As Associate Professor at Winthrop University’s Department of Design, he teaches visual communication design, brand strategy and development, Web design, and typography. His writings about design and visual culture have appeared in Arcade, Eye, mental_floss, Open Manifesto, Print, and HOW. Mr. Tselentis also has four books to his credit on design and typography principles, and design history.

Great Type Makes Sites Stand Out

Start your free web fonts subscription today

Start Subscription