Styling semantic markup: A traditional example with serif fonts and a baseline grid

Required files styling-semantic-text-starting-point.html, stylingsemantic-
text-starting-point.css, and styling-semantictext-
baseline.gif from the chapter 3 folder.
What you’ll learn How to create a page of traditional-looking text as per a printed
book. The text adheres strictly to a baseline grid, maintaining the
page’s vertical rhythm. This requires some extra calculations when
it comes to defining line-height values.
Completed files styling-semantic-text-3.html and styling-semantic-text-3.
css from the chapter 3 folder.

1. Define a default font for the page. Using a body rule, a default font is chosen for
the web page. This design primarily uses the Georgia font—a serif—to enhance the
traditional feel.
body {
font-family: Georgia, "Times New Roman", Times, serif;
}
At this point, it’s also important to decide on a target line-height value for the
page. For this example, it’s going to be 18px.
2. Style the main heading. Here’s where things get a little tricky. For these examples,
we’re working with relative units. As mentioned earlier in the chapter, the 62.5%
method means that you can define font sizes by setting the font-size value to a
setting in ems that’s one-tenth of the target size in pixels. So, in the following code
block, the h1 rule’s font-size value of 1.8em means it’s effectively displayed at
18 pixels (assuming the user hasn’t messed around with their browser’s default settings,
again as mentioned earlier).
For the line-height value to hit the target of 18 pixels, it must therefore
be 18 pixels or a multiple of it. However, when using ems, this value is relative to
the font-size value. One em is equal to the height of one character, and since
the font-size has been set to 1.8em (which is equivalent to 18 pixels), we set
line-height to 1em. This makes the line-height of the h1 element the equivalent
of 18 pixels.
Similar thinking is used to define the value for margin-bottom—this needs to be
18 pixels to keep the vertical rhythm going, so the value is set to 1em.
h1 {
font-size: 1.8em;
line-height: 1em;
margin-bottom: 1em;
}

3. Style the subheading. For the subheading, the font-size value is set to 1.4em. To
keep the line-height vertical rhythm going, you need to find the value that will
multiply with the font-size setting to create 1.8 (since 1.8em is the equivalent of
18 pixels). You can get this by dividing 1.8 by the font-size value, which results in
a line-height value of 1.2857142em. To keep the rhythm going, this setting can
then be used for both the margin-top and margin-bottom values.
h2 {
font-size: 1.4em;
line-height: 1.2857142em;
margin-top: 1.2857142em;
margin-bottom: 1.2857142em;
}
However, what this serves to do is isolate the heading on its own line, rather than
making it obviously lead to the subsequent paragraph. Two solutions exist for dealing
with this. The first is simply to remove the bottom margin; the second is to
create asymmetrical margins, making the top margin larger than the bottom one.
To keep the entire space the element takes up strictly within the grid and not interrupt
the vertical rhythm too much, it’s sensible to take half the margin-bottom
value and add it to the margin-top value.
h2 {
font-size: 1.4em;
line-height: 1.2857142em;
margin-top: 1.9285713em;
margin-bottom: 0.6428571em;
}
4. Style the crossheads and paragraphs. For this example, the crossheads and paragraphs
are identical, save for the default styling on the headings that renders them
in bold. The font-size value is 1.2em. Again, 1.8 is divided by the font-size figure
to arrive at the line-height and margin values, both of which are set to 1.5em.
Note that the h3 rule has no margin-bottom value, meaning that each level-three
heading hugs the subsequent paragraph.
h3 {
font-size: 1.2em;
line-height: 1.5em;
margin-top: 1.5em;
}
p {
font-size: 1.2em;
line-height: 1.5em;
margin-bottom: 1.5em;
}
At this point, your page should look like the following image.

 

5. Add a (temporary) grid. When working on text that adheres to a baseline grid, it
can help to create a tiled background image that you can use to check whether
your measurements are accurate. The 18-pixel-high image file, styling-semantictext-
baseline.gif, has a single-pixel line at the bottom of the image. When
applied to the wrapper div’s background via the #wrapper rule (see the following
code), a ruled background is shown. Although intended as a temporary design aid,
you could retain the grid permanently, because it can help readers to rapidly skim
text. However, the aid only works when a browser is using default settings—when
the text is enlarged, the background image stays as it is, resulting in the grid of the
image and the grid of the text being out of sync.
#wrapper {
margin: 0 auto;
width: 400px;
background: url(styling-semantic-text-baseline.gif);
}
The following image shows how this image works behind the text styled in this
exercise—as you can see, the vertical rhythm is maintained right down the page.