CSS 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.

Set Random Dropcap

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.20;
  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+ IE9+

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

TODO

Research Notes

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