Every now and then on OSAlert, we discuss typography and language. Despite the fact that many think it’s not relevant for computing – it most certainly is. Whether you’re browsing the web, reading email, or chatting over IM – the most common element on your computer screen is typography. Today, I want to discuss something we barely have in my native language: small capitals.
Small caps
Small caps are regular uppercase characters rendered as lowercase ones, a practice mostly used when setting acronyms like NATO. The reason behind this is that some assume that readers will find acronyms rendered in all-caps jarring, and using small caps will make the text easier to read. small caps can also be used as a method of emphasis (alongside bold and italics), and it’s used in chemistry to note optical isomers (whatever those are).
However, the use of small caps is not completely accepted by everyone. As a Dutchman, I find small caps jarring and unnatural, because they are rarely (never?) used here; when I’m reading English text (and I read more English text than Dutch, actually), I find that small caps interrupt my reading.
Apparently, that’s not a unique position to take. “What [small caps] actually does is inhibit reading: Acronyms are not regular words,” argues Joe Clark, “All-small-caps setting fools the reader into thinking an acronym is a real world. That discomfort you feel is a reverse fixation you underwent trying to reread the word.”
That’s not the only problem with using small caps. A more annoying problem with small caps was recently illustrated by a problem Al Gore had with the design of his new book. Al Gore and his designer chose Brioni as the font, but they ran into a problem with the numeral one in the Brioni font.
“In the book there’re a lot of examples of scientific nomenclature and this particular numeral one is causing confusion when it’s combined with capitals,” Gore’s designer told the Typotheque, the foundry behind Brioni. Consequently, the Typotheque changed the numeral one in Brioni.
Of course, the reason the numeral one was hard to read was because small caps were being used in the book. “It’s hard to read because of the fake bullshit rule that acronyms have to be typeset in small caps, even if they’re 21st-century acronyms that also include numbers,” argues Clark. Clark goes on to give some truly brain-dead examples of small caps usage.
On OSAlert, we obviously don’t use small caps, and we most certainly never will as long as I’m around. It’s no secret any more that we’re working on the next version of OSAlert, and I hope that in said next version, there won’t be small caps either. I’m personally still undecided about camel case, by the way – I say we ditch it, but the amount of complaints we’d get for defying the great companies and their marketing is keeping me from making said decision (and, of course, I’d need to get the rest of the team behind me).
Rendering small caps
My biggest problem with small caps is that software has a lot of problems rendering them properly – Chrome here does a relatively acceptable job, but they still stand out like an eye-sore. Let’s look at why that is the case.
Telling a browser to render small caps is easy using CSS:
<span style="font-variant: small-caps;">fiona rules</span>
Small caps should be rendered at one x-height, usually the height of the letter x. However, that’s not all there is to it; you can’t just reduce the point size of capitals until they are at the x-height of the rest of the text. For the best effect, they need to have the same stroke weight, and generally, a slightly wider aspect ratio. Some fonts include specific small capital characters, but for most fonts, software has to more or less take a wild guess, which looks woefully out of place.
For instance, see the below two examples:
The left attempt is from OpenOffice.org 3.1 on Ubuntu, using times New Roman, whereas the right attempt is from Microsoft Office 2007 running on Windows 7. As you can see, OOo messes up both the x-height and the stroke weight, while Office does a better job at stroke weight but completely misses the x-height.
I chose Times New Roman specifically, because where I’m from, that’s still the font in which schools and universities expect you to hand in material – a rule I’ve been defying for as long as I can remember (I despise Times New Roman). Interestingly, Linux does seem to render Times New Roman better than Windows does in the above comparison (note that I have messed with the default font settings in Ubuntu to achieve this result). It would be interesting if someone can send in a shot of small caps on Mac OS X (be sure to use iWork, since I’m not sure if Office:Mac uses the Mac’s default font rendering).
Update: A reader sent in a sample rendered by Pages on Mac OS X. It seems to get the x-height right (slightly higher than x-height is acceptable), but the stroke weight isn’t optimal (although not as bad as OOo’s):
OSAlert needs to render well on as many different browser and operating system combinations as possible. We’re not a fancy-pants hoity-toity design website (which, ironically, often tend to be illegible), so we can’t afford to just focus on whatever’s mainstream. As such, I stick to the basics: bold, italics, code, our quotation style, on rare occasions a strike-through or an underline, and I really like our chique h3 headers (see above).
On top of the we-need-to-render-properly argument, I dislike using too many different font styles in a single document. While some argue legibility is improved by using a different font and/or font style for every type of text (acronyms, names, headers, subheaders, links, etc.), I find it just leads to messy websites. I don’t want to tout my own horn here (okay, I do), but my own blog is rendered with just a single font, varied only by size (five, to be exact), colour (black, grey, red), boldness (headers and titles), and the occasional use of italics for emphasis.
There are no wildly differing fonts for every text element, no fancy coloured boxes, no lines, images, or other nonsense – yet readability is excellent and content is clearly separated by nothing but (gasp!) spacing. I do have to add, though, that I did not test for people with colour blindness or other possible disabilities, so my apologies for that. Another note is that Linux users may not have Trebuchet MS installed (sudo apt-get install ttf-mscorefonts-installer in Ubuntu).
What I’m trying to say is this: a lot of (web) designers tend to forget that usually, simplicity is better than complexity in typography, because the fancier and the more varied your fonts and font styles get, the less likely it’ll render properly. Small caps is definitely something that only adds complexity, which in turn hurts legibility. That problem isn’t as big in print, as you usually have complete control over how the end product looks. However, on the web – you don’t. As such, keep your typography simple and to the point.
I have little control over OSAlert’ redesign (at least, not until we have something resembling a finished product), but I hope that we keep our typography simple (that’s a hint!).
…I created educational material for a QA group in DEC. Workbooks and such.
Learned many tricks of the trade and with that came many cautions about font usage. Fonts are extremely powerful ways of leading the eye and demarcation of thoughts and ideas.
While I don’t have a vendetta against small caps, I agree their usage should be quite limited.
It is actually easier for the eye (brain) do discern mixed case. Letters are more quickly recognized and reading becomes more flowed. Other things that are important are white space and balance (back to fonts, with titles, header/footer graphics, etc.)
Anyway… this topic should be MORE frequently addressed especially in web development groups.
Thom, I always enjoy your side excursions into the typographic. I don’t always agree though, and today is an example.
I like small caps.
I think you may be onto something when you note that small caps are very foreign to your native language. Aside from the current normative usages (like for acronyms), smalls caps have a “heritage” (read “old fashioned”) aspect to them.
Small caps in English harken to the era of independent small-press broadsheet printers. Look up an example of 1800’s posters — like a U.S. Civil War era print job. There is a playfulness in the use of sporadic capitalization and small caps.
The use of sporadic capitals and small caps helped those broadsheets convey something that is missing from modern, Helvetica-inspired web communications. It very clearly conveys EMOTION, C A D E N C E, and authorial emphasis. Texting, emails, and web postings are often found to be problematic because they are missing so many of those elements. The need for an emoticon arises, in part, because of a mechanical reliance on a single typeface with no emotional inflection.
I also like small caps because they are part of a playful heritage within the English language. English has been marked by rapid evolution in spelling, word invention, and the adoption of phrases from other languages. It’s fun!
I agree, and I do think it’s usage in early US prints (of all sorts) has made it a part of ‘traditional’ American English. From elementary to high school, every US history course has images with small caps – so it doesn’t really strike us as jarring or foreign because we’ve always seen small caps (most of the time without even realizing it).
Most official US seals have small caps in some form as well (President’s Seal, every State Seal, most govt. departments, academia, etc.) in places where regular lower-case just doesn’t look right. “of the” just doesn’t look as formal as a small “OF THE” because lower-case is puny, weak, and boring.
I do admit that when I use small caps I often find that I need to adjust the font size for it to look right sometimes, but I don’t use them often enough or have such problems that I gripe and complain about it.
Edited 2010-01-12 16:45 UTC
I live in the US and I haver almost never seen small caps. Admittedly, I haven’t been looking out for it. But when I do notice it, it definitely does distract and annoy me.
I may express the famous “me too” here.
I’ve worked for some years in the scientific / academic sector and have done typography there. Small caps came in handy when you wanted to connect, let’s say, a person’s name to an effect, which is done this way in German: “der SCHULZsche Effekt” (no idea if such a thing really exists, but let’s assume this for an illustration purpose). In this example, the name “SCHULZ” should start with a regular capital S and and continue with small caps for C up to Z; then “sche” is appended in small letters. It really does look good when set correctly. This special form is used to show that “Schulz” is not an abbreviation (which are set in capitals, and may or may not contain dots, such as “N. V.” or “KVP”). Other means, used in the absence of small caps, are typesetting it in italics, and maybe adding an apostrophe, e. g. “Schulz‘scher Effekt”. Of course, small caps can include hyphens for concatenated nouns, e. g. “die Van-der-Beulen-Schaltung”, named after some arbitrary mister van der Beulen.
Of course, LaTeX is the tool of choice. It offers the \sc macro: {\sc This is in small caps!} with scopus, or \sc now small caps \rm and now normal roman font again.
As you will agree, LaTeX is for professional typesetting, usually on paper, and often for PDF files. It’s not used for the web.
BUT:
Is the web usable for typography?
As a sidenote: Many written (i. e. printed) languages suggest the use of ligatures, such as “ck”, “ch”, “ff”, “fl”, “ffl” or “fi” and many others in German. If you want to have something typeset correctly, you can hardly achieve this with web tools. The usual workaround is to provide a PDF file that contains all the typographic properties.
That’s what smileys (to be delivered as embedded and animated pictures) are to be used for on the web.
Every language is fun, as soon as you are able to master it.
Quit yelling softly at me !
I wrote a little image program using freetype lib ( I think OO uses this library?) and the library does the font rendering work. After that, u can do some bit-blitting to some display buffer or the like. Sure, u can use many options for font rendering, like kerning, width and height of text, and some another cool options. But I was looking for a “weight” of text… and I didn’t find anything. Not in the freetype doc here: http://freetype.sourceforge.net/freetype2/documentation.html
The only thing from here is to read font data and program the text rendering yourself instead.
I think OpenOffice is using freetype internal text rendering funcs. Would be better if OO programmers could develop their own text render capabilites instead freetype ones….
Edited 2010-01-12 16:16 UTC
And some of us have been so disgusted about what
so-called web designers do that we set stringent
rules about the display of fonts: what font to use,
and what minimum sizes are, etc.
The PITA is that CSS can subvert some of this.
Which IMNHO is obnoxious, too. Any guesses why
“Zap style sheets” is the very most-used button
on my browser?
I know what my eyes can read on my screen: J Random Idiot doesn’t have a clue.
Edited 2010-01-12 16:24 UTC
Thom, I disagree that small caps are a distraction. If you look at the line of text here, you will see that they allow a seamless scan of the line. The font used is Garamond, which had a relatively high x-height which would cause severe impairment to scanning the line if normal caps were used.
<img src=”http://i126.photobucket.com/albums/p116/readred_2007/SCaps.png“>…
Present browsers do not handle typography competently, although this facility will come one day.
Edited 2010-01-12 18:27 UTC
Does Garamond/small caps still look as good on smaller point sizes, though? It’s easy to make a font look good at large sizes – it’s the smaller sizes that I’m more interested in.
small-caps aren’t really used inline that often in web design, where it is used is in headers or subheaders of things. In fact, I can’t think of a single instance of small-caps being used for emphasis in a non academic page, and it is pretty rare to see it at all.
Is there any specific examples you have of small-caps being abused on the web?
Is this an American English thing? I hardly see any small caps outside of American academic journals, one of the few printed American English materials I see; unlike digital material.
Does Times New Roman feature small caps at all? Better use a font that knows about small caps like Linux Libertine: http://linuxlibertine.sourceforge.net/Libertine-EN.html#spezial
“21st-century” in French you would have to write ^A<< XXIe si~A¨cle ^A>> using small caps for Roman numerals.
Well, as someone who is not particularly typeface or font savvy, I must say that small caps seems rather ugly. They’re rather jarring and just don’t feel like they fit in with the rest of the text. Maybe that makes sense with things like mathematical formulas, but for acronyms? They’re used for too much these days for it to make much sense to try and distinguish them like that. I mean, you wouldn’t do that with a regular name, would you? Really, how is NATO different from Novell? Why should one be in small caps and the other in the normal font?
I just find it ugly and pointless. It seems like the kind of thing that typographic geeks would care a lot about, but personally, I don’t like small caps at all.
And as for the web, I agree with Thom that we don’t need more complexity. Web pages already tend to bad enough as is, and browsers have a hard enough time rendering things properly with complicating them that much further.
Thom, one of the things that keeps me coming back to this site is your sharp eye for the synergies between language and computing.
A very enlightening article, indeed, although I really like small caps. I’ve noticed that in the US it is practically a sine qua non when it comes to certain formatting niches, like lists of editors in journals. I discovered that while I was Editor-in-Chief of Foundations, an international undergraduate academic history journal (http://www.jhu.edu/foundations, all English-language submissions are encouraged!), during my undergraduate years, and you can see what I mean if you visit the link and download the PDF of the Spring 2009 issue. Of the editors, I probably had the most experience working with layout, and yet because I was never formally trained I was ever finding out new things about how my mind interprets formatting and its quirks. The proper use of small caps was one of these cases which I had to learn through trial and error, and undoubtedly the subliminal gratification it engendered when put to use properly is caused by the typographical milieu that surrounds me.
I just wanted to make one small correction, because the error was idiomatic yet subtle–it made me chuckle a little at how complex language is, because the sentiment and grammar and everything make perfect sense, and yet it is still “off”:
“tout my own horn”
It really should be “toot my own horn”. Touting your own horn makes you sound like a horn hawker ;-).
EDIT: I just saw ricard’s comment about printed academic journals and JacobMunoz’s observation about the seals, both of which are dead on. I might also add that the headers of pages in (old academic?) books that have the running chapter or book title are done in small caps, and I can confirm this in English as well as Portuguese and some Turkish books.
Edited 2010-01-13 05:13 UTC
I never really thought about small caps up until now, beyond ^aEURoehey, that looks kinda cool^aEUR. After reading this and pondering the topic for a while from a typographical point of view, I think I agree. No more small caps for me.
A couple of tangentially-related (to the article) comments. Your blog^aEURTMs header has red text on a black and white photo. I found that pretty hard to read, which seemed somewhat ironical given the context. As for the OSAlert redesign, any chance you guys might start using ^aEUR~em^aEURTM for emphasis, ^aEUR~strong^aEURTM for stronger emphasis and ^aEUR~blockquote^aEURTM for quotes, rather than relying on typographical conventions to represent everything?
The redesign will be HTML5 and make full use of semantic elements instead of classes and whatnot unless absolutely necessary. My own website uses no classes, even for complex articles like this http://camendesign.com/geos it reduces the writing overhead when you have decent semantic elements, as well as making the content play better in people^aEURTMs RSS readers and other places it may end up.
Thom was dropping a big hint to me that he doesn^aEURTMt want artsy-fartsy, pedantic and stuck-up typography conventions on OSAlert^aEUR”just plain readability. I^aEURTMm with him on that one. I^aEURTMm not a font-geek (thank Heavens), nor a typography nerd.
As there are some omissions/inaccuracies.
First off, for those of you not familiar with all the typography terminology, here’s a GREAT reference.
http://www.paratype.com/help/term/le.htm
TECHNICALLY it is NOT an EX that small-caps is supposed to use. Small-caps are supposed to use the meanline as their top, which is the same line used as a guide for most lower case letters. Since a lower-case X can through serifs and other embellishments go below the baseline and above the meanline, it’s size is not an accurate indicator of where the mean-line is. x-height does not always equal the distance between the meanline and the baseline.
Of course, all the different renderers treating it differently doesn’t help, but the biggest problem is none of these font engines or formats HAVE a value for the meanline or x-height to be stored! This pretty much means that it’s up to every program to randomly figure out what it’s going to use – since small-caps isn’t even officially recognized as a font-style by the rendering engines.
Yes, you heard me right, if that font style is applied, it’s the program handling it, NOT the font engine in the OS. This means for the most part, the size is a complete guesstimate.
Which you can see since Firefox, OpenOffice and any Microsoft software will all give you radically different appearances on text formatted the same way. (Netscape legacy small-caps being among the worst out there, since the ‘lower case’ small-caps appear to be half a EM in height)
It gets REALLY stupid when OpenOffice is involved, since it appears to use freetype or some other internal engine for kerning and determining the size of text even when using truetype to render glyphs on windows. (****ing brilliant – NOT) Part of why i t oft en h as prob lem s with spacin g! (and why I find OoO completely useless when working with text for any length of time)
But that goes back to what I said on that page two article about font sizes – if you are wanting pixel-perfect identical appearance of fonts across platforms/software/hardware targets, you’re in the wrong business, and kind of missing the entire point of digital media.
Edited 2010-01-14 23:27 UTC