Pre-meditated Sheep Thievery Using text-transform: lowercase;

Frederick Goudy once said,

"Anyone who would letterspace black letter would steal sheep."

the quote is also commonly changed to,

"Anyone who would letterspace lower case would steal sheep."

Here on this site I am guilty of the later. I have been meaning for some time to address it.

First, why would I do such a thing? I enjoy organic design with a modern touch. Thus I began this site's design with an arch of bones, which lead naturally to using a heavily serifed font such as courier for the paragraph text. This heavy font combined with very tight letterspacing is necessary to balance the bright colors and exotic design. I am sick of all these personal sites trying to look all slick and corporate with gray and blue, so I went to the opposite side of the color wheel. But I like a bit of post-modern typography in there to keep things lively, so widely spaced headers seemed the obvious choice, if a bit of a cliché.

Then the problem of scannability came up. There is a reason that headers are large and bold by default: they are more important than the rest of the text. One should be able to scroll and scan the headers looking for a previous entry. I concocted the overly technical solution to the scannability problem of using the DOM to collapse recent entries, and change them to look like regular links which are properly styled to stand out from the rest of the text. This was an interesting technical exercise and I am reasonably happy with the result, but it will probably not survive the next re-design.

Here is where one of my new favorite CSS properties comes in.

By using text-transform: lowercase; to achieve the post-modern look of my headers while using traditional title case when entering the copy into my blogging tool I am ensuring the forwards compatibility of my content. In the next design of this site my headers will more than likely be properly emphasized, and my text is ready for that day.

You might also notice that my recent entry links appear in their natural title case, enhancing their legibility. Isn't it great how CSS lets you totally obsess about the details?