There’s a trick to getting small-caps to work on the web, and it’s counter-intuitive.
Let’s say you had an abbreviation, like CSS, that you wanted to put into small-caps, say with a little extra tracking. You might think you could use the CSS property font-variant: small-caps, and you’d be good to go. Not so.
Here’s why. Because for small-caps to work, you need to start with lowercase letters.
However, when you’re simply typing your thoughts out before you’ve decided on small-caps for abbreviations, acronyms, etc., you probably typed those abbreviations in uppercase.
So, when you tried small-caps, it simply didn’t work. For example, see this web page from 2005 that Joe Clark wrote to test small-caps. Note how the small-caps versions are more like regular capital letters. Not cool. It makes the hack look good, which is bad.
So, here’s what you can do (and what I think browsers ought to be doing automatically anyway):
- First apply
text-transform: lowercase - Then apply
font-variant: small-caps
That ought to do it.
Here’s a more specific example of the CSS.
abbr, acronym {
text-transform: lowercase;
font-variant: small-caps;
letter-spacing: 1px;
}
3 responses to “Small-caps, web text, and CSS”
Isn’t this based on the fact that even with small caps, there can still be a want for *some* upper-case letters within?
I prefer these rules:
.firstWord {
text-transform: lowercase;
font-variant: small-caps;
}
.firstWord:first-letter {
text-transform: uppercase;
}
where the |firstWord| class is applied to the first word of a paragraph.
Hi Jared, that’s a good point. Also, if you just want your normally lowercase letters to shift to small caps, you could just leave off the text-transform portion.
But I’m not a fan of mixing uppercase and small caps for purely aesthetic reasons. Sort of hard for me to explain why, other than the slight difference in letter weights and height between the cap and the small cap feels awkward to me. Thus, I can’t imagine where I personally would want to mix them. I guess I’d want to evaluate it on a case-by-case basis.
Also, I think small caps should be used sparingly. It seems appropriate for short stretches of text that should have some contrast with normal body copy. In web terms, examples could include abbreviations, acronyms, field labels, fieldset legends, table headers or captions, and perhaps some normal headers.
Hope all is well with you at the new gig!
I feel compelled to mention that this blog post does not take into account whether or not the font being used actually has the small-caps variant available within it.
I hope, but have not verified, that if the font has a small-caps variant, that it will use the small-caps glyphs embedded in the font file. I presume that if the font does not have a true small-caps, that the browser will just force a smaller version of capital letters to render.
To appreciate some of the differences between regular capitals and small-caps, read this blog post: http://ilovetypography.com/2008/02/20/small-caps/