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

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.

  Tweet It

🕵 Search Results

🔎 Searching...