Drop Caps

Learn how to use CSS to place drop caps.

ou might have seen other webpages where a stylized and fancy letter start a paragraph. This is known as using a drop cap. Using drop caps is far from new as many of the oldest printed materials - usually Bibles - used them regularly.

The primary "trick" with using drop caps on webpages is getting multiple paragraphs to successfully 'float' around them as this paragraph does.

Quite often as soon as a new paragraph begins, the drop cap gets out of place.

This quick tutorial will show you the tiny bit of code needed to get your text to correctly wrap around your drop cap.

CSS and Drop Caps

Here's all you need to do to get your drop cap placed properly.

<img src="images/image.jpg" alt="Y" style="float: left; padding-right: 2px">


You will want to replace the alt="Y" with whatever letter you are using the drop cap for. The little bit of padding simply pushes the text away from the image to not have it looking so squished like the Y does in the first paragraph.

About Drop Caps and SEO

here is one small gotcha about using drop caps and that relates to SEO and keywords. When Google, Yahoo! or any of the other search engines visit your site, they will see the previous sentence starting with 'here' rather than the correct 'There'.

This is a small problem that can be easily overcome by simply not using a drop cap for a word that you wish to rank for in the search engines.

Where to Find Drop Cap Letters

The easiest way to use a drop cap letter is to go through your personal collection of fonts and simply create an image of the letter you require.

The other option is to find or draw your own image. While there are thousands of free image websites on the Internet where you could potentially find images of letters to use for drop caps, we suggest visiting Reusable Art where they have a collection of Fancy Letters that can be used for drop caps on your website.