In this blog I’ve looked at various options for advanced web typograph: some of them used to increase legibility, others purely decorative. Swashes and alternate styles definitely fall into the second category.

Swashes are alternative glyphs that include typographical flourishes. Some typefaces, such as Zapfino, offer extremely ornate swashes that resemble calligraphy, while others are relatively subtle (Igino Marini’s excellent French Canon typeface for example, used in the header for this article).

Typographic swashes are brought to your page with a simple CSS3 value for the font-feature-settings property: of course, this assumes that the OpenType font has a swash variant, is correctly embedded on the page and that the browser supports OpenType features.

@font-face { 
	font-family: "French Canon";
	src: url("french-canon.otf");
	font-weight: 100;
}
h1 {
	font-family: "French Canon", cursive;
	-moz-font-feature-settings:"swsh=1";
	-moz-font-feature-settings: "swsh";
	-webkit-font-feature-settings: "swsh";
	-o-font-feature-settings: "swsh";
	-ms-font-feature-settings: "swsh";
	font-feature-settings: "swsh";
}

Contextual Swashes & first-letter

Repeated swashes are likely to be visual overkill for any span of text longer than a major heading. A swash could be inserted as a drop cap for the first paragraph in a page:

body p:first-of-type:first-letter {
	font-size: 300%; 
	display: inline-block;
	float: left;
	margin-right: .5rem;
	font-feature-settings: "swsh";
}

(Remember that you’ll need to include vendor prefixes for appropriate browsers).

Adjacent swashed letters may clash visually. One possible way of avoiding this is to turn on contextual swashes, which enables swashes on only the first and last letters of words:

h1 {  
	-moz-font-feature-settings: "cswh=1";
	-moz-font-feature-settings: "cswh";
	-webkit-font-feature-settings: "cswh";
	-o-font-feature-settings: "cswh";
	-ms-font-feature-settings: "cswh";
	font-feature-settings: "cswh";
}

Some OpenType fonts offer a second option for swashes, which can be gained by using the following:

h1 {  
	-moz-font-feature-settings: "cswh=1" 2;
	-moz-font-feature-settings: "cswh" 2;
	-webkit-font-feature-settings: "cswh" 2;
	-o-font-feature-settings: "cswh" 2;
	-ms-font-feature-settings: "cswh" 2;
	font-feature-settings: "cswh" 2;
}

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.