How to Use Dropcaps

ne thing you can do to jazz up your web page is to place a dropcap at the beginning of paragraphs. A dropcap, short for dropped in capital letter, can give your page a fancier appearance. The idea comes from book publishing, where it's been done for years. You probably shouldn't use them on pages with several very short paragraphs or it may become too cluttered looking. In a situation like that you may just want to just use one at the top of the page, or at the start of each distinct section of content.

esides adding a dropcap to these paragraphs, I did one other thing to help ensure it looks the same in all the major browsers. I added a vertical-align CSS property and value to the dropcap image. The code looks like this:

<img src="dropcap.gif" style="vertical-align: baseline;" />text starts here...

ere is one set of dropcaps. Just download what you need to your computer as individual letters, or download the entire set as a Zip File. Check my free images, I'll probably add more there in time.

You could also make a drop cap just using HTML by making the first letter a couple font sizes larger than the rest of the text and adding a bold tag to it as I did at the beginning of this paragraph. I think the small image dropcap looks much nicer though, don't you? If you don't agree, send me a dollar and go stand in the corner until someone asks what you're doing.

Back | Web Design Tutorials Index

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]