Quick Tip - 04: Create Drop Caps With CSS

January 31, 2014 | 2 Minute Read

CSS drop caps came up in a discussion with a co-worker the other day. I don't use drop caps in web sites I design, but there's really no reason why I shouldn't.

Example

Here’s how you can create drop caps with CSS using the :first-letter pseudo-class:

The Code:

.sample:first-letter {
     font-size: 490%; 
     float: left; 
     line-height: 0.9;
     margin: 0 12px -8px 0;
}

Demo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Different Styles

You can even spice it up by applying a background color so that it will be contained within a square.

The Code:

.sample:first-letter {
    background: #3dc0d1; 
    color: #fff; 
    font-size: 380%; 
    line-height: 0.9; 
    float: left; 
    margin: 12px 12px -8px 0; 
    padding: 0 9px 0 4px;
}