Drop Caps

Avatar of Chris Coyier
Chris Coyier on (Updated on )

The Accessible Way

Your best bet is to watch Ethan’s 5-minute video and then reference this:

The cross-browser way (extra markup)

Just wrap the first character of the paragraph in a span, then target the span with CSS and style away.

<p>
  <span class="firstcharacter">L</span>
  orem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
.firstcharacter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

The CSS3 way (no extra markup)

Target the first character of the first paragraph using pseudo class selectors. No extra markup needed, but no IE < 9 support.

<p>
  Just a normal sentence.
</p>
p:first-child:first-letter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

The initial-letter way

Using initial letter to create a drop cap

The browser support for initial-letter is pretty sparse at the time of this writing, but it can be used to calculate the number of lines the drop capped letter should occupy and the font size instead of doing that on your own.

p:first-child:first-letter {
  color: #903; 
  font-family: Georgia;
  initial-letter: 2;
}

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
125NoNo122TP*

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
122No12217.4*