Menu
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:
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
780
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.
57
Alright, this seems to work better than my other solution. It still employs additional <span>s inside block elements. The trick is to set the block element's line-height to 1, and adjust the span's line-height, while also cancelling it out with top and bottom margins. Note that this requires display to be set to inline-block.
However, actually setting margins (so as to make a line-high break between <h1> and <p>) becomes quite difficult and requires some math. So, I guess, trying to use traditional typographic approach to leading is far too time consuming in CSS to be actually employed in developer's work.
Anyway, here's the final code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
span.p
{
display:inline-block;
line-height: 32px;
}
span.h
{
display:inline-block;
line-height: 64px;
margin-top: -32px;
margin-bottom: -32px;
}
p
{
margin:0;
font-size: 26px;
line-height: 1;
}
h1
{
margin:0;
font-size: 42px;
line-height: 1;
}
</style>
</head>
<body>
<h1><span class="h">Molloy</span></h1>
<p><span class="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.</span></p>
<p><span class="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).</span></p>
<h1><span class="h">Lorem Ipsum is simply</span></h1>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With