0

font-size sets the font height.

Font height is measured or specified by the height of a line, which is the full height required to display the gamut of characters, including those that dip below the line, like j, and raised elements (accents on capitals, for instance) like Ê.

See How is font size calculated?

So a font with long descenders and ascenders will look smaller than a font with the same font-size with short descenders and ascenders.

If the line-height is set to 1em, the line-height is presumably the same as the font-size. So a font-size: 50px with a line-height: 1em will have a line-height of 50px.

So why then are links around text bigger (have a greater height) than the font and a line-height of 1em?

See https://jsfiddle.net/fkv4qunm/

This screen grab shows text with a line-height of 1em with a green background. And links with a pink background. The height of the links is greater than the line-height / font-size. (And there is no padding or margins on the links)

enter image description here

UPDATE If the font-size is the complete height of all the fonts glyphs, ascenders and descenders, then what is determining the height of the links?

UPDATE 2 But from relooking at the screen grab the green line-height of 1em isn't containing the complete height of all the fonts glyphs – I think the 'j' would get cropped. This suggests that font-height isn't setting the height required to display all the characters (accents on capitals etc). But the size of the pink link is determined by the this height. So I'm now confused what font-size is measuring.

user2991837
  • 626
  • 1
  • 8
  • 17
  • This can help you? [https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-inline-block-elements](https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-inline-block-elements) – Sfili_81 Sep 03 '20 at 15:06
  • No, if `font-size` is `50px` and your `line-height` is `1` your line-height will indeed be `50px`, but if you `line-height` is set to `1.5` it would be equal to `75px`. – Simplicius Sep 03 '20 at 15:07
  • Simplicius - yes I think we all understand that – user2991837 Sep 03 '20 at 15:08
  • 1
    @user2991837. No, you said your font-size is determind by you line-height, its the other way around. `Font height is measured or specified by the height of a line`. – Simplicius Sep 03 '20 at 15:09
  • Simplicius - no I didn't – user2991837 Sep 03 '20 at 15:10
  • Sfili_81 Thank you, but it's a different issue to that – user2991837 Sep 03 '20 at 15:12
  • Simplicius - font size is the height between two invisible lines. These lines contain all the characters and glyphs of the font, from decenders like 'p' and ascenders like 'T'. Line-height in no way effects font-size. They are two different things – user2991837 Sep 03 '20 at 15:15
  • This question isn't really any different to the [one you asked before](https://stackoverflow.com/questions/63493930/) that I've already answered :) As I said there, this is to do with the fonts themselves and I [gave an answer to overcome the problem](https://stackoverflow.com/questions/63493930/#63494086). Asking the same question again isn't allowed so if this is something different then you need to be clear in about what specifically you're looking for. If you're asking about fonts and about how browsers render them etc, that might be off-topic for SO as its is not strictly coding-related. – FluffyKitten Sep 03 '20 at 17:04
  • Hi FluffyKitten. See update on opening post. – user2991837 Sep 03 '20 at 18:49
  • Hi FluffyKitten. I felt the other post was going off track. This is more a question of what font-size is measuring. Many thanks for your help – user2991837 Sep 03 '20 at 18:57
  • Does this answer your question? [font-size vs line-height vs actual height](https://stackoverflow.com/questions/41336177/font-size-vs-line-height-vs-actual-height) – FluffyKitten Sep 04 '20 at 19:58
  • No not really. It appears that different fonts measure the vertical height differently. And weirdly a font with the same font-size and line-height doesn't actually contain the descenders! See below. – user2991837 Sep 07 '20 at 13:54

2 Answers2

0

It is because anchor tag <a> is an inline element, inline elements size (width & height) is depended on the content size if you change your CSS code to this:

  a {
     display:block;
     width:200px;
     background-color: pink; 
     text-decoration: none;}

You will see the height of the <a> element will be the same as <li> element.

So, if you want to use an inline element inside of a block-level element you should change the size manually or use properties that can convert the type of the element.

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.

The height of a line box is determined by the rules given in the section on line height calculations.

Alireza
  • 9
  • 5
0

Many thanks to Alireza and FluffyKitten. I believe this is the answer:

Font-height is determined differently for different fonts. It is not always the height from the lowest glyph to the highest glyph (for example from the lowest part of the ascender 'p' to the highest part of an accent on a capital letter 'À').

https://www.w3.org/TR/CSS21/visudet.html#line-height

CSS assumes that every font has font metrics that specify a characteristic height above the baseline and a depth below it. In this section we use A to mean that height (for a given font at a given size) and D the depth. We also define AD = A + D, the distance from the top to the bottom. (See the note below for how to find A and D for TrueType and OpenType fonts.) Note that these are metrics of the font as a whole and need not correspond to the ascender and descender of any individual glyph.

These two screen grabs show how two different fonts deal with font-size differently. First example is Elena. Second example is Times New Roman.

enter image description here enter image description here

The first one has more vertical space above and below the letters. Whereas the font-size of the second font is closely determined by the lowest ascender and tallest descender.

Interesting point

If the line-height is set to 1 or 1em (making the line-height the same height as the font-size) then many letters bleed out of the font-size / line-height. Which is weird. See below. This is font-size 50px line-height: 50px and the descenders aren't included in the height of the font or line-height!!

enter image description here

enter image description here

However, the height of the inline <a> link continues to contain all the fonts glyphs. i.e. the height on an inline element is determined not by font-size (or line-height) but by the in-built font metrics.

It seems to me that there should be a consistent way to measure CSS font-size (from the lowest to highest glyph?). At the moment different fonts are using different in-built metrics and it's a mess.

user2991837
  • 626
  • 1
  • 8
  • 17