CSS font metrics in detail

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"

Links

• The definitive guide to the inline formatting model Show archive.org snapshot
• Font Inspector Show archive.org snapshot , displaying font metrics
• How to vertically align a checkbox with the first line of a multi-line label Show archive.org snapshot