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.