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 o

Answer 1

The default line height is relative size, 150% of the font size in a p for example. If you change line height using em or %, the browsers will interpret that as "em/% compared to the font size."

http://jsfiddle.net/P7LaP/

    
Normal pq


    
Short pq


    
Tall pq




    
Normal pq


    
Short pq


    
Tall pq




    
Normal pq


    
Short pq


    
Tall pq

The example has three sets of three p tags with normal height, short, and tall. While the three sets are the font size.

p {
    color: ffffff;
    background: #777777;
}
.short { line-height: 1em; }
.tall { line-height: 2em; }
.small { font-size: 8px; }
.normal { font-size: 16px; }
.large { font-size: 32px; }

I hope this helps. I'm not sure exactly what you're trying to do, but it looks like you should just delete the line-height line from your stylesheet.