// Tutorial //

Drop Caps in CSS Using first-letter & initial-letter

Published on September 3, 2020
Default avatar
By Alligator.io
Developer and author at DigitalOcean.
Drop Caps in CSS Using first-letter & initial-letter

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Drop caps have been used for a long time with print media to give panache to the first letter of the first paragraph of a section or chapter. These drop caps help draw attention and entice the reader, and it’s often a good occasion to use a very stylized font because it’s applied on only one letter so it won’t affect the text’s readability. The same drop cap effect can be accomplished with CSS using the ::first-letter pseudo element and the new initial-letter property.

::first-letter Pseudo Element Selector

::first-letter is a pseudo element selector similar to ::before and ::after that effectively makes the first letter of an element stylable as if it was its own distinct element, all without having to add any additional markup to your pages.

Here’s a simple example where we style the 1st letter of the 1st paragraph or article elements:

article p:first-child::first-letter {
  color: hotpink;
  padding: 0 .3rem;
  margin: 0 .3rem 0 0;
  border: 2px solid;
  border-radius: 8px;
  font-family: "IBM Plex Mono", monospace;
}

And with this, we get something that looks like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ante turpis, rhoncus vel nisi eu, congue iaculis neque. Nunc bibendum dui felis, et auctor mi maximus in. Vestibulum porta orci et ex mattis, sit amet feugiat justo fermentum. Duis blandit tempor purus at elementum. In id consequat lorem.


There’s trouble in paradise though. Look at what happens if we for a larger font size; one of the main features of a typical drop cap:

article p:first-child::first-letter {
  color: hotpink;
  padding: 0 .3rem;
  margin: 0 .3rem 0 0;
  border: 2px solid;
  border-radius: 8px;
  font-family: "IBM Plex Mono";

  font-size: 4rem;
  line-height: 1;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ante turpis, rhoncus vel nisi eu, congue iaculis neque. Nunc bibendum dui felis, et auctor mi maximus in. Vestibulum porta orci et ex mattis, sit amet feugiat justo fermentum. Duis blandit tempor purus at elementum. In id consequat lorem.

On top of using a larger font size, we also set a low value for line-height in order for the line height of the first line not to be influenced by this first letter’s initial line height given the larger font. The problem is that the drop cap doesn’t exactly drop. One solution is to use good old floats:

article p:first-child::first-letter {
  color: hotpink;
  padding: 0 .3rem;
  margin: 0 .3rem 0 0;
  border: 2px solid;
  border-radius: 8px;
  font-family: "IBM Plex Mono", monospace;

  font-size: 4rem;
  float: left;
  line-height: 1;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ante turpis, rhoncus vel nisi eu, congue iaculis neque. Nunc bibendum dui felis, et auctor mi maximus in. Vestibulum porta orci et ex mattis, sit amet feugiat justo fermentum. Duis blandit tempor purus at elementum. In id consequat lorem.

Browser support for ::first-letter is pretty much universal.

initial-letter Property

An alternative to using floats along with line-height and font-size to properly style drop caps is to use the new initial-letter property, which expects a number value that represents the number of lines that the drop cap should extend to. The browser then calculates the proper font size automatically:

article p:first-child::first-letter {
  color: hotpink;
  padding-right: 8px;

  -webkit-initial-letter: 3;
  initial-letter: 3;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ante turpis, rhoncus vel nisi eu, congue iaculis neque. Nunc bibendum dui felis, et auctor mi maximus in. Vestibulum porta orci et ex mattis, sit amet feugiat justo fermentum. Duis blandit tempor purus at elementum. In id consequat lorem.

At the time of this writing, this last demo will only work as expected in Safari. Unlike with ::first-letter, the support for initial-letter is almost non-existent at the moment unfortunately. So for now we’ll have to keep using floats for a good little while. If you still want to use initial-letter, you’ll probably want to use it with a @supports at-rule so that the drop cap doesn’t look all kinds of odd in non-supporting browsers.

If you’ve enjoyed this tutorial and our broader community, consider checking out our DigitalOcean products which can also help you achieve your development goals.

Learn more here


About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!