Drop cap is the first letter in a text block. Drop caps are usually used in the lead paragraph of a document, like this paragraph you’re reading right now. Drop caps are styled differently than the rest of the text to make them stand out. A drop cap is a powerful visual marker that typographers and visual designers use to draw people’s attention exactly where they want it.
There’s no one way to design drop caps. The most common approach to use drop caps is to use the same font/typeface as the rest of your body text, but making the font size on that first letter significantly bigger, sometimes bolder.
I used the following code to get the particular style in on the drop cap used in this article’s lead paragraph:
.dropcap {
float: left;
font-size: 6em;
line-height: 0.60;
margin: 0;
margin-left: -0.04em;
padding: .09em .04em 0em 0em;
}To use it in a paragraph, simply wrap the first letter of the first word in your paragraph in a <span element and give it a class attribute of dropcap, like this:
<p><span class="dropcap">D</span>rop cap is the first letter in a text block...
</p>Beware that how to style your drop cap with CSS for your particular document, depends completely on your chosen typeface anatomical structure, your font size, line height (leading), and other factors. There’s not one CSS rule-set that will cover all your needs, so you will have to nudge your way to a good result.
You can use the CSS above as a template/starting point and then play around with increasing/decreasing the font-size property of your drop cap to make it fit your paragraph just right. If you still can’t quite get your drop cap to align as you want it, try adjusting the line-height property value slightly up or down. Finally, you might need to play with the margin-top property, to slightly move your drop cap up or down.
Drop cap styles
The specific styling I chose for my drop cap is just one of many. There’s no rule that a drop cap has to align equally top-bottom with the rest of the paragraph’s text. Some designers will raise the drop cap a little bit above the first line’s ascender — others will raise it significantly. Some will do the opposite and tuck the drop cap deep into the text block, creating plenty of whitespace on the top and the left side of it.
Sometimes drop caps use a different text, and/or background color.
Drop cap with different text color
L orem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
Drop cap with different background-color
L orem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
The two examples above use the same CSS as the drop cap class I provided earlier, except that they use a different color/background-color. I also added a bit of padding-bottom and margin-right to the second example to nudge it in place.
-
The drop cap is just of many typographic emphasis tools, but it’s one of the most attention-grabbing ones — so use it in moderation.
