Because it’s type-related I couldn’t resist waiting another day before publishing this…
…Yesterday I was going through an old un-named sketch book. Right at the back were these beautiful hand-drawn versal letters and an entire page of weaving ornaments:
Versals, drop capitals or raised capitals are large and often ornately decorated capital letters marking the opening of a running body of text or a verse.
Modern typography has discarded much of these classical decorations in favour of a more clinical page; these particular ornaments above aren’t as multicultural and certainly not as neutral as modern typography which aims to better cater for a larger and more multicultural audience.
I would like to see a revival of this form of decoration; I think a lot can be done with typography that currently scores of artists—particularly web designers—are trying to achieve with stock photography and ever popular vibrant, reflective and glossy elements.
Setting versals in CSS isn’t particularly 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 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 doesn’t recognise many of the CSS 2.1 selectors (IE does however understand :first-letter).
Another common method is to just manually wrap the first letter in span tags with a specific class of desired styling. Whatever you choose, the styling might look something 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 paragraph. The float: left; is optional—it wraps the paragraph around the versal—if you want the versal to stand on the baseline of the opening line of the paragraph then don’t set the float.
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.
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 did however see a simple method last week of adding a bit more to versals by a bright Polish designer:
Piotr Fedorczyk 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 letter size—an “I” is smaller in width than a “R” or “Q”, and of course text resizing. The CSS now would look something 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.
10 comments
Sometimes I wonder why we keep bothering with HTML. PDFs can contain hyperlinks too and they look the same everywhere. Use any versal font you like, no need for CSS and JavaScript tricks to get a half as nice result.
Really. Why HTML?
Call me out if I speak the bollocks here, but aren’t PDFs more difficult to index, and of a larger file size?
More difficult to index: possibly, but Google doesn’t seem to have any trouble with them.
File size: PDF should be smaller for big documents and complex layouts. Don’t forget to add the sizes of separate images when comparing to HTML. Also, does it still matter?
Bonus point for PDF: nice ligatures, especially when you use TeX. With XeTeX one gets to use nice fonts, too, but I still have to try that.
It’s definitely true that PDF offers higher degrees of typographical control but I doubt a change from HTML to PDF would be viable today; there has just been too much invested into the HTML infrastructure and support. The new media creative types wouldn’t be particularly fond of such a more either as they loose all the Flash wankery (and think of all the glossy web apps!).
@Taco Buitenhuis: And why not just use paper? PDF is not a viable alternative to HTML. HTML is the language of the Web, and as such it does an exceptional job. PDF documents require a plugin. And then what about menus and JavaScript and animated content? (an entire web site, a blog, perhaps, as a a collection of PDFs?) HTML plus CSS plus JavaScript, plus scripting languages (e.g. PHP), plus the ability to deliver content from numerous kinds of databases, plus greater accessibility, plus reduced file sizes….
The above article is an excellent one because it demonstrates that good typography on the Web is possible/accessible.
For the purposes of information interchange, XML formats beat binary file formats, such as PDF. This is what the web was created for.
You’d be writing some very complicated binary parsers to even begin to emulate the flow of XML (or even something like JSON), for example Google-maps style mashups would be basically impossible.
The lines are becoming slightly blurred with XML tagged PDF documents, but then you’re still needing to fall back on XML.
Also sometimes I like to View → Page Style → No Style. The control has to be with the user.
Those are some beautiful glyphs… though I’m trying to think how they would create the molds for them.
Hi! Thanks for mentioning my site here. You have a bit outdated screenshot of my folio’s dropcaps
Plus: I’m not Italian, I’m Polish.
Kind regards, Piotr
@Piotr: Sorry mate—fixed!
Cool! I’ve seen CSS used to create a large cap first letter of an article/paragraph. Never even thought about adding a background image to create an older style look.
And thanks for the heads up about the IE bugs.