Typography and Microformats: adding small-caps to your state abbreviations

Robert Bringhurst’s book The Elements of Typographic Style is overwhelming me with typography details. Today I came across a description of using small caps for abbreviations, which inspired me to come up with this snippet for state abbreviations.

For abbreviations and acronyms in the midst of normal text, use spaced small caps

Many typographers prefer to use small caps for postal abbreviations (San Francisco, CA, 94119, and for geographical acronyms longer than two letters. Thus, the USA, or in Spanish, los EEUU, and Sydney, NSW.
The Elements of Typographic Style – Robert Bringhurst page 48

Microformats

The hcard microformat uses the region class to define a location’s region. This is typically used for a state or territory.

CA

Creating your small caps

Small caps allow acronyms to blend in with adjoining text by reducing the text height to the level of lowercase letters.

In typography, small capitals (usually abbreviated small caps) are uppercase (capital) characters set at the same height and weight as surrounding lowercase (small) letters or text figures. They are used in running text to prevent capitalized words from appearing too large on the page, and as a method of emphasis or distinctiveness for text alongside or instead of italics, or when boldface is inappropriate. For example, TEXT IN CAPS appears as text in caps. They can be used to draw attention to the opening phrase or line of a new section of text, or to provide an additional style in a dictionary entry where many parts must be typographically differentiated.
Small Caps – Wikipedia

You’d expect font-variant:small-caps rule to work right out of the box. It’s supported by all major browsers, yet it has an odd flaw.

.region-bad {
font-variant:small-caps;
}

State

CA

This rule is essentially saying:

1. Make lowercase letters uppercase
2. Set the font size to match lowercase letters.

Davin Granroth’s article, Small-caps, web text, and CSS, suggests working with this pattern by first setting the content to lowercase and then setting small caps. I’m also adding a small amount of letter spacing, as suggested by Bringhurst.

.region {
text-transform:lowercase;
font-variant:small-caps;
letter-spacing:.1em;
}

State

CA

Please note: I’m throwing this .region class all over this article. You may want to create a different class name for elements outside the microformat usage. Also, not all countries would place an abbreviation in the region class, so this may be limited to US addresses.

More Resources

• Test of HTML + Small Caps – Joe Clark
• Proper Use and Examples of the small-caps CSS Property – Jonathan Kemp
• Font Variant – Mozilla
• Microformats