Tutorial

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

Published on September 3, 2020
author

Alligator.io

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
Alligator.io

author

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.

Still looking for an answer?

Ask a questionSearch for more help

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!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more