What we’re missing on the web

Designing for the web often serves a different purpose, and can have it's advantages over designing for print.

We trade paper alignment headaches for browser rendering migraines and color swatches for the hexadecimal system. But what gets lost in translation? There are a few traditions that have been around long before cascading style sheets that are still missing on the web.

Real small caps

Small caps are misunderstood by web browsers. They are more than capital letters shrunk down. When typefaces include them, small caps are completely redrawn letters that usually match the x-height of the typeface. Robert Bringhurst explains:

Genuine small caps are not simply shrunken versions of the full caps. They differ from large caps in stroke weight, letterfit, and internal proportions as well as in height. Any good set of small caps is designed as such from the ground up. Thickening, shrinking and squashing the full caps with digital modification routines will only produce a parody.

Page 48, The Elements of Typographic Style, version 3.2 by Robert Bringhurst

Small caps do not exist on the web. At least not the way they are supposed to, even when the typeface used includes it's own small caps. There is a CSS style that can be applied to type to display "small caps" in the browser.

font-variant: small-caps

One might think, great, now I have have another tool in my typographic toolchest. But wait, there's something that you should know about these small caps rendered by browsers first, they're fakes! That's right, shrunken down capital letters parading around as small caps. Today's web browsers don't recognize small cap glyphs as an option and go ahead and create their own versions.

Below is the typeface Sorts Mill Goudy, displaying three different glyphs of two letters: lowercase, small cap, and capital. Clearly, each character was designed specifically. The shapes have been redrawn for each glyph and that is clear when comparing the design of the small cap and the capital letters.

I've included another image with the same characters but as they were rendered in Firefox 3.6 on a Mac:

The small capital characters are displayed different. The browser takes the capital letter and shrinks it down to what it thinks is the correct height. I've combined the two images so you can compare the differences. The browser-rendered font is in black and the actual glyphs are overlaid in cyan.

While this might not be a make-it-or-break-it type of issue for many people, I was taken aback when I realized this was happening. The browsers aren't displaying the type that was designed to be used in certain circumstances. I felt betrayed! The more I learn about type, the more respect I have for it and for the designers.

This isn't really an issue for most of the fonts out there on the web right now as many of them do not include small caps. In that case, the browser or Photoshop, or whatever the type is being rendered in, will create small caps for you based on the capital letters. But as type is able to be used more freely on the web now and in the future, I imagine and hope that designers will want access to the intended small caps for their favorite typefaces.

Solution

Typekit offers an interesting alternative. For a few of their fonts, they offer an additional Small Caps font. For example, FF Meta Web Pro and FF Meta Serif Web Pro are offered as any normal typeface is, but in addition, Typekit provides a Meta Small Caps Web Pro and a Meta Serif Small Caps Web Pro font. This means that to take advantage of the original small caps designed for each font, you would need to load this additional font on the page and specify it as a separate font every time small caps are used.

This can be a bit of a hassle, and it will increase the weight of the page, but it is a step in the right direction. Until browsers are able to recognize a small capital, we might have to just deal with this type of thing.