Making Initial Letters Part II: Dropped Initials

Both raised initials and dropped initials can add gusto to a website, giving readers a monumental letter to kick start the reading experience. Having learned about raised initials and styling them for the Web in Part I of this series, readers should be ready to move on to the bigger challenges awaiting them with dropped initials, commonly known as drop caps.

HTML & CSS, Without JavaScript

Throughout this Initial Letters series, we’ve challenged ourselves to render raised initials and drop caps using purely HTML and CSS, without any JavaScript™ for media-queries across small to large screens or to dynamically adjust type size and leading. Although JavaScript could be helpful, not using JavaScript lets us deploy a lightweight solution with less resources, and a layout that won’t run into problems if the user has JavaScript disabled.

Like raised initials, drop caps are easiest to create and manage with separate CSS where you designate the font, size, line height (leading), and style. But with drop caps, you add a float property. We’ll use first-child and first-letter, just like in Part I of this series, to automatically generate drop caps without having to add span tags in the HTML.

body {font-family: Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 2em; line-height: 3.3em;}

p:first-child::first-letter { font-family: Didot; font-size: 10.2em; float: left; text-transform: uppercase; margin-top:0.13em; margin-right:0.05em; margin-left:-0.03em; }

em { color:#930;}

<p>here is a conventional drop cap sized large, and sitting beneath the first line of text. The top of the <em>H</em> aligns with the top of the first line of text, but the bottom of the <em>H</em> aligns with a lower baseline.</p>

The H acts as the drop cap because of the first-child::first-letter assignment and uppercase styling. Thanks to the Didot® typeface’s wispy serifs, it can stand tall in stature without its serifs weighing down the layout.

Creating drop caps, and aligning them within the rectangular confines of the surrounding text as shown above, is just one approach. It’s an approach that looks and is elegant, and calls to mind some of the more traditional methods used to render drop caps in print design. But this isn’t print design—it’s Web design—and while conventions are helpful, you can break them so long as readability and legibility are maintained for a positive user experience.

body {font-family: Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 2em; line-height: 4em; margin-bottom:3em;}

p:first-child::first-letter { font-family: Didot; font-size: 8em; float: left; text-transform: uppercase; margin-top:0.08em; margin-right:0.1em; margin-left:–0.03em; }

em { color:#930;}

<p>here is a drop cap created with a pair of pseudo-classes. Note how the next line of type flows underneath the letter <em>H</em>, effectively wrapping around the drop cap. The negative-left margin helps align the serif of the <em>H</em> with the paragraph. A little bit of math and testing helps us align the base of the <em>H</em> with the second line of our paragraph.</p>

<p>With a new paragraph created, we get a normal-sized <em>W</em> at the beginning of the sentence.</p>

This drop cap aligns to the baseline, but creeps above the first line of text. Even though the drop cap H doesn’t need to be capitalized in the HTML since the CSS makes it uppercase, notice how the second paragraph needs the W capitalized.

We’ve seen what it looks like when we break the first line of text’s cap line, now let’s see what happens if the drop cap breaks a baseline. Yes, aligning drop caps to a baseline is considered acceptable, even traditional practice in print design, but let’s mix things up and have some fun. This is the Web after all.

body {font-family: Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 2em; line-height: 4em; }

p:first-child::first-letter { font-family: Didot; font-size: 6em; float: left; text-transform: uppercase; color:#066; margin-left:–0.15em; margin-top:–0.1em}

em { color:#930;}

<p>over here is a drop cap with a negative left margin hanging the drop cap outward, optically aligning the <em>O</em>. You can even change the color, to make it lighter than your body text, so it recedes into the background. Ordinarily, you&rsquo;ll only need one drop cap, oftentimes placed at the very beginning of your text section. But, if you want to have a raised cap or drop cap in a pull quote, you&rsquo;d need a separate class.</p>

You can make the drop cap adhere to the baseline grid, or break the baseline grid. But always consider the user experience, and make sure the text is readable. Experiment with vertical alignment and line height, and also with color to make the drop cap look and feel large without dominating the layout.

Minding the Details

Every drop cap will need to be handled differently when it comes to sizing, leading (line height), and margins because every letter looks and is different—and every typeface is different. With a nearly limitless supply of Web Fonts available for your drop caps, this can complicate matters. You’ll have to push and pull spacing and sizing, making adjustments until it looks just right. And if you choose another typeface, you may have to start from scratch with those adjustments. But wait, there’s more: Even if it looks good in one browser, you just might run into some complications in another browser.

body {font-family: Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 2em; line-height: 3em; margin-bottom:3em;}

p:first-child::first-letter { font-family: Didot; font-size: 8em; float: left; text-transform: uppercase; margin-top:–0.12em; margin-right:0.1em; margin-left:–0.03em; }

em { color:#930;}

<p>and here is a drop cap <em>A</em> set among body text with less leading, known as line-height in CSS. The drop cap still aligns to the second line of text, but the first line could benefit from some kerning.</p>

At first glance, the statuesque Didot drop cap looks elegant, but as you read the first line of the paragraph—or more accurately, stumble over the first word—the more you’ll be bothered by the gap in the word And.

You can use negative margins to remove space between letters and close up any gaps. Note the difference between the prior example’s margin-right property and the one below, and the resulting layout.

body {font-family: Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 2em; line-height: 3em; margin-bottom:3em;}

p:first-child::first-letter { font-family: Didot; font-size: 6em; float: left; text-transform: uppercase; margin-top:–0.25em; margin-left:–0.01em; margin-right:–0.1em;}

em { color:#930;}

<p>and here is a drop cap <em>A</em> that sits ever so gently below the baseline, and it has better kerning between the <em>A</em> and the <em>nd</em> that follows. The sacrifice? We had to make the drop cap smaller and perform some calculations to get the kerning just right.</p>

With a negative margin-right property, the And closes up, and reads better, but we’ve had to float the drop cap between baselines.

Even though it looks good in the Firefox™ browser as seen in the prior example, Google’s Chrome™—shown here—will render a scrunched up And that looks terrible as a result of the negative margin-right property.

We could do a couple of things to account for the different rendering across browsers. We could switch to absolute sizing, using pixels instead of ems, to see if we can manage the spacing better, and in a more precise manner. Or we could look at another typeface to see what results we get. We’ve gotten this far with ems, so let’s take the path of least resistance, and consider a typeface that has less angularity since inter-letter spacing is the problem we want to solve. We’ll abandon the Didot family in favor of something blockier like the ITC Bauhaus® typeface.

body { font-family: Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 2em; line-height: 3em; margin-bottom:3em;}

p:first-child::first-letter { font-family: "Bauhaus W01 Heavy"; font-size: 9em; float: left; text-transform: uppercase; margin-top:–0.14em; margin-right:0.01em; margin-left:–0.05em; }

em { color:#930;}

<p>and here the drop cap is set in the ITC Bauhaus typeface, which has a more rectangular <em>A</em> that aligns with its surrounding text cleanly.</p>

If one typeface doesn’t work for your drop cap, try another. A strong and bold ITC Bauhaus drop cap gives things another flavor, and it lines up with its surroundings better here in the Firefox browser.

The exact same HTML and CSS renders a little bit differently here in Chrome. Yes, we get improved inter-letter spacing between the A and nd, but the line-height and margins are rendered differently.

Ongoing Work

The examples shown here and in Part I all rely purely on HTML and CSS, with no JavaScript. And although using JavaScript to adjust the fine details dynamically could prove helpful, in time we may see better handling of initial letters in Web typography. If and when new HTML and CSS standards are implemented, and become useable in Web browsers, they could allow for easier designation of both raised initials and drop caps without pseudo-classes and without JavaScript in the backend. But even then, there’s a good chance that a rigorous amount of testing would still have to happen, from one browser to the next.

In Part III of this Initial Letters series, we’ll dive into testing across browsers using HTML and CSS, sizing with pixels and troubleshooting browser quirks using line-height and padding. We’ll also dig deeper into Web Fonts and add flair to layouts with drop cap scripts and swashes, as well as the infamous super-sized initial letter. Experimenting with typefaces until you find the right one for your drop cap—while making it consistent across browsers—is part of the fun. And so is searching for the right font. Enjoy the process.