// Drop Caps 101
// May 7th, 2008 & filed under Typography
CSS is powerful when placed in the right hands. Isn’t it?
Nevertheless, it has a long way to go before web designers and developers have the freedom of expression that print designers have.
One of the greatest limitations surrounds typography.
Although progress is being made, we’re still nowhere near achieving the freedom the print designer has.
Having said that, there are certain typographic effects, which are available to web designers (without the use of scripts and hacks), that most aren’t making use of.
One of them is ‘Drop Caps‘.
The History
The trend of beginning a chapter or paragraph with a larger letter, dates back to around the 8th century (or so I’m told).
From that time, using ‘an initial’ advanced in popularity quite quickly, with scribes (those who would copy documents by hand before the era of the printing machine) often creating extremely elaborate designs within and around it.
One of the earliest known examples of using an initial, had a picture drawn within the letter (known as Historiated Initial).
Doing an image search for ‘historiated initial’ in Google, gives some wonderful examples of just how elaborate scribes became.
Initial usage today
Although the usage of initials hasn’t died out, they’re generally a lot less elaborate. You’ll find examples in most newspapers, and in many magazines and bibles.
Generally, where text is a major element, printers use a large initial/drop capital to draw attention to the commencement of an article or chapter.
Initial usage on the web
With the web being a resource for information, and most of that information coming in a textual form, doesn’t it make sense that there would be popular use of an initial?
But, it’s not the case.
In fact, as you the browse through the web, you will find only a very small percentage of websites use a larger first letter to garner attention, and for added typographic style.
There are a few though. Some of my favourites include:
I’m surprised more designers aren’t using drop caps in their designs; particularly in blogs.
Studies have shown that articles which begin with drop caps, are more likely to be read.
Don’t you want your articles to be read? I do. Therefore, I will be considering the idea of using a drop capitals in future designs.
CSS Drop Cap Tutorials
- Easy Drop Caps - Pixel Spread
- Nice Drop Caps with CSS - Onyx Design
- Book-Style Chapter Introductions Using CSS - CSS Newbie
- Wrangling Drop Caps - bweaver.net
Have you come across other examples or tutorials? Let me know, because I’m always interested in solid resources and examples.
Did you enjoy this article? Please share it -
You may also like to read the following:
15 comments...What do you think?
Trackbacks...
- Drop Caps | milo
- DROP CAPS 101 (with examples) | White Sands Digital
- Enlaces para leer y ver 78 « el50
cool article. floated and digged it
Cheers Matthias, that’s very much appreciated. Glad you liked it!
Nice article!
And thanks for linking back to my blog
Drop caps are a nice embellishment, but getting it just right on all browsers can be an annoying exercise. They do look nice, though. I wrote about drop caps in CSS and jQuery a couple months ago.
Fabian - Hey man, no problem.
Bill - Agreed, my friend. Nice article too; I added it to the list.
Also, I loved your overview of YouVersion. Insightful.
Drop cap looks nice and eye-catching when look overall
but sometimes I found it a bit hard to quick read, like, my eyes always skip the first letter. as if it is just an image for decorating the post.
I think it depends on what the overall style of the website is…
If its a more classical look, drop caps could be a good option however on a grunge, funky style I think it would lack.
Another one to add to the arsenal. Thanks Armen.
se7en - As long as you go on to read the article, the drop cap has done its primary job
Jermayn - Maybe. There might be a few styles which would work better without it, but with the right type, and a little care, I think it could work on most. In fact, you could use a really elaborate drop cap initial on a grunge style site, and it could be a very effective element of the design.
Karl - You’re welcome, as always.
Nice write up Armen. It’s been on my ‘to-do’ list for weeks to play around with drop caps on my new site, but I just haven’t got round to it yet. You article may well prompt me in to doing it this weekend
Drop Caps are great! I’m using it at my blog. Thanks for the bweaver link, the tutorial is great.
Aaron,
I’m the same my friend. I haven’t done it either, which is why I wrote the article; I’ve been thinking about it.
Sander,
Yeah, your site is a good example of it done well too buddy. If it was in English, I’d have used it as an example.