CSS Initial Caps

Learn how to use CSS to create ​fancy initial caps for your paragraphs. There is even a simple image replacement technique to use a graphical image for your initial cap.

Basic Styles of Initial Caps

There are three basic styles of initial caps in documents:

• Raised - the most common, where the first letter is larger and on the same line as the current text.
• Dropped - also fairly common, where the first letter is larger and dropped down below the first line of text. The following text then floats around it.
• Adjacent - where the first letter is in one column beside the rest of the text. This is more common in print than web design.

Initial caps or drop caps are very familiar. They are a great way to dress up otherwise long and boring spans of text. And with the CSS property: first-letter, you can easily define how to make your first letters fancier.

Create a Simple Initial Cap

All you need to do to create a simple raised initial cap is to make the first letter of your paragraph larger in size with the first-letter pseudo-element:

p:first-letter { font-size: 3em; }

But many browsers see that the first letter is larger than the rest of the text on the line, so they make the leading equal to what would make sense for that first letter, not the rest of the line. Luckily, this is easy to fix with the first-line pseudo-element and the line-height property:

p:first-letter { font-size: 3em; }p:first-line { line-height: 1em; }

Play with the line height within your document until you find the right size for your text.

Play With Your Initial Cap

Once you understand how to create an initial cap, you can dress it up in fancy clothes to make it stand out. Play with colors, background colors, borders, or whatever strikes your fancy. A fairly simple style is to reverse the colors of your font and background color just for the first letter:

p:first-letter {
font-size : 300%;
background-color: #000;
color: #fff;
}
p:first-line { line-height: 100%; }

Another trick is to center the first line. This can be tricky with CSS, as the middle of the text line can be different if your layout is flexible. But with some playing around with the values, you can indent your first line enough to make the first letter appear to be in the middle. Just play with the percentage on the text-indent of the paragraph until it looks right:

p:first-letter {
font-size : 300%;
background-color: #000;
color: #fff;
}
p:first-line { line-height: 100%; }
p { text-indent: 45%; }

Adjacent Initial Caps Are Hard With CSS

Adjacent initial caps can be difficult with CSS because the different browsers display the fonts differently. The idea behind creating an adjacent cap in CSS is to use the text-indent property on the first line to push it out (to the left) a negative value. You'll also need to change the left margin of that paragraph by some amount. Play with these numbers until the paragraph looks good.

p {
text-indent: -2.5em;
margin-left: 3em;
}
p:first-letter { font-size: 3em; }
p:first-line { line-height: 100%; }

Getting Really Fancy Initial Caps

The best way to create a fancy initial cap is to change the font to a more decorative font family. If you use a series of fonts followed by a generic font, it will help guarantee that your initial cap shows well so your customers can see it, without getting into accessibility and usability issues.

p:first-letter {
font-size: 3em;
font-family: "Edwardian Script ITC", "Brush Script MT", cursive;
}
p:first-line { line-height: 100%; }

And, as usual, you can put all these suggestions together to create an initial cap that ads style to your paragraph.

Using a Graphical Initial Cap

If, after all that, you still don't like how your initial caps look on the page, you can resort to graphics to get the exact effect you're looking for. But before you decide to move straight to graphics, you should be aware of the drawbacks of this method:

• Customers without images won't see the initial cap, and may not see the hidden text that the image is replacing. This can make the paragraph inaccessible, or at best difficult to read.
• Images always add to the download time of a page. If you have a lot of initial caps, you can significantly increase the download time for something many people would feel is insignificant.
• Some browsers will display both the hidden first letter and the image which can make the paragraph text look odd.
• It's very hard to automate this option, as you have to know exactly what the first letter is so that you use the correct graphic. So, every time the paragraph is edited, you may need to create a new graphic.

First, you need to create the graphic of the first letter. We used Photoshop to create the letter L with the font "Edwardian Script ITC." We made it huge — 300pt in size. We then cropped the image down to the bare minimum around the letter and noted the image width and height.

Then we created a class "capL" for our paragraph. This is where we define what image to use, the leading (line-height), and so on.

You need to use the image width and height to set the paragraph's text-indent and padding-top. For our L image, we needed 95px indent and 72px padding.

p.capL {
line-height: 1em;
background-image: url(capL.gif);
background-repeat: no-repeat;
text-indent: 95px;
padding-top: 72px;
}

But that's not all. If you leave it there, then the first letter will be duplicated in the paragraph, first with the graphic, then in the text. So we added a span around that first element with the class "initial" and told the browser to not display that letter:

span.initial { display: none; }

The graphic then displays correctly. You can play with the text-indent on the paragraph to get the text snuggled right up to the letter, however you'd like it to display.