: Is line height related to the typeface used in css? 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

@Shelley591

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:
jsbin.com/henayixezi/1/


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?

Vote Up Vote Down

@Gretchen549

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.

Vote Up Vote Down

@Caterina889

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

Vote Up Vote Down

@Sent7350415

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

Vote Up Vote Down