KLEPAS.ORG

Because it’s type-​related I couldn’t resist waiting another day before pub­lish­ing this…

…Yesterday I was going through an old un-​named sketch book. Right at the back were these beau­ti­ful hand-​drawn versal letters and an entire page of weaving orna­ments:

Versals, drop cap­i­tals or raised cap­i­tals are large and often ornately dec­o­rated capital letters marking the opening of a running body of text or a verse.

Modern typog­ra­phy has dis­carded much of these clas­si­cal dec­o­ra­tions in favour of a more clin­i­cal page; these par­tic­u­lar orna­ments above aren’t as mul­ti­cul­tural and cer­tainly not as neutral as modern typog­ra­phy which aims to better cater for a larger and more mul­ti­cul­tural audi­ence.

I would like to see a revival of this form of dec­o­ra­tion; I think a lot can be done with typog­ra­phy that cur­rently scores of artists—particularly web designers—are trying to achieve with stock pho­tog­ra­phy and ever popular vibrant, reflec­tive and glossy ele­ments.

Setting versals in CSS isn’t par­tic­u­larly hard. A common method is to use the pseudo-​selector :first-letter to refer to the first letter of an element. You can combine this with other selec­tors to refer to the first letter of the first para­graph of a page, heading, or what­ever else strikes your fancy (uti­liz­ing the DOM struc­ture prop­erly is helpful in making this work prop­erly). Note Inter­net Explorer doesn’t recog­nise many of the CSS 2.1 selec­tors (IE does however under­stand :first-letter).

Another common method is to just man­u­ally wrap the first letter in span tags with a spe­cific class of desired styling. What­ever you choose, the styling might look some­thing like this:

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


You may also want to set margins and line-height to better place the versal amongst the rest of the para­graph. The float: left; is optional—it wraps the para­graph around the versal—if you want the versal to stand on the base­line of the opening line of the para­graph then don’t set the float.

Tar­get­ing the first letter and styling it was simple; browser con­sis­tency is the hair-​pulling part. Inter­net Explorer in par­tic­u­lar com­pli­cates things because it doesn’t under­stand the pre­ced­ing selec­tor (element + first-child). If your versals are vital to the page, see Bill Weaver’s article, Wran­gling Drop Caps, which goes into closer detail on the subject includ­ing a JavaScript method.

When print­ing a page in Inter­net Explorer fea­tur­ing a versal spec­i­fied using the pseudo-​selector :first-letter IE bizarrely dis­places other floated ele­ments in prox­im­ity to the para­graph. See Nicholas Rougeux’s article Drop caps in the wild for an example.

Finding versal letters with further dec­o­ra­tion done other than through size and place­ment is a rarity on the web. Replac­ing the first letter entirely with a graphic isn’t impos­si­ble but you’re bound to run into many acces­si­bil­ity issues using image replace­ment on the fly (and getting the right letter—that means design­ing twenty four versals and some script­ing). I did however see a simple method last week of adding a bit more to versals by a bright Polish designer:

Piotr Fedor­czyk drew ornate back­ground images and placed them behind the versal giving a them that extra love. The only issues here would be vis­i­bil­ity of the back­ground image depend­ing on the letter size—an “I” is smaller in width than a “R” or “Q”, and of course text resiz­ing. The CSS now would look some­thing like this:

div#content h2.entry-title + p:first-letter {
font-size: 4.2em;
float: left;
display: in-line;
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.