Elliot Jay Stocks is a designer, speaker, and author. He is the Creative Director of Adobe Typekit, co-founder of lifestyle magazine Lagom, founder of typography magazine 8 Faces, and an electronic musician.

Tomorrow’s web type today: Say it With a Swash

Posted on 14 May 2012 Comments

For the third post in my ‘tomorrow’s web type today’ series, I’d planned to show OpenType swashes activated via CSS, but as browser support is currently so poor (Firefox only at the time of writing), I’ve instead opted for a swash subset to achieve the desired effect in this example.

I think there’s real value in documenting this process, as deciding between pushing the boundaries or playing it safe is something we come across every day in web design. Much like I discussed in the last article, using a subset — a font file made up of a small amount of ‘special’ glyphs — is a safe way to ensure wider support, and for this I’ve used Acta Poster Swashes, rendered only on the first letter of the words ‘say’, ‘with’, and ‘swash’. Typekit don’t classify such fonts as ‘Expert Subsets’ (that’s Fontdeck’s terminology), but the principle is the same. For the benefit of those reading this in an RSS reader or read-it-later app, this is how the heading should look:

Screenshot
Yes, those overlaps are intentional!

As with all OpenType features, there are a few challenges we face: Firstly, does the typeface contain swash glyphs? If so, does this particular version from this particular font delivery service? And — if it’s an option — have we chosen to export all available characters? I went through that process when choosing type for the header and had to experiment for quite some time before finally going with the subset-enhanced option you see above.

Sadly, there aren’t many web fonts our there right now that contain swashes and it’s not even easy to find the ones that do. Fontdeck have started adding OpenType tags, which helps massively, so I hope we start to see this elsewhere. Here’s their page for Trilogy Fat Face:

Screenshot
The addition of OpenType tags to Fontdeck’s library means that it’s now a little easier to find those special fonts you’ve been wanting to experiment with.

Speaking of Trilogy Fat Face, the Ampersand site (look, Mum — there’s my name in lights!) uses it to great effect. And a clever bit of JavaScript detects when swashes are supported and, if not, serves up a subset instead. Nice!

Screenshot
2012.ampersandconf.com makes use of the swashes contained within Trilogy Fat Face.

Activating swashes using font-feature-settings

Anyway, to actually turn on swashes, we return to our new best friend font-feature-settings , which I mentioned back when we were discussing ligatures:

h2 { 
    font-feature-settings:"swsh" 2; 
    -moz-font-feature-settings:"swsh=2";
    -webkit-font-feature-settings:"swsh" 2;
}

That ‘2’ effectively says, ‘use the second swash character’. Bear in mind that a font might not have a second swash option. Perhaps it’s only got one. Perhaps it’s got ten. As with everything we’re doing here on the frontier of experimental web typography, all you can do is test and test and test, because every single scenario is different. And yes, it’s bloody annoying!

With all this talk of secondary glyph options, it feels like we’re wading into the waters of stylesets, which is the topic I’ll be covering in the next post! That’s where it gets really confusing.

A note on text-stroke

Before I go, I just want to add a little note about the text-stroke you’ll see on the heading if you’re viewing the site in a WebKit browser. There’s currently no way to specify the origin of the stroke — ‘outside’ would be preferable — and so it’s currently inadvisable to use the property beyond a thickness of one pixel ( Chris Coyier has a great explanation), but it does help to add a little definition when characters overlap as they do in this example. Here’s my CSS:

h2 span.word5 [etc.] { 
    -webkit-text-fill-color:#ff6875; 
    -webkit-text-stroke-width:1px; 
    -webkit-text-stroke-color:#333;
}

Fore a more detailed look at the heading, feel free to peruse the full CSS file for this post.

Hope some of that was useful! As always, I’m happy to be corrected (I’m currently editing the last two articles based on readers’ feedback), so please let me know in the comments if you see anything that needs amending.

Heading: Acta Poster Italic and Acta Poster Swashes, served via Typekit. Body: Skolar, served via Fontdeck

© 2005 – 2014 Elliot Jay Stocks. All rights reserved. Powered by Siteleaf and tracked by Gaug.es. To keep updated with new content, you might like to subscribe to my RSS feed.