Handling different vertical base alignment based on font-family
Hello, I noticed that when changing my font-family on my site, the vertical base position of the font seems to shift, i.e. it's different between each font-family. I'm trying to align it though, so that for example on my header it's in the vertical middle. Do I just alter margins/paddings here or is there a more elegant / robust way of doing it?
2 Replies
Oh boy yeah this is a can of worms. If you're dealing with suboptimal font, the best dirty fix you can do is add a
transform: translateY(2px) or something. At work we also have a font that doesn't properly align so we have to manually shift it every time :/
Not elegant but if you just have to get the job done... Main issue is this easily breaks when you have more than one line, but if you just want to align a button label or something.. it'll workSo this is a typography thing and it's…complicated.
With typography, fonts have a variety of ruler line that they use:
* Baseline: The baseline is where the bottom of letters lies—like a line in a composition notebook
* Descender: The descender is the part of a letter that falls below the baseline. The bottom part of a lowercase “y” is the descender
* X-height: The x-height represents the midway point of a typeface’s total length. Most lowercase letters reach as high as the x-height
* Ascender: The part of a lowercase letter that reaches above the x-height is the ascender
* Cap height: The cap height is the length of a typeface’s uppercase letters
Each font has different sizes for each. So when you have multiple fonts/typefaces on page you have issues aligning them correctly b/c CSS aligns them internally based on their various baselines, ascenders, and descenders. That's why it's nearly impossible to properly center text inside, say, a button. The ascender/descender cause it to be "mis-aligned" if there are no letters that ascend or descend!
So really, the only thing you can do is get Close Enough™ 🤷
