0

Experts,

I'm trying to create a heading with two different fonts while preserving the line-height. I'm specifying font-size and line-height for both fonts as 48px. What I'd like to understand is why the height of the heading element is 49px.

The problem is shown in the JS Bin below: http://jsbin.com/kelureroze/2/

Thanks in advance.

checkmate711
  • 3,301
  • 2
  • 35
  • 45
  • 3
    `height` != `line-height` - http://stackoverflow.com/questions/7616618/height-vs-line-height-styling – Cheery Oct 28 '14 at 00:00
  • Include relevant code *in the question itself*. Also make clear what your question is. Do you just want to know why some element has some height, or do you want to *achieve* some specific visual rendering? – Jukka K. Korpela Oct 28 '14 at 07:27

1 Answers1

2

The two fonts have slightly different font metrics, which means that the distance from the top of the inline-box to the baseline and from the baseline to the bottom of the inline-box is different for the two fonts.

The fonts are aligned by their baselines so the top and bottom of their inline-boxes are slightly offset with respect to each other.

Because the height of the h1 block is the height of its contained line-box and the line-box must be large enough to encompass both the inline-boxes from the upper of the two inline-box tops to the lower of the two inline-box bottoms, the total line height is slightly greater than the line-heights of either font.

If you stop the two fonts from being aligned on their baselines: e.g. h1 font { vertical-align:top; } you see that the height of the h1 drops to 48px.

See http://jsbin.com/hisihojozi/2/edit

Alohci
  • 78,296
  • 16
  • 112
  • 156