3

I am trying to figure out how line-height in css works. I am setting body line-height to 1.5em ( 24px ). And I am using a link tag with font-size 24px.

I am expecting the total height of the inline element to be 24px. With 'Times-new-roman' it works as expected but when i use a custom font say 'Open-sans-latin extended', the height of my link is 33px.

I think line-height changes according to the font-face used. Am i right?

Improve this question
1
  • Are you actually asking about how to set the height of an inline object? Line-height might be a bit of a red herring in this question.
    – DA01
    Commented Jan 30, 2015 at 21:00

4 Answers 4

Reset to default
4

The initial value of line-height depends on the font (and on the browser), but if you have set line-height on body, that value will be inherited (unless inner elements have their own settings for it).

However, line-height does not dictate the height of inline element boxes. The CSS 2.1 spec says about inline, non-replaced elements (like a elements): “The 'height' property does not apply. The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font.”

Thus, we can more or less expect that the total height of an inline element depends on the font(s) used in it.

Improve this answer
4
  • Line height doesn't really have anything to do with baselines.
    – Scott
    Commented Jan 30, 2015 at 16:34
  • This is actually incorrect. As Scott says, in CSS, line height doesn't really relate to the baseline. It relates to the overall size of the font's bounding box but it applied equally above and below it. It's a different concept than DTP software.
    – DA01
    Commented Jan 30, 2015 at 18:30
  • OK, I removed that part, as the key point is how inline element height is determined.
    – Jukka K. Korpela
    Commented Jan 30, 2015 at 19:56
  • Yea, I guess I'm fuzzy on what the OP is actually asking. For sure, inline content doesn't have a height.
    – DA01
    Commented Jan 30, 2015 at 20:59
4

The line-height property will not change the size of your font.

line-height is essentially drawn behind the type and if smaller than the font size it will have no effect on the actual type. Setting a smaller line-height actually works to change the height, but it doesn't change the font-size. You can set an overflow property to hide portions of text, but the size of text wont' change.

The only time line-height actually visually alters the line by default is when it is set larger than the type needs to display.

Demo here

Improve this answer
3
  • Scott is correct. If one specifies the line-height in the CSS then the text lines up
    – Mayo
    Commented Jan 29, 2015 at 23:03
  • line-height shouldn't change the size of the font, period. Doesn't matter if font-size is declared or not.
    – DA01
    Commented Jan 30, 2015 at 18:31
  • @DA01 you're correct. I removed the end of that sentence.
    – Scott
    Commented Jan 30, 2015 at 22:58
3

Yes you are correct line height changes according to font-face. SEE Edit Below

On block level elements, the line-height CSS property specifies the minimal height of line boxes within the element. https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

The operative phrase is "minimal height"

Depending on the browser and typeface used, line-height will commonly be a default value between 1.2 and 1.4, referred to as the “normal” value. http://demosthenes.info/blog/606/Molten-Leading-Exploring-The-CSS-Relationship-Between-Font-Size-Line-Height-and-Margin

EDIT: To clarify (I focused on the last line of your question.)

If one does not specify line-height in the CSS then line-height will vary according to font-family. Specifying line-height in the CSS forces text to the same base-line.

See: http://jsfiddle.net/MAYO/fcnbu45k/1/

  • Using browser default (webkit) the lines quickly become unsettled
  • Setting line-height forces the lines to "line-up" but the text does not line up perfectly

Using browser default (webkit) the lines quickly become unsettled

Setting line-height forces the lines to "line-up" but the text does not line up perfectly

Improve this answer
1
  • 1
    Setting the line-height won't be sufficient if they are not the same font. For example, Courier with font-weight 700 gets a different content height than normal Courier, even if they have the same font-size and line-height.
    – Janus Troelsen
    Commented Apr 20, 2017 at 14:34
2

line-height in CSS was not designed by a typographer. It's not really related to the print world.

What line height specifies is the 'minimum height of the row inline objects will fit in to.

It's not directly related to font size.

For example, if you set your line-height to 24px, it simply means that each row will be a minimum of 24px height. Whether you put 10px type in that row or 20px type, the rows will still be the same height. The text will merely be centered in that row. There is no real correlation to the font's baseline.

Example:

http://jsbin.com/henayixezi/1/

enter image description here

All 3 paragraphs use the same line-height, but different font-size. Note that they roughly line up, but in the center of the line--not along their baselines.

EDIT:

If the question is actually about font-size vs. the rendered size of the glyph on screen, that's an entirely different topic. See this answer here for a visual explanation of that relation: What does the size of the font translate to exactly?

Improve this answer
8
  • Giving a font-size of 24px does not mean that the content ( I mean the text, say the largest letter M as an example ) will have a height of 24 px for all the font faces. With times-new roman if i set line-height 24px and font-size 24px and give a background to the inline element i can see that the largest font has a 24 px height. But if i use another font face ( which supports latin extended characters ) and check 'Ğ' for example its height is bigger than 24 px. The question's main concern was this.
    – ratata
    Commented Jan 30, 2015 at 20:05
  • 1
    @ratata right. Font-size pertains to the invisible bounding box the font uses...which can be anything, really.
    – DA01
    Commented Jan 30, 2015 at 20:29
  • Yes. I had accepted user2598's answer as true because. He has written '... use the em-box or the maximum ascender and descender of the font...' which was very important for me.
    – ratata
    Commented Jan 30, 2015 at 20:42
  • 1
    I think you're actually asking "What is the relationship between CSS font-size and the actual, physical size of the letterforms?". Does that sound correct? (If so, yes, that's an entirely different question)
    – DA01
    Commented Jan 30, 2015 at 21:02
  • 1
    @ratata FYI, I updated my answer with some info regarding that as well. Hope it helps.
    – DA01
    Commented Jan 30, 2015 at 21:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.