Skip to main
Creative usage of drop caps collage

What’s Old is New: Drop Caps in CSS

Using an emphasized initial letter is a technique that has been used for centuries. Let’s dive in to see some ways you can apply it to your project to help guide your reader with visual hierarchy.

We have some pretty great new(ish) properties we can use in CSS to make our designs more unique and help provide useful visual cues for your audience. One of these newer techniques can be used to create the drop caps that we know and love often found in print design. This technique has been used for centuries to bring emphasis to a new section of text, and we finally have a decent way to easily apply drop caps with CSS.

First you need an element or class to use as the target, and then we will append the ::first-letter pseudo element. The property is initial-letter and the value is the number of lines you would like your initial letter to expand.

.intro::first-letter {
initial-letter: 7;
-webkit-initial-letter: 7;

This code would give us a drop cap seven lines tall, like the large letter “I” in this example:

inital-letter demo

A few months ago we briefly introduced Feature Queries when we wrote about CSS Grid Layout. Feature Queries will play an important role in using initial-letter today. As a reminder, a Feature Query will ask the browser to check for support for a specific property and value:

@supports (property: value) {
property: value;

When we wrap our block in a Feature Query, we can add additional values that we would only want applied if initial-letter is supported.

@supports (initial-letter: 7) or (-webkit-initial-letter: 7) {
.intro::first-letter {
color: hsl(350, 50%, 50%);
initial-letter: 3;
-webkit-initial-letter: 3;

The specific number used in the @supports line for initial-letter does not matter unlike properties that require a keyword like (display: grid).

As of December 2016, only Safari supports initial-letter. Fortunately, you can still use this as an enhancement and fake it ‘til you make it to achieve a similar outcome. By using the operator not we can tell browsers that do not support initial-letter to use alternate styles.

$font-size: 1.15rem;
$cap-size: $font-size * 6.25;

@supports (not(initial-letter: 5)) and (not(-webkit-initial-letter: 5)) {
.intro::first-letter {
color: hsl(350, 50%, 50%);
font-size: $cap-size;
float: left;
line-height: .7;
margin: 17px 2px 0 0;

These “magic numbers” are not universal so if you change a value or font-family you will likely have to edit these values. We could probably spend some time to calculate the line-height and font-size more programmatically, but it will not take into account the x-height of the typeface you choose. Here is a screenshot of the resulting fallback and enhancement:

Fallback and enhancement in Chrome and Safari

Here is the CodePen demo:

See the Pen Initial Letter, with fallback and enhancement by Stacy (@stacy) on CodePen.

Another optional value we can use for our initial-letter property will instruct the browser where to place the initial cap. After our drop cap height value we will add a space and the number of lines we want our cap to drop. A value equal to the initial height value is the default.

.raised-cap::first-letter {
-webkit-initial-letter: 3 1;
initial-letter: 3 1;

.sunken-cap::first-letter {
-webkit-initial-letter: 3 2;
initial-letter: 3 2;

Screenshot of raised, sunken, and drop cap demo

The following CodePen demo is available in Safari only:

See the Pen Initial Letter, showing multiple positions by Stacy (@stacy) on CodePen.

We’d love to see how you use initial-letter in your design. Send us a message via Twitter.

Recent Articles

  1. see all Article posts
  2. Nested semicircles,
from innermost and slowest
to outermost and fastest-moving:
nature, culture,
governance, infrastructure,
commerce, fashion
    Article post type

    When Our Tools Hold Us Back

    What happens if the ‘pace layers’ get out of sync?

    Ask not just: How well does it work? But also: How well does it fail? What happens when something goes wrong? —Jeremy Keith

    see all Article posts
  3. Wireframe of card elements
in different sized containers --
some laid out vertically in small spaces,
others horizontal when there's room.
    Article post type

    Use the Right Container Query Syntax

    Size queries are stable, and shipping in browsers

    Since we got a first look at a Container Queries prototype back in April 2021, the syntax has changed a few times. But now the spec is stable, browsers are getting ready to ship, and it’s time to make sure you’re using the same syntax they are!

    see all Article posts