Absolutely Fabulous

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.

An exampleof swashes in Zapfino
An example of swashes in Zapfino

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";
}

Requiem aeternam dona ei, Domine. Et lux perpetua luceat ei. Requiescat in pace.

(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.