RE: Line layout in browsers

I was trying to look up a good reference with a picture of components of line height, but I don't readily see one place with clear definitions. Maybe it is because it is complicated...

http://en.wikipedia.org/wiki/Leading describes the idea of leading (which is what makes 'normal' line height bigger than 1 EM;

See also:
http://en.wikipedia.org/wiki/Typeface#Font_metrics
http://en.wikipedia.org/wiki/Em_(typography)

-----Original Message-----
From: Alex Mogilevsky
Sent: Monday, January 21, 2008 1:43 PM
To: 'Eric A. Meyer'; www-style@w3.org
Subject: RE: Line layout in browsers

Right, that's what David doesn't like about definition of "line-height:1", and I agree.

"normal" line height is what font designer decided would be the perfect distance between two lines; when represented in EMs it is nearly always bigger than one.

In this test, forcing line height to 1EM (against typographer's will) forces more overlap that would happen there if line height were not specified.

-----Original Message-----
From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf Of Eric A. Meyer
Sent: Monday, January 21, 2008 1:25 PM
To: www-style@w3.org
Subject: Re: Line layout in browsers


At 2:38 PM -0600 1/21/08, David Hyatt wrote:

>Borders increase the span height (as does padding).  If you put 1px
>top and bottom borders on a span in an attempt to "see where it is",
>then you just made a span box that is 2px taller.  Therefore at a
>line-height of 1 (100px), there will be a slight overlap since the
>span boxes are a bit taller than the height of the line (102px).

    Agreed.  In the case we were discussing, though-- the first test
on
<http://meyerweb.com/eric/css/tests/line-height/bigtext-spans.html>--
there is no padding on the spans, and at 'line-height: 1' there's a
more than a few pixels of overlap in Safari and IE.

--
Eric A. Meyer (eric@meyerweb.com)     http://meyerweb.com/

Received on Monday, 21 January 2008 22:07:16 UTC