Fix custom font line-height with CSS

Question

I've been experiencing a strange issue when using a custom font on a new webapp i'm working on.

This custom font (FF DIN) Seem to have naturally vertical off-center line-height, which force me to put some padding-top hack to compensate the top space on element like button and input.

Example: the font in green (Helvetica Neue) is correctly align, where the custom font we use (FF DIN) is vertically off-center:

Is there any known way to fix that centering issue on the CSS naturally, someway to forces font baseline behavior?

Thank you.

Answer 1

The issue here is not line height but vertical placement of glyphs, in particular the location of the text baseline. That’s something that the font designer has decided on; the designer draws glyphs and places them in the em square, the conceptual device that has height equal to (or defined to be) the font height. In particular, the designer decides how much space there is below the baseline on one hand and above the height of uppercase letters on the other. Typically these spaces are equal, or almost equal, but they need not be. If they are substantially different, the intended use of the font is probably special and does not include usage like the one shown in the image. This suggests that the font choice should be reconsidered, but let’s assume it’s fixed.

There are several ways to deal with the problem. If there is too much space below the letters, reducing line-height makes it smaller, but it also affects the space above. Top padding helps in a sense, but it increases the total height occupied by the element. You can also play with vertical-align, but it affects the height of line boxes.

Probably the simplest approach is to use relative positioning, assuming that the problem deals with a one-liner text. Relative positioning just displaces content in a specified way, without affecting the layout otherwise. You would need a wrapper for this, i.e. an element that contains the text, so that you can displace just the text, not the background.

The following demo uses a Google font, Candal, which has a similar problem, but in a different direction: the baseline is too low. Modifications of this approach to meet the original problem should be obvious, but the exact amount of displacement needs to be determined empirically (or from information extracted from the font file using a font inspector). Naturally, the em unit should be used here, even if you set font size in pixels or points (so that the code does not need to be changed if the font size is changed some day).

<link href='http://fonts.googleapis.com/css?family=Candal' rel='stylesheet'>  <style>  div { font-family: Candal }  div { background: lightgreen; font-size: 200%}  </style>  <p>What we have got initially:  <div>BRAKE HOSE AND AIR CHAMBER</div>  <p>Reducing line height (even “setting solid”) does not really help:  <div style="line-height: 1">BRAKE HOSE AND AIR CHAMBER</div>  <p>But displacing the text upwards by 0.1em does:  <div><span style="position: relative; bottom: 0.1em">  BRAKE HOSE AND AIR CHAMBER</span></div>

Answer 2

This is something I've come across recently. The baseline on the fonts I was using for some reason did not line up, so I aligned to the bottom and increased the line height instead of adding padding.

This is how I solved my issue, if you have a link to a code pen I can check if it will work for you, or if another solution would be better.

p {      vertical-align: text-bottom;     line-height: 1.5;  }