vdo


Line-height can be set as a value in pixels (ie, '20px') or a unitless value (ie. '1'); the default is 'normal'. But what is normal? It is often written that Line-Height should be 1, or 1.2, amd the CSS spec is unclear on this. Unitless line-height is font-size relative, but the problem is that font-size: 100px behaves differently across font-families, so is line-height always the same or is it different? Is it really between 1 and 1.2? What are the implications regarding line-height and vertical-align?

Font-size: 100px does not create elements with 100px height I’ve measured and found these values: Helvetica: 115px, Gruppo: 97px and Catamaran: 164px.

c./.images/00-0-Copr_2019-vdo.pngc


When a <p> element is rendered on screen, it can be composed of many lines, each line is made up of one or many elements (HTML tags, text) and is called a 'line-box'. The height of a line-box is based on its children’s largest height.

vdo

Deep dive CSS: font metrics, line-height and vertical-align

  1. inline formatting context is really hard to understand
  2. all inline elements have 2 height:
    • the content-area (based on font metrics)
    • the virtual-area (line-height)
    • none of these 2 heights can be visualize with no doubt. (if you're a devtools developer and want to work on this, it could be awesome)
  3. line-height: normal is based on font metrics
  4. line-height: n may create a virtual-area smaller than content-area
  5. vertical-align is not very reliable
  6. a line-box’s height is computed based on its children’s line-height and vertical-align properties
  7. we cannot easily get/set font metrics with CSS



vdo: Deep dive CSS: font metrics, line-height and vertical-align
https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align