css-drop-caps
CSS

How to Create CSS Drop Caps Effect

Drop caps effect is an effect traditional found in printed media. The first letter of the paragraph with enlarged size, occupying next couple lines. In this tutorial, I’m going to show you how to drop the first letter of the paragraph or “drop caps effect” with CSS. Ready? Let’s check it out!

css-drop-caps-1

The Traditional Approach

So here is our example page with couple of text paragraphs. The first thing we’re going to do is to increase the font size and change the color of the first letter. We can do that easily by using first letter selector. I’m going to also add padding right for an extra space between the letter and the paragraph

p::first-letter {
  color:red;
  font-size: 80px;
  padding-right: 8px;
}

css-drop-caps-2

Now you’ll see that the style has been applied to all paragraphs instead of just the first one. We can fix this by adding first-child selector. And here is key part, to drop the first letter, just add float left. Easy as that!

p:first-child:first-letter {
  color:red;
  font-size: 80px;
  padding-right: 8px;
  float:left;
}

css-drop-caps-3

Looks good. Now the problem is while it works fine with Firefox and Edge, Chrome seems to add extra margin when we add float.

css-drop-caps-4

We can fix this by reducing the line-height to offset that. I’ll also change the font to Georgia as well.

p:first-child:first-letter {
  color:red;
  font-size: 80px;
  padding-right: 8px;
  float:left;
  line-height: 0.7;
  font-family: georgia;
}

The Future Approach

Now before we end this tutorial, there is an actual initial-letter property that let you drop caps without using float and manually adjusting line-height. Unfortunately, it works only with Safari. So we have to stick with the float solution for now. Probably a couple years.

css-drop-caps-5

css-drop-caps-6

So that’s all for this tutorial. As always, don’t forget to Like our Facebook page and subscribe to our Youtube Channel to stay updated. Any comments or questions, let me know. Thanks for visiting our site 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *