Line-height (leading) is measured from baseline[1] to baseline rather
than from the ‘end’ of a glyph the the ‘tip’ of another. It is
essentially impossible to align ‘perfectly’ the top of say an
uppercase character to a horizontal line above it in CSS because of
this, and because many uppercase glyphs often are ‘shorter’ than
lowercase ascender glyphs (e.g. ‘h’ in ‘The’ will often be taller than
the capital ‘T’; here the ‘h’ reaches the topline)—this occurs notably
in serif typefaces. It is also important to note that optically size
12 Arial may not be the same as another font at size 12, and thus can
also apply for the standard leading when size and leading are set at
1:1.
Finally differing font raster/sub pixel engines will render type
differently (contrast ClearText with Apple’s engine and Apple Advanced
Typography (AAT)).
I think here I would have to echo either Matijs’ comment regarding the
pixel-perfect designs on the web or, alternatively, in aligning the
top of a word or phrase to a horizontal line (say a to ‘hang’ from a
coloured shape above it) just place it up high enough that even if
another font or engine were used it’ll be overlapping with the shape
enough to avoid dropping out of it due to some rendering or alternate
font. For an example of this see the text “17 Ottobre ’09” on http://uxcamp.it/
— it’s Helvetica Neue Bold and switching to Arial still keeps it
looking spiffy. (:
1. http://en.wikipedia.org/wiki/Baseline_%28typography%29
Kind regards.
—Pascal
On 03/07/2009, at 8:56 AM, Paul Novitski wrote:
At 7/1/2009 07:19 PM, Ben Lau wrote:
This is what I'm trying to achieve: <http://hellobenlau.net/wsg/eg.gif
>http://hellobenlau.net/wsg/eg.gif
So there'll be a div with padding top and bottom of 20px, and with
text inside.
This doesn't look to me like a line-height topic at all. If you
increase the line-height, the lines of text within each paragraph
will separate from one another, and that isn't what your gif
illustrates. It looks more like a (default) line-height of 1.
Instead, this looks like a simple matter of applying padding &
margins to the wrapper div its paragraphs.
Now, if we're to take your gif literally, it looks like you've got
17px between the two paragraphs. That implies:
div
{
padding-top: 20px;
padding-bottom: 3px;
}
div p
{
margin-bottom: 17px;
}
<div>
20px
<p>some text</p>
17px
<p>some more text</p>
17px
3px
</div>
Regards,
Paul
__________________________
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
---
Simon Pascal Klein
Graphic & Web Designer
Web: http://klepas.org
E-mail: [email protected]
Twitter: @klepas; http://twitter.com/klepas
This email is: [ ] bloggable [x] ask first [ ] private.
Kaffee und Kuchen.
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
