Traditional leading and CSS line-height

Question 1

Traditional leading and CSS line-height

typography css

sbichenko · Dec 1, 2011 · Viewed 14.6k times · Source

Answer

Answer

Yes
Yes. It is not very simple, but using position:relative;, you can get things to line up correctly, for example:
```
 h2 {
   font-size: 36px;
   line-height: 48px;
   position: relative;
   top: 6px;
 }
```
Here is a work-in-progress demo
The people who designed CSS are not typographers. It was probably not intentional.
Bonus answer: Here is a talk by Jonathan Hoefler about the problems with designing type for the web and the limits of CSS.

Question 2

CSS specification states that line-height should be applied to text by dividing the specified value by two and applying the result above and below a line of text.

This varies significantly from the traditional understanding of leading, which usually means that spacing is 'added' only above the line of text. (I know this is not 100% correct, because actually line-height doesn't add space, but sets the height of the line; however, this way it's simpler to describe the problem).

Consider this example markup:

<!DOCTYPE html>
<html>
    <head>

    <style type="text/css">
    p
        {
        margin:0;
        font-size: 13pt;
        line-height: 15pt;
        }
    h1
        {
        margin:0;
        font-size: 21pt;
        line-height: 30pt;
        }
    </style>

    </head>
    <body>

    <h1>Title</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
    <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    <p>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
    </body>
</html>

If line-height was equal to traditional understanding of leading, then the distance between <h1> and first <p> would be equal to the distance between <p>'s, because this distance is defined by the leading. However, this is not the case.

While distance between <p>s remains consistent (p's line-height - p's font-size = 15 - 13 = 2pt), distance between <h1> and the first <p> is different: it is equal to (p's line-height - p's font-size)/2 + (h1's line-height - h1's font-size)/2 = (15 - 13)/2 + (30-21)/2 = 5.5pt.

This can be easily noticed by naked eye if the above markup is processed with a browser.

The problem is that traditional way of maintaining vertical visual rhythm on a page is by setting leading of elements in multiples of base leading. This method is inapplicable in CSS, as shown above.

I have 3 questions:

Is my understanding of line-height, leading and their differences correct?
Is there a way to maintain vertical rhythm with CSS (by mimicing traditional leading with CSS or not)?
(Bonus question) What was the reasoning behind making line-height so different from leading?

UPDATE: thank you so much for your input! Please note that I suggested my own solution and I'd be very grateful for any comments on it: https://stackoverflow.com/a/8335230/710356

Traditional leading and CSS line-height

Answer

Related questions