Must be something basic I’m missing here. I thought that font-weight:bold should not change how much vertical space the text takes. Especially when the line-height is set to be higher than the font-size.
http://jsfiddle.net/Arkkimaagi/7xAyy/
On my OSX chrome those three text heights do not match. The second one with font-weight:bold is 1px higher than the rest. The third div is just an example of fixing the problem (poorly)
I’m trying to set the line-height to something specific (18px) here, to have “vertical rhythm”
My question is, how can I have bold and normal text both with same line-height as in the example?
[edit:]
here’s what I see on my mac
Also, here is what I ment by “vertical rhythm”: http://www.alistapart.com/articles/settingtypeontheweb
– the baseline grid is more visible in the example: http://www.alistapart.com/d/settingtypeontheweb/example_grid.html
It completely depends on the fonts you are using. Nothing about OSX or Chrome text rendering would ensure that two different fonts (and Helvetica-neue and Helvetica-neue-bold are two different fonts) would have the same vertical space even at the same font-size and line height.
Even though that is too much to ask you might think that two different fonts from the same family might be consistent, and usually they are, but sadly the two fonts you have chosen are not.