Versals & Drop Capitals

Versals, drop capitals, or raised capitals are large and oft ornately decorated letters (particularly in the case of versals) that mark the opening of a running body of text or a verse: vers•al |ˈvərsəl| adjective of or relating to a style of ornate capital letter used to start a verse, paragraph, etc., in a manuscript, typically built up by inking between pen strokes and with long, rather flat serifs. noun a versal letter. Some beautifully hand-drawn versals that I found in the back of an old un-named sketch book a while back.

A Little History

Versals date back before the time of Gutenberg and the advent of Western printing, and were hand-inked by scribes. In fact early printing tried to mimic the handwriting style of the time (the “blackletter” styles we associate with that era), and versal letters continued to be hand-inked even while much of the rest of the page was printed via letterpress. This hand-inking process continued because the method was well-practiced and the versals were quite ornate and difficult to print with the early presses. Hand-inking also allowed for easier use of numerous colors for the versal. Modern typography (if we can call it that—most set type isn’t sadly set with much typographic thought) has lost these classical decorations, largely in favor of a more clinical and neutral page. A lot can be achieved with a little typographic flourish which I feel many designers aimlessly try to achieve by copying trends of overly reflective and glossy elements (think “web 2.0” as a design aesthetic).

Versals on the Web

Setting versals on the web isn’t particularly hard. The quick and dirty method is with images and manually adding a span tag with your styled class to the opening letter, but there are far more standards-friendly and efficient means to go about spicing up your opening letters. There is a useful CSS pseudo-selector that we can use to refer to the first letter of an element: the :first-letter. You can combine this with other selectors to refer to the first letter of the first paragraph of a page, heading, or whatever else strikes your fancy (utilizing the DOM structure properly is helpful in making this work properly). Note: Internet Explorer has historically had many issues with selectors and pseudo-selectors in CSS 2.1 but it understands :first-letter fairly well, and IE8 has full support. The CSS styling may look something like this:

div#content h2.entry-title + p:first-letter {
    font-size: 4.2em;
    float: left;
    display: in-line;
    text-transform: uppercase;
    }

The positioning of the versal is entirely up to you. You can place it as you like using line-height and margin properties, and have the text wrap around the versal using the float; if you want the versal to sit aside from the text and avoid wrapping don’t set the float. For more variants see Jon Tan’s examples #9, #10, and #11 of his paragraph styles samples. Targeting the first letter and styling it was simple; browser consistency is the hair-pulling part. Internet Explorer in particular complicates things because it doesn’t understand the preceding selector (element + first-child). If your versals are vital to the page, see Bill Weaver’s article, Wrangling Drop Caps, which goes into closer detail on the subject including a JavaScript method. A note of cautioon: when printing a page in Internet Explorer featuring a versal specified using the pseudo-selector :first-letter IE bizarrely displaces other floated elements in proximity to the paragraph. See Nicholas Rougeux’s article Drop caps in the wild for an example. Finding versal letters with further decoration done other than through size and placement is a rarity on the web. Replacing the first letter entirely with a graphic isn’t impossible but you’re bound to run into many accessibility issues using image replacement on the fly (and getting the right letter — that means designing twenty four versals and some scripting). I do however like Piotr Fedorczyk’s simple static method: Piotr drew ornate background images and placed them behind the versal giving a them that extra love. The only issues here would be visibility of the background image depending on the glyph size—an “I” is smaller in width than a “R” or “Q”, and of course what happens when the user ups the font size. The CSS now would look something like this:

div#content h2.entry-title + p:first-letter {
    font-size: 4.2em;
    float: left;
    text-transform: uppercase;
    background-image: url(../images/versal-bg.png);
    background-repeat: no-repeat;
    background-position: center center;
    }

You can see them in action at Piotr’s site. Finding or coming up with some versals of your own (for example, using Piotr’s method) isn’t hard. A quick search for “blackletter” typefaces on FontSquirrel.com yielded a few viable faces: Rothenburg Decorative, Dearest, and Zenda. And of course you’re not limited to using blackletter faces—you could use whatever you fancied. If you’ve come across any good use of versals please share them below.

Frequently Asked Questions about Versals