Join Sue Jenkins for an in-depth discussion in this video Dropping in CSS drop caps, part of Productivity Tips for Web Designers.
- Hi there, I'm Sue Jenkins and welcome to Productivity Tips for Web Designers. Today, you'll discover different methods for creating drop caps in your web layouts using HTML and CSS. If you've been hanging around the webiverse for the last few years, you've probably heard of Jessica Hische and her famous Daily Drop Cap website, where she flexes her impressive typographic muscle by showing off these remarkably versatile sets of illustrated initial capital letters. An initial capital letter or drop cap is the larger and more often ornate first letter of a paragraph that drops down two or more lines into the rest of the paragraph's text.
Drop caps are often used as the very first letter of a word, paragraph, article or a chapter in a book, magazine, or other publication. In older manuscripts, the drop cap would extend down several sentences deep and often include ornate details like foliage, animals and human figures. Today, to create a drop cap on a webpage, the convention is to align the initial cap within the text block's borders, while also lowering the base line of the drop cap and then indenting some space to the right.
One of the most popular ways to create a drop cap is to use a web graphic and then float the image to the left of the text with CSS, so that the paragraph text can wrap around the image. Or if you don't wanna rely solely on images, you can also create a drop cap effect using the first-child first-letter pseudo element in CSS. Combine that with a fun web font and you've got yourself a fancy, standard's compliant, accessible, fully CSS drop cap.
Oh and speaking of accessibility, from an accessibility and usability standpoint, drop caps don't actually don't make reading text any easier. Essentially, they're purely decorative elements meant to enhance the aesthetics of a particular layout. For that reason alone, use drop caps selectively and sparingly, as with the first letter of a blog post or a bio page, but certainly not on every page and definitely not on every paragraph. To fully appreciate how CSS drop caps work, let's start by old schoolin' a drop cap using an image from dailydropcap.com.
So start by visiting the site. Then you'll find the letter that you like, I actually found an F that I like already, then you'll copy the code beneath the letter and you'll paste it right into your HTML after the opening p tag of your first paragraph. This code has the align left attribute, so when placed inside of the p tags, the rest of the text will naturally wrap around the image to the right. Let's take a look at this example in a webpage.
The next few CSS drop cap methods I'm about to show you are based on recommendations by Laura Franz, professor at U Mass, Dartmouth. You can learn more about typography and web fonts from Laura by watching her courses, Typography for Web Designers and Using Web Fonts in the lynda.com library. The next method involves creating a class for the larger letter image instead of inserting the image on the page. We'll apply the class style using span tags to help isolate the first letter.
So in this case the style is called dropcap1 and it spans the letter F in the first word. In the CSS, we can set the properties for our drop cap class style. Since we want the background image to replace the letter F, but we need to allow for the letter to still appear in any browsers or devices with CSS disabled, we'll use a negative number for the text indent property. Now save your page and preview in a browser.
This technique works great and one of the benefits of using an image as a background image in your CSS instead of inserting it on the page is that it's still SEO friendly because an actually letter F is being used, even though it's negatively off screen. So for SEO purposes, this is a great technique. Let's move on to another method. If you'd rather use a web font than an image, you can modify your CSS to specify the desired font and then adjust the color, size and margins appropriately.
In this example, I'm using a Google font called Spirax along with negative top and bottom margins for positioning. Let's take a look at this one in a browser window too. Very nice! And this method is also very SEO friendly. Okay, one last method I'd like to show you for creating drop caps. This method involves using the first-child first-letter pseudo class selector, which will apply to the first opening p tag. In essence, this style forces the first letter of the first word of the first paragraph, within the container specified, to use the drop cap style that we specify in this style declaration.
Here, I'm using the same web font, same size, same color as the last example but I've tweaked the margins a bit, since this CSS style displays the drop cap differently than the previous example. Let's take a look at this one in the browser too. One thing I'd like to mention about this last method. Here's a comparison of how it looks on Chrome on the right and on Firefox on the left. And you can see that there are some alignment issues. That's gonna happen.
Different browsers, different browser versions they may display your CSS slightly differently. The best thing to do is test, test, test and either be resolved to have your drop caps fail acceptably in different browsers or try using one of the other methods. In the meantime, if you'd like to show off your hand-lettering or typography or you simply wanna create a page with a more decorative and elegant feel, use one of these techniques to create drop caps with CSS.
Skill Level Appropriate for all
Q: In "Organic and ethical SEO coding," the author mentions Google+ Authorship. I heard Authorship results are no longer shown in Google search results. Why? Are there benefits to keeping the Google+ Authorship markup on my site?
A: As of September 2014, Google discontinued Google+ Authorship for SEO. The only reason to keep the code on your site would be for Author Rank purposes. See http://searchengineland.com/google-authorship-dead-author-rank-202254 for more information.