The Swash Font Feature

When it comes to visual enhancements, swash characters can add a little something extra to your site—emphasis on little, because a little goes a long way. Primarily found in typefaces classified as script, calligraphy, and handwriting, swashes work well for initial letters, titles, and pull quotes. But if you use too many swashes or set them too large, you’ll have a lot of something extra, which could be a bad thing.

A title set in the Auberge Script™ Pro typeface with swashes enabled using a CSS property. A longer title, or too many letters with competing swashes, would be overkill. But in this case, it’s just the right amount of words and swashes.

Above you’ll find a drop cap set in the Australis Pro™ Swash typeface. Prior Web Typography Essentials posts looked at raised letters and drop caps, and explored alternate approaches to using initial letters. Be sure to read or re-read those posts to get up to speed on the CSS properties needed to create drop caps.

Swash Characters Are Meant to Flow

When used as a verb, swash denotes movement with a splashing sound: The rain swashed through the gutters, flowing into the down spouts. As a noun, swash refers to a body of rushing or splashing water. But when designers and typographers hear the word swash they think of ornate typographic characters, sometimes initial letters such as drop caps. Like water, swash characters and their elaborate strokes and ornamentation make for a fluid appearance.

But how and where do you find swash characters? Sometimes you’ll have two fonts: one font with its standard character set, and another separate font with the swashes.

‘Heading Two’ (top) is set in the ITC Bodoni™ Seventytwo Swash typeface, and ‘Heading Three’ (bottom) is set in the ITC Bodoni Seventytwo typeface. This is a case where one font will give you swash characters.

In other cases, fonts with OpenType^® or OpenType Pro features, as well as fonts that come in Pro versions, can give you extended characters, capabilities, and enhancements all in one font. If that single font has swashes, you have to use the CSS property to enable them on the web.

Both ‘Big Heading’ set as h2 (top) and ‘Little Heading’ set as h3 (bottom) are set in the Auberge Script Pro typeface, but font-feature-settings: "swsh" turns on the swash characters in ‘Little Heading.’

The Right Swash for Your Initial Letters

As discussed in prior posts, setting initial letters on the web is technically challenging due to some limitations in HTML and CSS as well as inconsistencies across browsers. And when you add swashes, it only gets more challenging. Swashes may run into the neighboring text, requiring you to make one adjustment after another to repair the layout. Sometimes one font has a swash that works, and another font won’t work at all. But sometimes you get lucky: the letter you need might be in the very font you started with, but you just have to turn it on using CSS.

The initial letter ‘H’ set in Auberge Script Pro bumps too far into the neighboring letter, breaking the layout. Adjustments to its line-height, padding, and/or margin could repair this. Or another font might solve the problem.

But adding font-feature-settings: "swsh" to its CSS gives us an alternate character that saves the day. Not only does it allow us to set the word ‘Here’ with better kerning, but it also has added decoration to spruce up the layout.

By enabling the second available swash character in the CSS above, we got a better result without having to fuss with line-height, kerning, padding, and margins. And we didn’t need to search for another font, reset the typography, and adjust the layout. Using the second swash character was an easy fix, but don’t presume that every second character is going to work.

With font-feature-settings: "swsh" enabled, Auberge Script Pro’s swash ‘G’ runs into neighboring letters.

This is a case when removing font-feature-settings: "swsh" from the CSS to use the default ‘G’ works better.

Application and Testing

As with any design, you’ll want to properly test the typography and layout across a number of browsers, including those on desktops and mobile devices. And before publishing your site to the rest of the world, create some permutations to see what works and what doesn’t.

A short, single word in Auberge Script Pro with the font-feature-settings: "swsh" CSS property employed.

And swashes not only make the beginning of a word ornamental, but they can also add visual punctuation to the end of a word, provided there’s a suitable ending swash.

Not all swashes are created the same. Some are elaborate, and others are understated, like this title set in ITC Bodoni Seventytwo Swash.

Sometimes too much of a good thing can ruin the experience. In this case with Auberge Script Pro, the swashes are fighting one another.

Bad idea. Setting your running text entirely in swashes is not the way to go. Have fun with swashes, but have restraint. Use just enough of them, and you add flair. But if you use too many of them, you’ll hurt readability, drowning the reader with annoying embellishments. And nobody wants a tsunami of swashes.