CODEWITHSUNDEEP
htmlcssfontsfont-size
tibo
tibo

Reputation: 5474

Line-Height does not match the font-size

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 : screenshot

Upvotes: 14

Views: 27827

Answers (4)

Tim M.
Tim M.

Reputation: 54359

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:

enter image description here

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

enter image description here

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

Upvotes: 23

Steven Lacks
Steven Lacks

Reputation: 904

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/

<div class="small">
    <p>Normal pq</p><br/>
    <p class="short">Short pq</p><br/>
    <p class="tall">Tall pq</p><br/>
</div>
<div class="normal">
    <p>Normal pq</p><br/>
    <p class="short">Short pq</p><br/>
    <p class="tall">Tall pq</p><br/>
</div>
<div class="large">
    <p>Normal pq</p><br/>
    <p class="short">Short pq</p><br/>
    <p class="tall">Tall pq</p><br/>
</div>

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.

Upvotes: 0

Mak
Mak

Reputation: 604

You can give your "test" class line-height or margin-top whatever you feel comfortable with.

.test{
    font-size: 14px;
    line-height:18px;
}

Upvotes: 0

Venu K
Venu K

Reputation: 50

Increase the line height in your CSS

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

Which is in the p element.

Upvotes: 1

Related Questions