In this post I'd like to show you an advanced example of text formatting with CSS. We'll discuss some peculiar features, such as aligning the text of an heading with its bottom border, justifying text in a legible way and using the :first-letter pseudo-element to create a drop cap effect. First of all, we need a basic HTML structure to work with. It is as follows:
<body> <h2><span>...</span></h2> <p>...</p> <!--more h2s and ps--> </body>
The first thing to do is to set some basic styles on the main container (body in this case):
body {
width: 40em;
margin: 0 auto;
padding: 2em 0;
font: 76% Arial, sans-serif;
}
76% is a CSS font size constant that sets the base font size to 12 pixels in a cross-browser fashion. As you probably noticed, each h2 element contains a child element. This will be used to create the effect of the text aligned vertically with the bottom border of each heading:
h2 {
font: normal 4em Georgia, serif;
color: #d40;
border-bottom: 1px solid maroon;
text-align: center;
margin: 0;
}
h2 span {
position: relative;
top: 0.2em;
}
The span element wraps the entire text of the heading and has been relatively positioned so that the final effect will consist of a text hanging out of the bottom border of the heading.
Now paragraphs. We want the text to be justified but we know that the default rendering of browsers is very sloppy and difficult to read. For that reason, we use the letter-spacing property to fix this problem:
p {
line-height: 1.4;
letter-spacing: 0.1em;
font-size: 1.2em;
text-align: justify;
}
This technique was first discovered and tested by Mark Schenk who recommended the value of 0.1em.
Finally, we'll use the :first-letter pseudo-element to create the effect of a drop cap:
p:first-letter {
float: left;
font: 4em Georgia, serif;
padding: 0 5px 5px 0;
color: #666;
line-height: 1;
}
This pseudo-element inherits its current line height value from the paragraph, so we've fixed this problem by adjusting its line height to 1. You can see the final demo below.