What is drop cap?
Have you noticed magazines have the first letter of the paragraph larger than the rest of the text and it usually spans the height of two or more lines of regular text? This first letter is called the Drop Cap.
Why use drop caps?
Drop Caps have been used in print design to mark the beginning of a new section of text. They are a great way to add visual interest to long-form content. They help to accentuate an article and bring the reader’s attention to a particular section or chapter.
You must be wondering how you can use this style in your WordPress website and blog posts. Thanks to the wonders of CSS, I’ll show you three easy ways to add drop caps to your paragraphs. For those who don’t want to mess around with code, I’ll show you a plugin alternative, as well.
Here are a few examples of websites that use drop caps to spark up their website content.
Four ways to add drop caps to your WordPress website
Method 1 | The Code Free Plugin way.
To apply drop caps to every post, all you have to do is go to Plugins – Add new, and search for Simple Drop Cap.
After installed and activated, you can go to Settings » Simple Drop Cap, and you will see Three Modes: Normal Mode, Float Mode, and Custom Mode. You can customize it as needed.
NOTE:
- Plugins slow down your website. Hence I don’t recommend this approach for styling unless you don’t want to muck with code.
Method 2 | The CSS3 way.
If you want to turn the first letter of the first word of the first paragraph element on every WordPress post into a drop cap.
Open the style.css file and add the following css code
.post p:first-of-type:first-letter {
font-size: 40px;
float: left;
margin:5px;
}NOTE:
- This code will work ONLY on WordPress posts where the post content is generated by the WordPress loop which adds a class ‘post’ to the div wrapping the post content.
- This code will work even when the post has a featured image inside the post content before the first paragraph element.
- This code will style ALL the blog post’s first paragraph elements first letter with no extra markup.
- The drop cap text cannot be selected.
Method 3 | Manually adding a drop cap to select paragraph elements on a page.
Open the style.css file and add the following css code
p.drop:first-letter {
font-size: 40px;
float: left;
margin:5px;
}Add a class named “drop” to the paragraph element where you’d like to have the drop cap.
<p class="drop">This paragraph will start with a drop cap.</p>NOTE:
- This requires a bit of extra effort to manually add the class ‘drop’ to the paragraph element to get the drop cap.
- Gives you complete control of where in the post or page, the drop caps will appear.
- Old blog posts and page content will need to be tweaked to show the drop caps.
- The drop cap text cannot be selected.
- Not supported in older browsers.
Method 4 | The cross-browser way.
Open the style.css file and add the following css code
.dropcap {
color: #903;
float: left;
font-size: 75px;
line-height: 60px;
padding: 4px 8px 0 3px;
}In the HTML editor, wrap the first character of the paragraph element in a span with a class dropcap.
<p><span class="dropcap">T</span>his paragraph will start with a drop cap.</p>NOTE:
- This requires extra effort to manually add the span tag with the class ‘dropcap’ to the paragraph element.
- Old blog posts will not show the drop cal unless the content is tweaked.
- The drop cap text can be selected.
- Works across all browsers.
Once you have the drop cap working, you can style it any which way you want. You can change the font, the drop cap color, add a background color, set a background image, change the font-weight etc. For inspiration on how you can style your drop caps, check out Daily Drop Cap.