Drop Caps

Drop caps are a design pattern that can decorate and emphasize the start of text. They’re used extensively on this website to aid navigation through heavy text. While drop caps are found commonly in magazines and books, they’re rare on the web, most likely because they’re difficult to properly implement. In this post, I’ll show a technique for creating drop caps using CSS that loads fast, is widely supported, and works in a responsive design.

Tutorial

This is how you would write HTML/CSS with a drop cap:

<p class="drop-cap">Drop caps are a design pattern ...</p>

Below is the SCSS code I use to implement the drop cap. Most of the functionality needed comes from the :first-letter, float:left, line-height, and padding. The additional mixins and variables are necessary for making it work responsively

// specify font sizes here
$font-size-mobile: 16px;
$font-size-tablet: 18px;
$font-size-desktop: 18px;
$font-size-large-desktop: 20px;

// specify breakpoints here
$width-tablet: 780px;
$width-desktop: 970px;
$width-large-desktop: 1170px;

// handy breakpoint mixin
@mixin bp($point) {
  @if $point == tablet {
    @media (min-width: $tablet-width) {
      @content;
    }
  } @else if $point == desktop {
    @media (min-width: $width-desktop) {
      @content;
    }
  } @else if $point == large-desktop {
    @media (min-width: $width-large-desktop) {
      @content;
    }
  }
}

// adjusts the drop cap font-size and line-height
// each dropcap should align with the line height / baseline of each row
@mixin dropcap-size($font-size, $drop-cap-height: 3, $line-height: 1.6) {
  font-size: floor(($font-size * $line-height)) * $drop-cap-height * 1.2;
  line-height: floor(($font-size * $line-height)) * $drop-cap-height;
}

@mixin dropcaps($font-family: Georgia) {
  float: left;
  padding: 0px 10px 0px 0px;
  font-family: $font-family;
  @include dropcap-size($font-size-mobile);

  @include bp(tablet) {
    @include dropcap-size($font-size-tablet);
  }
  @include bp(desktop) {
    @include dropcap-size($font-size-desktop);
  }
  @include bp(large-desktop) {
    @include dropcap-size($font-size-large-desktop);
  }
}

// this is the output css class used in the html above
.drop-cap:first-letter {
  @include dropcaps();
}

// hacky but firefox requires top padding to align with the baseline
@-moz-document url-prefix() {
  .drop-cap:first-letter {
    padding: 10px 10px 0px 0px;
  }
}

Browser Support

Chrome 9+ Safari 8+ FF 3.5+ IE 9+

Design Details

Initially I looked at various JavaScript solutions but noticed an initial flicker of content for all of them as the browser would take a moment for the JS to render the drop cap. The above CSS/SCSS solution renders drop caps immediately but requires more work when changing fonts, sizes, line-heights, etc. I would recommend using Adobe’s dropcap.js for perfect drop-caps with minimal/zero CSS/SCSS effort.

Best Practices

For faster rendering of the drop cap, use a websafe font
Align drop caps with the baseline of the text lines
Don’t use drop caps for few lines of text (e.g. don’t use a 3 line deep drop cap for a 3 line paragraph)

TODO

Various fonts don’t align properly
Firefox doesn’t align properly for all fonts
The W3C is working on an initial letter (drop caps) specification, so eventaully the above techniques may become obsolete except for support in older browsers.

Research Notes

When researching ways to implement drop caps, I came across several implementations/articles: