Advertisement
  1. Web Design
  2. UX/UI
  3. Web Typography

Better CSS Drop Caps With “initial-letter”

Scroll to top

Learn CSS: The Complete Guide

We've built a complete guide to help you learn CSS, whether you're just getting started with the basics or you want to explore more advanced CSS.

Drop Caps

Drop caps are a form of decoration sometimes used at the beginning of a block of text; the initial letter running several lines deep and indenting the body text within these lines. 

Example of a drop cap by The WalrusExample of a drop cap by The WalrusExample of a drop cap by The Walrus
Drop cap example, as found on The Walrus
Drop cap example as found on NautilusDrop cap example as found on NautilusDrop cap example as found on Nautilus
Drop cap example, as found on Nautilus

It’s a typographic tradition as old as the history of typesetting itself, and these days we can emulate it with CSS using the ::first-letter pseudo element. Styling that first letter, however, is notoriously clumsy, but the proposed initial-letter property aims to fix that. Let’s examine what it is, what we can do with it, and what we can expect in the future.

The Current Approach

Let’s begin with a demo; a paragraph of text.

Now we target the first character in that paragraph using the ::first-letter pseudo element. The current styling approach would be to float that character with p::first-letter { float: left; }, pulling it out of the flow within the paragraph, and then to size it accordingly:

This isn’t bad, and can be further tweaked with line-height, positioning and so on. It’s also very well supported. But it’s certainly not perfect; to properly enjoy what drop caps can give us we need more precise control, and flexibility.

A New Solution

The initial-letter property, currently being discussed as an Editor’s Draft by the W3C (about as early on in the standardising process as it’s possible to be), aims to give us the precise typographic control we want. It’s used in combination with first-letter.

The first value it takes determines the size of the initial letter, in terms of how many lines it occupies.

1
p::first-letter {
2
  initial-letter: 3;
3
}

Here’s what that looks like:

Caveats

Sorry, stop right there. Support for this is still very poor. At the time of writing, the demo above will only display correctly if you’re using Safari OS X, or an iOS browser, and only because we’re using the prefixed webkit syntax: -webkit-initial-letter: 3;

Here are some screenshots if you can’t see what I’m seeing:

Initial letter demo in Safari OS XInitial letter demo in Safari OS XInitial letter demo in Safari OS X
Initial letter demo, in Safari OS X
Initial letter demo in Safari iOSInitial letter demo in Safari iOSInitial letter demo in Safari iOS
Initial letter demo, in Safari iOS

The first thing you might notice is the different fonts. No browsers seem to play nicely with initial-letter and web fonts. Any fonts installed on your system work fine, though they must be explicitly declared; using a general serif or sans-serif; at the end of the font stack doesn’t appear to have any impact. You’ll need something like font-family: "my web font", arial; to beat the browser fallback.

The second thing you’ll see is the top line of text shooting off the right of the page. This is a bug, so for the time being we’ll need a workaround. Happily, it’s possible by forcing the boundaries of the initial letter beyond the top of the containing paragraph (thus making the browser understand that the top line shouldn’t equal the width of the whole container). A nice big margin-top value will sort things out:


Second Value

Okay, let’s carry on. The second value initial-letter accepts is optional. It determines by how many lines the letter sinks in, for example: 

1
p::first-letter {
2
  initial-letter: 3 2;
3
}

Here we’ve declared that the letter is three lines deep, but sinks just two.

This is known as a “sunken initial”, rather than a true “drop cap”. Again, here’s a screenshot if you’re not seeing the desired result:

Sunken initial-letterSunken initial-letterSunken initial-letter

Going Responsive

Big drop caps can look fantastic, but on a narrow viewport you should consider drop caps to be a part of your responsive typography. You’ll likely have smaller body copy on small screens, so consider using a proportionate drop cap too.

1
/* set base paragraph styles */
2
p {
3
    font-size: 1em;
4
}
5
6
/* set base drop cap styles */
7
p::first-letter {
8
    initial-letter: 2;
9
10
    color: #c69c6d;
11
    margin: 1em .2em 0 0;
12
}
13
14
/* mobile first media query */
15
@media only screen and (min-width: 800px) {
16
  
17
    /* set paragraph styles for larger screens */
18
    p {
19
        font-size: 1.25em;
20
    }
21
  
22
    /* set drop cap styles for larger screens */
23
    p::first-letter {
24
        initial-letter: 3 2;
25
        margin: 1em .5em 0 0;
26
    }
27
  
28
}
More readable initial-letterMore readable initial-letterMore readable initial-letter
Keeping things readable on smaller screens

Fallback

If you’re looking at these demos in an unsupported browser, you might wonder how best to avoid the absurd-looking result:

Unsupported initial-letterUnsupported initial-letterUnsupported initial-letter
Initial-letter styling, when unsupported

We’re getting all the styling except the stuff which makes the letter actually behave like a drop cap. Using CSS feature queries you can apply your styles selectively. Wrap your drop cap styles in a @supports condition like this:

1
@supports (initial-letter: 1) or (-webkit-initial-letter: 1) {
2
 
3
 /* your initial-letter styles here */
4
 
5
}

If initial-letter is supported, the styles will be applied–if not, they won’t.

Note: not even CSS feature queries have universal support, so take this with a pinch of salt. Modernizr would be a safer bet.

Taking things further, you may even want to apply the dropcap.js JavaScript polyfill by Adobe, but we won’t be covering that here; Dudley Storey does a great job of that over on his blog.

Conclusion

It’s very early days, but initial-letter shows great promise. Keep an eye out for further properties such as initial-letter-align, which will help with non-roman alphabets, and initial-letter-wrap which will allow more tightly-fitting surrounding text.

The demos used here are very functional, but imagine the doors to decorative typography this could open up! In principle we’ll be free to use many familiar properties on the initial letter, including:

  • All familiar font properties
  • Color and opacity
  • Text-shadow and other text decoration
  • Transform properties
  • and how about some background-clip action?

For updates on its progress your best bet is to follow @jensimmons (she’s all over this stuff).

Further Reading

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.