Line-Height does not match the font-size

Question

When I have two line of text with different font-size, they overlap. Look at this example : http://jsfiddle.net/3WcMG/1/

All the 'j' and 'g' are hiding the to of the second line. It does that with all main fonts.

Why Does it acts like that? What can I do to avoid that?

EDIT: I know what's 'em' means, I know how to use the margins, I know how to increase the line height, I know what is the effect of the reset css of JSFiddle and that is not my question. My question is: Why the bottom of the 'j' is out of the box of the text? It looks like if I put negative margin-top on the second line (except that I haven't, it looks like that by default). Is there a way to make the font fit in the box.

EDIT2: It seems that it is a browser issue! I am on chrome 21.0 on Mac and I see that :

Solution 1

1em is equal to 1 times the number of pixels in a font size. So if your font-size is 60px, 1em = 60px. If it is 14px, 1em = 14px, and so on. Setting the line-height to 1em makes it equal to 1 times the number of pixels.

There may be some confusion because the default line-height set by the user agent stylesheet is usually somewhere around 1.5em, so a 12px font-size would result in an 18px line-height.

em unit
Equal to the computed value of the ‘font-size’ property of the element on which it is used

Source: http://www.w3.org/TR/css3-values/#font-relative-lengths
See also: http://www.w3.org/TR/CSS21/syndata.html#length-units

Based on this, your original example is exactly what I would expect to see. For reference, here is what I see in Chrome:

Your first line is 60px tall, but the computed value (W3's term) of the second is 14px (dictated by the class applied to it). Both have a line-height of 1em. Thus, the line-heights are 60px and 14px respectively. Since that is the same as the font sizes, the two lines touch (this can vary from font to font).

If you are seeing overlapping behavior, that's a different problem.

To change the behavior, you can use a different line-height, padding, margin, etc. As a side note, rem units may be more intuitive though support is lacking in older browsers.

For an overview of CSS units, see: http://css-tricks.com/css-font-size/

Fonts not aligned with edges of box

Updated Question/Problem

With regards to the updated question, see: http://www.w3.org/TR/css3-fonts/#propdef-font-size which states that:

Note that certain glyphs may bleed outside their EM box.

This happened in varying degrees with different fonts that I tried (some bleed both X/Y, some in one direction, some not at all).

I'm not sure there is any way to change this behavior, especially since each browser may use a different algorithm for anti aliasing which can slightly alter the edge of the character.

I think line-box-contain: glyph may be relevant, but I only see it mentioned in an editor's draft and I'm sure browser support is absent/inconsistent.

http://dev.w3.org/csswg/css3-linebox/#line-box-contain

Solution 2

Increase the line height in your CSS

line-height: 2em; (From 1 to 2em)

Which is in the p element.