A long time ago, it was very common practice in books and magazines for the style template to call for a Drop Cap. These days, many younger people might be scratching their head on what exactly a drop cap is. Well, a drop cap is a means to stylize a paragraph and to add a little splash and flavor to a page.
The drop cap itself is usually the first letter of the first word of the first paragraph that is a much larger font and a different font type than the rest of the paragraph and spans the first few lines of the paragraph. It’s a very simple means to add a bit of elegance to the page. The recommendation is to use drop caps for content sites that dedicate entire pages to a single article. It’s not so much recommended for the front page or for pages with just a few paragraphs of content. The main intent for the drop cap is for content sites that are focused on articles.
There are few different methods you can use to create a drop cap. Way back in the day, to add a drop cap, you had to insert a graphic file. Web publishers would have to create a gif file of a single letter and then insert that into the paragraph. Times have changed and now publishers can use code to create the drop cap effect. Here’s the first example on how to create a drop cap:
<span style=”float:left;color:#D4D4C7;font-size:44px;line-height:35px;padding-top:3px; padding-right:3px;font-family: Times, serif, Georgia;”>F</span>
Simply insert this code at the beginning of the first paragraph of your article. Of course, you can tweak it per your needs. The problem with this method is that it’s a lot of code to have to insert for each and every article. Plus, it kind of junks up your HTML. A cleaner and simpler approach is to update your CSS.
One possibility for updating your CSS to accommodate for drop caps is this:
p {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 10pt;
color: #000000
}
p:first-letter {
font-family: Times, Times New Roman, Tahoma;
font-size: 36pt;
float: left;
}
The problem with this approach is that it creates a drop cap for every single paragraph on the page that begins with the <p> tag. This is not an ideal situation. A better approach is this:
p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
color : #c00;
}
This code works in Firefox, IE and Chrome and I’m sure it works in Safari as well but I didn’t test that browser.
In your HTML page, simply insert:
<p class=”introduction”>
around the first letter of the first paragraph on the page. For example:
<p class=”introduction”>A</p><p> long time ago…</p>
You do need to use a new <p> tag after the <p class> tag, otherwise, you will lose your <p> formatting. While the above CSS code does work, I tweaked it a bit to look more aesthetically pleasing.
p.introduction:first-letter {
font-size: 44px;
float: left;
color: #D4D4C7;
line-height: 35px;
padding-top: 3px;
padding-right: 3px;
font-family: Times, serif, Georgia;
}
You can experiment with what works best for your page, including changing the color, the font, the size and the padding.
After you implement this into your CSS, it only takes a short snippet of code to add to each of your articles. This simple and easy trick can bring back a forgotten style that adds some class to your pages.
