Simple CSS drop caps

What self respecting author doesn’t love a good drop cap to start off her opening paragraph?



I’m neither an accomplished typesetter nor any kind of historian, but I do know that drop caps have been in use for a long time, and it’s for a simple reason – they draw one’s eye to the beginning of the text, emphasizing the starting point as your eye is searching for somewhere to settle. They also look cool. This art is all but lost for modern online periodicals. When drop caps are used they are normally images, clunky jpgs tacked onto the start of your paragraphs. A time has come where we can provide accessible, beautiful, easy to use paragraph starters, that keep the flow of our words and scale with browser text sizes. And even if one is using a standard system font for body text, adding a drop cap from a complementary webfont would give the text setting a great lift and add a little of the individualism that webfonts make possible. So, let’s figure out the best way.

We are going to start the tutorial section now, so take out your pens and notebooks. This is standard CSS and will work in all modern browsers, if you are unfamiliar with any of the CSS rules or selectors used (or just want to brush up), the w3c has great references.

The first thing an author needs to consider is the typeface: select a webfont that fits the look and feel you are going for, and remember this is just an accent font, you won’t be using it everywhere.

In this very simple example I have selected to use Museo 500 & 700: 500 is used for the body text and 700 (bold) for the drop cap (I know, it isn’t very exciting). These styles are linked together as a CSS font family. 

CSS Break Down:

1.) Link your style sheet into your HTML page you normally would.

<link rel="stylesheet" type="text/css" href="MyFontsWebfontsKit.css">

In this case I have used our Family Style linking tool in the Webfont Kit builder to make Museo 500 a normal weight, normal style font, and I have made Museo 700 the bold weight, normal style font.  The details of the kit’s CSS are handled automatically for you.

2.) Assign the fonts to the CSS selectors you need.  Put this CSS in your normal stylesheet.

p {     
     width: 500px;     
     font-family: Museo;     
     font-weight: normal;

     line-height: 1em;

p:first-letter {     
     font-size: 3.3em;  /*make the font much larger*/
     line-height: .9em;  /*a little less than the p so it wraps nice*/
     font-weight:bold; /*keep the same family, but use the bold weight*/

     float: left; /*make it hang left*/
     padding: 0 0.1em 0 0; /*pad it out slightly*/


3.) Use the <p> tag around the paragraph that will feature the drop cap.

The first-letter pseudo selector is the real magic of css drop caps; it selects the first letter in the p tag. Now you can apply any style you need to only the first letter. In this case we want to make the font very big, I want to assign the bold version of Museo, and to make the first letter hang out to the left, spaced slightly away from the rest of the paragraph. In this same way you could change the font-family, or assign even more grandiose styling to the first letter.  Of course this will apply a drop cap to all of your paragraph tags, so you might want to also assign a class, or use a slightly more specific selector, but the general concepts hold.

Example DropCap

And there you have it!

In future webfonts technique articles I'll cover more text specific selection and styling techniques as well many other interesting tricks and hacks for making your words as beautiful as possible. 

Joe Vieira  -MyFonts Developer