EJS logo

Tomorrow’s web type today: Expert subsets for css in 123

On Thursday, in the first post in the series I’m calling ‘tomorrow’s web type today’, I covered ligatures. In the process, I dropped in a mention of several other OpenType features, including small caps and old style numerals — both of which I’ll be covering in today’s post.

See the ‘CSS’ and ‘123’ in the title above, set in Magneta? They’re true small caps and old style numerals, delivered not via an experimental OpenType feature, but using Fontdeck’s ‘expert subset’ of Magneta. In case you can’t see it, this is what the type should look like:

Screenshot

Web designers have been attempting to replicate small caps online for quite some time by shrinking uppercase type so that it matches the x-height of the lowercase font, but that means that the ‘faux small caps’ type is considerably lighter, which really doesn’t look great. So with proper small caps in our lives, the world will be a happier place. And what about old style numerals? Many font files contain both lining and old style numerals for the print designer to choose from, but until recently we’ve been poorly served on the web. Let’s change that.

Activating new features via OpenType

The key to enhancing your web type with small caps and / or old style numerals lies with another gem from the working draft of the CSS3 Fonts Module: the font-variant property. Firstly, let’s turn on small caps:

p { font-variant-caps:small-caps; }

Look familiar? That’s because we’ve had font-variant:small-caps; kicking around since CSS 2.1, but it was never particularly reliable. The spec said that is should select a small-caps font, but if the trouble is that if one wasn’t available, you’d just get that nasty shrinking-down effect. So forget that — font-variant-caps:small-caps; is where it’s at.

We can specify our preferred flavour of numerals in a similar way:

p { font-variant-numeric:oldstyle-nums; } (EDIT, 19.05.2012: corrected code)

Of course, as I mentioned on Thursday when discussing ligatures, their display depends on both browser support and the relevant glyphs being present in that particular font file. And yes, that can differ depending on where your fonts are being served from. The best rule of thumb is to check and check again. And then weep a little and then check again.

Polyfilling with subsets

However, as a mentioned at the beginning, the true small caps and true old style numerals in the heading above aren’t using any of this OpenType-specific CSS. If Thursday’s post on ligatures was about showing how to push the boundaries with bleeding-edge techniques still in the working draft, today’s is about showing how to plug those holes and offer more universal support with a method that has actually been around since the days before OpenType: subsets.

Before the OpenType font format came along and allowed us to have many alternate glyphs in a font (and I’m talking about this in terms of print now), foundries had to offer a small caps font in a separate file. The same goes for old style numerals and various other stylistic alternates we now associate with OpenType. Returning to this idea, Fontdeck have released something they’re calling ‘ expert subsets’ for particular typefaces. Here’s my CSS to activate them in the heading above (the spans are automatically inserted by lettering.js):

h2#art-direction span.word8, h2#art-direction span.word10 { 
    font-family:"Magneta Expert Subset Thin", "Magneta Thin", "Georgia", "Times New Roman", serif; 
}

If you’ve been following what Trent has been up to recently, he’s been applying the same principal to icon fonts (although he’s been compiling his own font files and hosting them himself): using a file that contains only the characters that are needed — whether they’re icons or, in our case, small caps and old style numerals. Really the principle can be applied to any sort of alternate.

I hope some of this has been useful! Again, I’m indebted to Rich Rutter and his An Event Apart talk from last year that has helped shape this post and the others in this series.

Heading: Magneta, served via Fontdeck. Body: Skolar, served via Fontdeck