Skip to main
Article
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.

Webmentions

Nick Simson

from nicksimson.com

Drop caps, or “dropped capitals” are a design element that can add a little oomph to your page (or screen). The idea is this: a large capital letter, the first letter of the first word of your paragraph, stands out as a decorative element. This captures your reader’s attention,…

Recent Articles

  1. Stacks of a variety of cardboard and food boxes, some leaning precariously.
    Article post type

    Setting up Sass pkg: URLs

    A quick guide to using the new Node.js package importer

    Enabling pkg: URLs is quick and straightforward, and simplifies using packages from the node_modules folder.

    see all Article posts
  2. Article post type

    Testing FastAPI Applications

    We explore the useful testing capabilities provided by FastAPI and pytest, and how to leverage them to produce a complete and reliable test suite for your application.

    see all Article posts
  3. A dark vintage accessory store lit by lamps and bare bulbs, with bags, jewelry, sunglasses and a bowler hat on the wooden shelves and carved table.
    Article post type

    Proxy is what’s in store

    You may not need anything more

    When adding interactivity to a web app, it can be tempting to reach for a framework to manage state. But sometimes, all you need is a Proxy.

    see all Article posts