Read more

CSS font metrics in detail

Dominik Schöler
February 22, 2017Software engineer at makandra GmbH

Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.

For example, line-height can be set as a length or a unitless value 1, but the default is normal. OK, but what normal is? We often read that it is (or should be) 1, or maybe 1.2, even the CSS spec is unclear on that point. We know that 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 different? Is it really between 1 and 1.2? And vertical-align, what are its implications regarding line-height?

Deep dive into a not-so-simple CSS mechanism…

The article also explains and visualizes the intricacies of CSS's vertical-align.

Some take-aways

  • Each HTML element is actually a stack of line-boxes. If you know the height of each line-box, you know the height of an element.
  • Browsers do their computation as if each line-box starts with a zero-width character (that the spec calls a strut)
  • vertical-align:middle is never really “at the middle”
  • An inline element has two different heights: its "content height" and its "line height"
Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show archive.org snapshot
Posted by Dominik Schöler to makandra dev (2017-02-22 09:31)