Adding a Flourish with Drop Caps

Posted October 14, 2011 by Kathy Davie in Author Resources, Building Your Own Website

A dropped-cap is that enlarged first letter of a paragraph that “drops” down two or more lines and may use a fancy font. Be sure to choose a font that complements your topic! While I wouldn’t use a gothic font for a scientific paper, I would use it in a gothic horror story. And while I’d find Helvetica rather dull for a romance, it could be perfect for a non-fiction reference book.

That said, dropped-caps are generally used in novels at the beginning sentence of a chapter with the height of it varying from two to five sentences down.

It can be a pretty little trick to create a dropped cap effect at the start of a paragraph and creating this effect is actually very simple.

The CSS is as Follows:

CSS Appearance
.dropCap {
width: 0.8em;
font-size: 300%;
font-family: Apple Chancery, cursive;
line-height: 60%;
font-weight: bold;
Example of a dropped initial cap at the start of a paragraph
The Code The Analysis
.dropCap { . indicates that you are modifying a tag
As a class, it is ideal to use when you want to make a small change

dropCap provides a class name that modifies a tag and can be applied to any HTML tag by including class ="text" inside the HTML <> brackets

float: left; Dictates where an image or a text will appear in another element. Default values include left, right, and none. In this case, it pulls the initial cap in tight with the smaller text.
width: 0.8em; width sets the numeric value for the initial cap. Use em to set this value so it is will adjust to the size of the viewer’s screen. Do play with this number as it affects the amount of white space between the large initial cap and the following text.
font-size: 300%; Font-size sets the size of the font. You want this initial cap to be large. Play with the numbers to achieve the effect you want.
font-family: Apple Chancery, cursive; Font-family is a fail-safe…although I’m not playing it too safe as I’ve embedded this font in the website and you are only seeing a screenshot.
line-height: 60%; Line-height sets the distance between two lines. In this case, it pulls the regular text in close around the large initial cap. Again, play with the numbers to explore the effects.
font-weight: bold; Font-weight has a range of values including bold, bolder, lighter, normal, and 100 through 900.

When working with a cursive font, I prefer a stronger weight.

Return to top

The HTML is as Follows:

HTML Code Analysis
<p><span class=”dropCap”>F</span>ortunately, the winter season in Wisconsin doesn’t require a lot of hands-on activity when it comes to plumbing. So, we’ll take a look at the holiday season coming up.</p> <p> references the CSS p or paragraph tag. The text between <p></p> tags is seen as a paragraph. You could run everything together, but, as long as the <p></p> tags are in place, the extra line between paragraphs will be automatically inserted.

<span is an HTML inline style
that allows you to affect individual text or graphics.

class="…" tells the browser that this is a modification of an element.

"dropCap" references the dropCap property:values set out in the CSS stylesheet.

The > ends the first half of the span tag.

</span> encloses the text which I wanted the span tag to affect.

</p> ends the paragraph tag.

To use this trick in…
To use this trick in, you must use an inline style, in other words, you’ll have to handcode every instance where you want a dropped-cap.

<p><span style=”float:left;width: 0.8em;font-size: 600%;font-family: Apple Chancery, cursive;line-height: 60%;font-weight: bold;“>K</span>


Fun With Your Website is…

…an opportunity to do a bit more with your author’s website or blog and have some fun with it. All while learning something about html and CSS — the easy way, lol.

If you found this post on “Adding a Flourish with Drop Caps” interesting, consider tweeting it to your friends. Subscribe to KD Did It, if you’d like to track this post for future updates.

Return to top


  Bright pink is the selector coding
  Blue is the property and HTML tag coding
  Orange is the information particular to your requirements, the value
  Green indicates a hyperlink tag
  Gray indicates a comment tag

2 responses to “Adding a Flourish with Drop Caps

  1. Adding a Flourish with Drop Caps « KD DID IT's Blog

    […] More: Adding a Flourish with Drop Caps « KD DID IT's Blog […]

  2. I have been exploring for a bit for any high-quality articles or blog posts in this sort of house . Exploring in Yahoo I ultimately stumbled upon this web site. Reading this information So i am glad to convey that I have a very excellent uncanny feeling I discovered exactly what I needed. I most surely will make sure to do not forget this web site and give it a look on a relentless basis.