×
Ă—
I LOVE TYPOGRAPHY

Small Caps

by Alec Julien

Small caps are uppercase glyphs drawn at a lowercase scale. A common misconception—unfortunately reinforced by most word processing programs as well as by CSS on the web—is that a small cap is just a regular capital letter scaled uniformly down to a smaller size. In actuality, a proper small cap is a carefully crafted glyph that differs in significant ways from a uniformly-scaled-down capital letter.

Small Cap height

Generally speaking, small caps are about as tall as the font’s x-height. Look, for instance, at Minion Pro‘s lower case m compared to a small cap Minion Pro m; it’s marginally taller than the lowercase m and the font’s x-height. Other typefaces have small caps that are the same height as the x-height, while others still stand a little shorter.

small caps height

Obviously, since the height of the small cap m is about as tall as the x-height of a regular Minion Pro lowercase m, a small cap m at any given point size is significantly smaller than an upper case or regular cap M at the same point size:

caps-and-small-caps.png

Different Ms

When we scale the small cap m up to be the same height as a 381pt M, it’s 534pt; and in this case we can clearly see the differences between the two glyphs. The small cap version is, for one thing, wider than its capital counterpart, and its serifs are, for another thing, taller.

reg-versus-small-caps.png

Why is the small cap “m” proportionately wider and bolder? A picture is worth a thousand words:

comparisons: regular caps and small caps

Note that when regular Minion Pro caps are scaled down (1.1) to the same height as Minion small caps (1.0), the effect is dramatically different. The regular caps are lighter, tighter, and have a less striking visual impact. For illustrative purposes, I set a very loose tracking on the regular caps (1.2), to get closer to the look of the small caps. Closer still to the small caps version is a loosely tracked semibold version (1.3). But even this doesn’t quite capture the visual essence of the small caps version.

What we’re used to

The algorithms for generating small caps in most desktop programs is both simple and woefully inadequate. Look at what Microsoft Word does when it generates ‘small caps’ in a font (Times New Roman) that doesn’t come with its own small caps:

ersatz cap

First of all, note that, compared to our Minion Pro example, the Times fake small cap m is too tall. But the more heinous crime is that the fake small cap m is literally just a small capital. When we scale the ‘small cap’ to be the same height as the regular capital, we can see this clearly—note the position of the lines in the graphic below:

faking it

CSS

And the same thing happens in your browser. Unfortunately most so-called web-safe fonts don’t have small caps and, even if they did, it appears that CSSs font-variant: small-caps simply ignores them and rescales the regular cap; and yet The World Wide Web Consortium (W3C) states,

A value of ‘normal’ selects a font that is not a small-caps font, ‘small-caps’ selects a small-caps font. (emphasis added)

Well, it doesn’t appear to work.

What’s the point?

Here’s a random page from a David Hume book, via Google Books:

Hume

Uses of small caps are circled in red.

What are they good for?

As you can see, small caps are an important part of your typographical arsenal—most commonly, they are used for acronyms, but they can also be used for setting page headers, in captions and legends, or for abbreviations, acronyms and definitions in your body text—but if you’re going to use them, do it right: buy fonts that have small caps in them, and use them in a decent page layout program that respects them.

Anziano designed by Stefan Hattenbach is a relatively new type that has an excellent set of small caps.

[Alec Julien, a regular contributor to iLT, is a web developer and amateur typographer, living in Vermont, US. He dreams of someday living somewhere warm, and typesetting a novel.]

More articles by Alec:

So you want to create a font: part 1 | part 2
Font creation case study: Joules

previous: Sunday Type: pointy type

next: Sunday Type: fruity type

Typeface Categories

learn greek type desgin
font deals of the week
fonts on tape