In this lesson we're going to create a drop cap on our text. You need the files quote_dropcap.html and quote_dropcap.css from the Exercise folder. Open up the HTML file in the browser to see what we're working with. You'll see we have a page that looks done. It looks really good actually. But we're going to add one last typographic element, a drop cap. A drop cap is a large initial letter used to start a text.
We're going to put it right here with the first letter of our designer's name here. There are a couple of methods to making drop caps. I'm only going to show you one, because at this time it is the only method that works across browsers and respects the various shapes of the different letters. We're going to create a class in our CSS for the drop cap then we're going to apply the class with a span to our initial letter. Open up the CSS and let's create a class and output it as usual with the P element, because that's where we'll be using it.
Let's call it .dropcap, put in our curly brackets. We need a couple of lines here. We're going to add a font size, we're going to do it at 300%, and this size will change depending on your font and on your desired size for the letter. We're going to putting our float: left. You need the float: left because this will keep your letter in place, regardless of what browser it's been shown in. We need a margin top, I'm going to do a margin-top. We are going to do it 12 pixels here.
This pushes the letter down a little bit so it will be even with the text. This measurement will change depending on your font, your letter size, and your desired placement, but wherever you put it, it will stay consistent across browsers. We're also going to put in a margin- right of three pixels and this adds a little bit of space to the right of the drop cap. This measurement, again, it will change depending on what your font is your letter size and also on what letter you're using.
But it will stay consistent across browsers. And then last but not least we're going to put in a color. I'm going top use #ad9585, and this is not a requirement at all. I just want the initial cap in this layout to be a lighter color than the rest of the test because I don't want it to compete with the quote. I want the quote to continue to be the main focal point on the page. So let's save this and go into our HTML. Now I need to span that class around our first character here, there it is, the H in Hans.
So do span class = dropcap and then we go end the span here right after the letter H, and we can view this in our browser, and excellent. There is a drop cap. You were lucky that the letter H works so well in this situation. You'll find some letters like A, O, K, Y, and V, they won't work as well. They have a lot more space around them, and it's difficult to create a good relationship between the initial cap and the text, so take care.
An initial cap may not always be an appropriate type treatment and if you do choose to use it you may need to be very careful with this spacing around the letter. There are two little things to tell you about drop caps. One, they should be used sparingly. Only for the first letter in a text. I've seen web sites create an initial cap in the first letter of every paragraph. This is too strong an indication for a new paragraph and a large letter starts to have too much emphasis. So use drop cap sparingly only at the start of a text or perhaps at the start of the section of the text.
Second there is another method for making drop caps that you may hear about. There is a pseudo-class called first-letter that can be applied to paragraphs. The first letter can be set up so it looks like a drop cap. But first-letter is not a good method for making drop caps. In preparing for this lesson I tested both methods across 80 different browsers, thanks to browsershots.org and to the three browsers I use on my own laptop. Using the method I showed you above the drop cap worked in all but three of the tests.
First letter failed in the same three tests as the method I just showed you. In addition in 13 browsers the drop cap came in much lower than designed. That is, there was a big gap of space above the drop cap that I did not want. In 28 browsers it came into high. That, is the letter floated up out of the text. Thus the drop cap placement was wrong in 44 out of 80 browsers. The first-letter method is not seeable at this time and I wouldn't use it.
Some say a good argument for using the first-letter method is that it is completely CSS-based. You don't have to apply a span in the HTML so it can be used for text that is brought into the page on the fly. But this will give you two problems. One, if you're automating a drop cap, you aren't attending to the spacing around the letter and different letters need different spacing. Two, you won't be getting consistent drop caps across browsers and some of them look pretty bad. So the quality of your type will suffer.
If you find yourself choosing easy over quality when it comes to drop caps, I recommend just not using them. They're decorative elements, they are not necessary, and shouldn't be used if they're going to bring down the quality of your typography.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Your file was successfully uploaded.