Tutorial 7 - Floating a scaleable drop cap - all steps combined

Step 1 - Start with a paragraph of text

For this exercise, we want to force a drop cap to sit beside a paragraph of text. We also want the drop cap to be scaleable, regardless of the user's default font size - which means all measurements will be in ems or percents. Start with a simple paragraph of text.

Step 2 - Add a span around the first letter

There are two ways to apply a rule to the first letter. The first method uses ":first-letter" to target the letter and the second method uses a span around the first letter. Although the second method is not as semantically pure, it is more stable across browsers.

We will be using the second method for this tutorial. So, we need to wrap the first letter of the paragraph inside a span.

<span class="dropcap">L</span>orem ipsum dolor sit amet, consectetuer...

Step 3 - Float the first letter

When we apply a "float: left" to the first letter we also have to provide a width. The width you use will depend on the width of the letter to be "dropped".

We are using ems to set the width and size of the letter. This will allow the drop cap to scale up or down and always match the user's default font size. An em is approximately the width of a capital "M". Therefore, a capital "L" would only need a width of around .7em.

.dropcap
{
float: left;
width: .7em;
}

Step 4 - Increase the font size

Increase the font size until it is the height of 3 lines of text - about 4ems in size.

font-size: 4em;

Step 5 - Set a line-height

To make the drop cap line up with the text alongside, set the line-height. In this case, around 83% seems to work. Like the font-size, these figures can be adjusted to suit your own needs.

line-height: 83%;

Finished!

« Back to main menu

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


CSS CODE
.dropcap
{
float: left;
width: .7em;
font-size: 4em;
line-height: 83%;
}

HTML CODE
<p>
<span class="dropcap">L</span>orem ipsum dolor sit amet, consectetuer...
</p>
Other Max Design articles and presentations
Associated with webstandardsgroup.org