Drop Caps

Every designer is familiar with snazzy, over-sized characters that spruce up the beginning of a block of text. Also called initials, drop caps originated in the eighth century insular art of the British Isles. They seem to have been entirely decorative to begin with, and stuck around through the Renaissance and into modern use because…well, they look pretty.

As it turns out, though, they’re more than just easy on the eye. They also increase readership, by preying on a basic human need: the need for completeness. Simply put, people can’t stand leaving something halfway through. They have to finish it. When you’re reading a book before bed and you think, “I’ll put it down at the end of the page,” you never actually do—because the page always finishes halfway through a sentence. You have to turn over to finish it, don’t you?

Drop caps work the same way. Because they stand out, and because they’re smack-bang in your natural eye-path on a page, they’re almost impossible not to read. You require only the barest glance to take in a single letter. But once you’ve taken it in, your need for completeness demands that you at least read the rest of the word. And once you’ve read the word, that same need keeps you going to the end of the sentence. With a good opening line, this can be all it takes for you to then want to read the paragraph. And so on.

Some Best Practices For Drop Caps

Keep Them Reasonably Small

You can, of course, make a drop cap as enormous as you like. But this is counterproductive. Once they’re over three lines high, initials start to “detach” from the rest of the text and stand alone, which defeats their purpose. Plus, first paragraphs can be pretty short. So if you’re dynamically applying a very large drop cap to the start of each page using CSS, it could take up more vertical space than the paragraph it’s attached to. Which just looks silly.

Let me also note here that you want to make sure your measure (line width) isn’t too great, as otherwise you’ll still run into problems with this. More than 80 characters per line reduces legibility, so if you’re going to the trouble of putting in drop caps, you’ll probably want to keep your measure nice and lean as well to make it worthwhile. I use maxwidth:75ex; for all my content wrappers.

Use A Strong Colour

It’s also wise to set drop caps in an eye-catching colour, rather than in dark grey or black like the rest of your text (again, I’m assuming that you’re using the most legible design possible; reversed text reduces readership.) Orange or red are naturally best, being the most provocative colours, but any colour your design allows will probably work better than plain grey or black.

Hero Shots

A hero shot is a portrait photograph of the author, set beside the opening paragraph. It can stand out from the paragraph on the left or right, or float inline like a drop cap.

Why does it work? Two reasons:

  1. Faces attract our attention like crazy. Of all the shapes and patterns in the world, they’re the ones we’re the most hardwired to recognize and fixate on. Why’d you think the Virgin Mary appears to so many people in their cereal?
  2. We trust people a lot more when we feel like we know them. If we can see what the author of a piece looks like, we start to form a stronger relationship with him. This is good not only for readership, but also for conversions. The connection we feel with the author increases our trust of him, which increases the perceived value of what he’s saying—and perceived value is what makes prospects click on calls to action.

Some Best Practices For Hero Shots

Remember Your Captions

Always, always use a caption. Captions get read 200% more than body copy—so you want to make the most of them. As well as giving the author’s full name and credentials, it’s wise to include a major selling point: summarize a key benefit, guarantee, premium or the like.

Match The Copy Voice

Naturally, it only makes sense to use a hero shot when the copy is written as if from a single person. For freelancers, hero shots are therefore excellent—most of the top copywriters use them. (I flagrantly violate this rule on my own site, because of my mysterious persona as Information Highwayman.) For larger corporations, though, they often aren’t appropriate on every page.

Don’t Overwhelm Your Reader

Remember that hero shots pull really hard. This means they will compete with other elements on the page—including drop caps. If you have to make a choice between using one or the other, a hero shot is probably the better option (split test to make sure, course, as your mileage may vary). If you’re only using the hero shot, position it on the left—to support, rather than break, the reader’s natural eyepath.

Use Only A High Quality Image

It’s better to use no image at all than to use a lousy one. If you don’t have a good picture, don’t use a hero shot at all. Remember, the purpose is to encourage in the reader a sense of a relationship with the author—to bolster trust. A snaggle-toothed photo resized from 640×480 down to a 50×38 thumbnail and then scaled back up to a 120×90 hero shot—then saved as a JPEG at 40% quality…not so good. Neither—generally speaking—is a photo of the author looking unshaven, dishevelled, drunk, stoned, or otherwise dubious. Remember that the style of the photo can either contribute to, or detract from, the perceived credibility of the person it depicts.

This also means you should avoid using a picture that will clash with your design. In the example below, you’ll see I use a stylised hero shot to match my drop cap.

Examples With Code

I’ll give you some pointers below for coding up both a drop cap and a hero shot. Feel free to chip in afterward and critique my methods. They are what I’ve found to work best, but there’s always more than one way to skin a cat.

Creating A Drop Cap

Time was that drop caps had to be hacked together with table cells. Thankfully, creating them is a lot easier and more elegant these days. Depending on how you want your drop cap to be applied, you’ll need to decide on whether to use a class, CSS selectors, or both.

If you’re happy to have a drop cap applied to the first letter of every page, you can just use selectors. For example, let’s say the first paragraph always follows a first-level header in your markup. In that case, you can use the CSS adjacent-sibling selector in combination with the first-letter pseudo-class:

It’s nice and easy, and it works in any browser worth mentioning (and some that aren’t). But the chances are your markup isn’t always that basic. For example, what if on some pages you’re using both a first- and a second-level header? Again, this is easily solved with the adjacent-sibling selector:

Or, if you’re using HTML5 and putting your headings into groups:

Personally, I want more granular control than this. As well as having a drop cap at the start of every page, I sometimes want to place one manually (after a section break, perhaps). In cases like that, I use a class.

Now, I’ve seen a lot of people using span elements to create drop caps—just wrap the letter in a with the right class attached, and off you go. I’ve always regarded this as rather inelegant—but if you have some kind of limitation with your CMS that makes my solution problematic, go for it. I prefer to just attach a class to a paragraph. Here’s the CSS:

I don’t use p.drop-cap:first-letter{} because I like to keep my options open. Someday I might want to put a drop cap on a blockquote, for instance. Anyway, the accompanying HTML is simple:

Okay, so much for triggering the drop cap. But what about actually styling it? There are two lil caveats here.

Choose A Suitable Font

You gotta remember that different fonts have different styles of capitals. Generally, a capital letter should be about 1 em high. But some typefaces have…idiosyncrasies. Sometimes you’ll find an “A” takes up way more vertical space than an “H”, for example. Or a “J” will push down below the baseline. All sorts of little quirks like this can make consistently achieving a good-looking drop cap extremely difficult. I suggest you do the opposite of what I did when I created my website, and find a font with even, consistent capitals to use for your drop caps. In the examples below, I’m going to use League Gothic for the drop cap, and Aller Light for the display face.

Line-height

Gecko-based browsers don’t seem to care about line-height, but WebKit ones do. If you get your line-height wrong, you won’t notice in Firefox, but the drop cap will be set at the wrong vertical position in Chrome and Safari.

So how do you know what line-height (and font-size) to use? You can get a good starting range by taking the number of paragraph lines you want the drop-cap to cover, and multiplying it by your paragraph line-height. In the example below I’m using a line-height of 24px, and the drop cap is covering three lines—so I start with a font-size of 24×3=72px, set the line-height to the same, and see how it looks.

Note that I don’t actually want to take up a full 72px of vertical space, because the drop cap should sit more or less flush with the meanline of the paragraph font—not with the top of the line. But most fonts use way less vertical space for one em than the font-size allows; so at 72px, we might only get 65px in glyph height.

Now for the actual CSS. I’m gonna give this to you in single-line format as I build it up, and then give you the final code in a format that’s easier to read at the end. The code for the paragraph is pretty basic:

And we’re going to make the drop cap a block-level element, then float it on the left of the paragraph:

Which comes out like this:

Once upon a time, there was a little drop cap called “O”. He was a generally decent guy without airs, but in his vainer moments he liked to think of himself as being like a tugboat—pulling his readers fearlessly into a vast sea of otherwise undifferentiated text. (His designer had forgotten to typeset his content with other scannable elements like paragraphs, lists, and subheads. A very sad story.)

Not too bad, but the glyph takes up less vertical space than it should. At a font-size of 72px, League Gothic’s “O” is only 55 pixels high. And it needs a little breathing space, too; it’s kinda crammed up against the copy at the moment.

You may have noticed that Firefox vexingly positions the glyph above the paragraph’s meanline, while Chrome or Safari correctly position it flush. This is because they have different ideas about where the top of the paragraph is. We’re going to have to add a top margin so Firefox will position the glyph correctly; which means reducing the line-height accordingly for Chrome. With a bit of experimentation, I found the following to work in this instance—but you’ll have to tweak your own code depending on the fonts, font-sizes, and line-heights you’re using:

Here’s how it looks:

Once upon a time, there was a little drop cap called “O”. He was a generally decent guy without airs, but in his vainer moments he liked to think of himself as being like a tugboat—pulling his readers fearlessly into a vast sea of otherwise undifferentiated text. (His designer had forgotten to typeset his content with other scannable elements like paragraphs, lists, and subheads. A very sad story.)

I really recommend testing different letters as well. “M” and “A” often reveal slight vertical positioning issues, because their cap-height is usually greater than other letters to compensate for the optical illusion of shortness created by their peaks. Also check to see how “J” looks, since it sometimes has a descender, even in capitalized form. Lastly, if your font has old style figures, just throw it out and find one with lining numbers. That’s what they’re for!

Okay, let’s add a hero shot!

Creating A Hero Shot

I said before that hero shots and drop caps can vie for attention. In this case, I’m going to try using that to my advantage. I’ll use a stylized hero shot that complements the drop cap, and set it tightly into the first paragraph. Because we’re hardwired to pick out and scrutinize faces above pretty much anything else, readers’ eyes will be drawn to the hero shot first. When they read the caption, they’ll find out why they should read the copy…and then the drop cap goes to work, guiding their eyes to the right place.

Wrapping A Hero Shot

It might be tempting to create a hero shot by just throwing in an at the beginning of the paragraph. This is a bad idea for three reasons:

  1. All hero shots absolutely should have captions—and captioning an inline image is tricky.
  2. It will break anything relying on the first-letter pseudo-element, because this element doesn’t trigger if there’s something sitting before the first letter of the paragraph. Which means no drop caps.
  3. The hero shot doesn’t relate to the first paragraph only, but to the page as a whole. So from a hierarchical point of view, the markup should reflect this by placing it above the first paragraph; not inside it.

For these reasons, I’m going to be using the HTML5