The intersection of web and type can be seemingly antagonistic. While the web’s biggest concerns should be speed and accessibility, the typographer’s interests honor the age-old art of conveying information beautifully and legibly.

TL;DR: Small caps are an important aspect of typography that have become an endangered species on the web. 1. Small caps are useful and elegant. 2. There is no viable way to programm­atically create small caps and we should stop trying. 3. Designers should choose typefaces that are complete and include small caps. 4. Designers should include small caps in their typographic styles, perhaps in place of bold text.

What Are Small Capitals

Small capitals (or small caps) are shorter versions of cap­i­tal let­ters, usually just slightly taller than the font’s x-height, often set with slightly wider tracking than regular text. They are not simply scaled down versions of their capital counterparts, but are designed to maintain the weight and rhythm of the font.

Why We Want Small Caps

Small caps have multiple uses; the primary utilities being emphasis and abbreviation. In addition to being useful, they are also elegant.

Today, bolds and italics are most often used to to add emphasis to text. Bold fonts are a relatively new invention; typefaces that originated before the nineteenth century that include bold characters were nearly all added retroactively.1 Granted, it’s not compelling to say that bold text is inherently bad because it didn’t exist 200 years ago. There is certainly a time and a place for bold text, but from a strictly typographic standpoint, using bold fonts within body text is less preferable than italics or small caps, as the heavier weight breaks up the rhythm of the text.

When typesetting (exclusively) involved casting and carving a piece of metal into a sort,2 fonts consisted of one weight. When a typesetter wanted to emphasize text, the convention was to either increase the tracking of the emphasized text, use small caps, or use a different font altogether—such as blackletter3 or an italic.

Another historical—and still excellent—use for small caps is abbrev­iations and acronyms, such as San Francisco, CA, 8:00 PM, and the EPA.

Typesetter in the Early Twentieth Century
Typesetter in the Early Twentieth Century

Why We Want Real Small Caps

With CSS 2.1 came a new property: font-variant: small-caps. I would assume the type community was at least flattered that small caps were considered important enough to include in the specifications, but the results of this transformation are awful.

Designers using small caps might be tempted to emulate small caps with CSS. With increasing frequency, I notice styles attempting to emulate small caps (perhaps unwittingly) by decreasing font size, adding text-transform: uppercase, and sometimes comically wide letterspacing. Here is an example of caps, generated small caps, some emulated small caps using CSS, and real small caps:

  Specimen
All caps THE QUICK BROWN FOX
Faux small caps The quick brown fox
Emulated, regular The quick brown fox
Emulated, bold The quick brown fox
Real small caps The quick brown fox

Based on the sample above, the emulated small caps may not seem that bad at first glance, but are identifiable to the moderately savvy eye. Some browsers are more obvious than others.

What is definitely clear is that font-variant: small-caps should never be used. Note that the weight of the font is not maintained, the tracking is narrower than regular text, and there’s no way to avoid the capital small capital.

The Capital Small Capital

Some designers prefer to preserve the natural capitalization of small caps, where the first letter of sentences and proper nouns will be capitalized, and reach cap height. This isn’t technically right or wrong, it boils down to preference. Like any other typeface, small cap fonts include uppercase and lowercase glyphs.

Uppercase and lowercase Latin glyphs in a small cap font
Uppercase and lowercase Latin glyphs in a small cap font

However, many designers (myself included) uphold that uppercase letters should not be used in small caps. In other words, all text in small caps will be “lowercase,” and no letter reaches cap height. Thankfully, there is an OpenType feature for this:

  Specimen
Sentence case small caps A vacation to Mt. Rushmore
Lowercase small caps A vacation to Mt. Rushmore

The combination of OpenType features smcp and c2sc (“Capitals to Small Caps”) produces all lowercase small capital characters that is still grammatically correct when copy-pasted.†

1
2
3
4
5
// Small caps with all lowercase characters
%small-caps {
  // Prefixes here
  font-feature-settings: "smcp" 1, "c2sc" 1;
}

System Fonts Vs Premium Fonts

A well-designed typeface for body text will include at least one set of small caps. Using that on the web means an additional server request plus the few hundred kilobytes of extra data. This is non-trivial, especially when extrapolated to headings or additional body fonts.

Using system fonts would be faster for the user, they would free us up from expensive font licenses, and even eliminate the need for new typefaces altogether 😜. I am not absolutely opposed to system fonts, in fact the monospaced font stack on this site uses system fonts; the aesthetic benefit of a custom monospaced typeface versus using a comparable one already stored on your device is much less significant than the rest of the fonts on this page.

All sys­tem fonts are over­ex­posed. Be­cause these fonts are in­cluded with mil­lions of com­put­ers, they’re used all the time. Not every ty­pog­ra­phy project de­mands nov­elty, but if yours does, you’ll need to look else­where. For in­stance, you wouldn’t want to adopt the mar­ket­ing slo­gan “A De­sign Firm Un­like Any Other” and then set it in Helvetica.4 — Matthew Butterick

System fonts certainly have benefits, and can be tempting. For applications where speed is the most important consideration, using system fonts is likely the best solution. However, in general, system fonts are unpredictable (assuming people will use more than one operating system to view the text), poorly designed, and commonplace. Additionally, no system fonts have small caps.

Implementing Small Caps

As we’ve established, programmatically styling regular text into small caps in not an acceptable solution. In order to use small caps properly, a true small cap typeface is necessary.

After a few iterations, this is the implementation I settled on:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// @font-face mixin to import font files
@mixin font-face($file) {
  $filepath: "/fonts/" + $file;
  @font-face {
    font-family: "#{$file}";
    src: url($filepath + ".woff");
    // I only use woff files
  }
}

// Small caps font file
@include font-face("equity-caps");

// Placeholder selector for all lowercase small caps
%sc {
  // "onum" uses Old Style Numbers
  -moz-font-feature-settings: "smcp" 1, "c2sc" 1, "onum" 1;
  -ms-font-feature-settings: "smcp" 1, "c2sc" 1, "onum" 1;
  -o-font-feature-settings: "smcp" 1, "c2sc" 1, "onum" 1;
  -webkit-font-feature-settings: "smcp" 1, "c2sc" 1, "onum" 1;
  font-feature-settings: "smcp" 1, "c2sc" 1, "onum" 1;
}

// --- //
// If you prefer capitalization, omit `"c2sc" 1` from rules above
// --- //

// Resets browser behavior to avoid faux bold or italics
%type {
  font-style: normal;
  font-weight: inherit;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

// Mixin for small caps
@mixin caps {
  font-family: equity-caps, Georgia, Times, serif;
  font-style: normal;
  @extend %type;
  @extend %sc;
}

// Finally, my main selector
.caps {
  @include caps();
}

// Use caps for <strong> tag
p {
  // Normal body style here

  strong {
    @include caps();
  }
}

Once we have this .caps selector and the @include caps() SCSS mixin, it can easily be applied to any other selector or tag. This article was written using Markdown; I applied the caps styles to the <strong> tag—see line 53 in code snippet above—so I am able to use Markdown’s **@content**, which saves time and makes drafts more readable.

Letterspacing

Depending on how well the typeface is designed, you may want to increase the letterspacing of the small caps. The typeface5 that you see here has excellent tracking with no need for additional styling.

With letterspacing in general, subtlety is important. Adding anywhere from 0.05em to 0.1em of letterspacing may be appropriate. (While ligatures normally do not apply to small caps, it should be noted that defining letter-spacing as anything other than 0 will disable ligatures.)

Now You Have Nicer Type

That’s all I have on small caps, for now. For more information on typography, check out Practical Typography by Matthew Butterick and The Elements of Typographic Style Applied to the Web by Robert Bringhurst.

Typesetter

Thanks for reading!


Footnotes:

† With text-transformation: lowercase, copy-pasting text in some browsers (Chrome, Safari, and Opera) upholds the CSS transformation, so letters that were supposed to be capitalized now appear incorrect. Other browsers (Firefox and Internet Explorer) copy the text from the DOM, without CSS text-transformations.6


References:

  1. Bringhurst, R. (2012). The Elements of Typographic Style (4th edition). Seattle, WA: Hartley & Marks.
  2. More on Sorts on Wikipedia.
  3. More on Blackletter on Wikipedia.
  4. Butterick, M. Practical Typography. Retrieved from practicaltypography.com.
  5. Equity by Matthew Butterick.
  6. Coyier, C. (2015). Copy & Paste & The Web. CSS Tricks. Retrieved from css-tricks.com.