"Choose a basic leading that suits the typeface, text and measure"

Now we get to the real meat of things. Here we put it all together by taking into account our choice of measure (length of line), font-size, and font choice itself. Let's say we were designing something for print. There we might have a 12pt font with 18pt of leading—which means that 5pt of vertical space are added below each line of text. This is a good value to use; it adds enough vertical space, but not too much.

However, it is a little quircky in CSS. We don't want to express our line height in points; we saw earlier why that's not good. Luckily the "line-height" property is one of the few CSS properties that we can give without units, as a multiplier. Thus, we can say something like the following:

p {
    font-size: 0.75em;
    line-height: 1.5; /* 18 pt (leading) / 12 pt (font)  = 1.5 */
}

"Add and delete vertical space in measured intervals"

Here is where it gets tricky. We want to retain the rhythm on the page, meaning the vertical spaces between headings and paragraphs to remain consistent, no matter what the actual font sizes are. So, taking our previous example, our natural rhythm is one that is at 18pt intervals—meaning that on line markings of every 18pts we should have a new line, new heading, or so on. Thus, to keep this rhythm for the paragraph, we need to modify the upper and lower margins:

p {
    font-size: 0.75em;
    line-height: 1.5; /* 18 pt (leading) / 12 pt (font)  = 1.5 */
    margin-top: 1.5em; /* 1.5 leading */
    margin-bottom: 1.5em; /* 1.5 leading */
}

This works for lines of equal height. What about for our headings, which are different heights because of our different choices for font-size? We need to calculate the margins so that we keep on the 18pt grid so that we're always aligned with the baseline. So, let's think about how to calculate that...

h1 {
    font-size: 2.25em; /* 36 pt / 16 pt = 2.25em */
}

h2 {
    font-size: 1.5em; /* 24 pt / 16pt = 1.5em */
}

h3 {
    font-size: 1.125em; /* 18 pt / 16 pt = 1.125em */
}

h4 {
    font-size: 0.875em; /* 14 pt / 16 pt = 0.875em */
}
h1 {
    font-size: 2.25em; /* 36 pt / 16 pt = 2.25em */
    line-height: 2;
    margin-top: 2em; /* 36 pt / 18 pt (grid) = 2em */
    margin-bottom: 2em; /* 36 pt / 18 pt (grid) = 2em */
}

h2 {
    font-size: 1.5em; /* 24 pt / 16pt = 1.5em */
    line-height: 1.33;
    margin-top: 1.33em; /* 24 pt / 18 pt (grid) = 1.33em */
    margin-bottom: 1.33em; /* 24 pt / 18 pt (grid) = 1.33em */
}

h3 {
    font-size: 1.125em; /* 18 pt / 16 pt = 1.125em */
    line-height: 1;
    margin-top: 1em; /* 18pt / 18 pt = 1em; */
    margin-bottom: 1em; /* 18pt / 18 pt = 1em; */
}

h4 {
    font-size: 0.875em; /* 14 pt / 16 pt = 0.875em */
    line-height: 1.286;
    margin-top: 1.286em; /* 18 pt (grid) / 14 pt = 1.286em */
    margin-bottom: 1.286em; /* 18 pt (grid) / 14 pt = 1.286em */
}

Asymmetrical margins

Let's say that we wanted to have asymmetrical margins between paragraphs and section headings; this is sometimes a nice thing to do. We won't get into the calculations here, but you can read about how to do so; the basic idea is just keep the vertical rhythm the same throughout.