Search code examples
cssfontsfont-facewebfonts

Fix custom font line-height with CSS

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:

enter image description here

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

Thank you.

Solution

  • In the end, I've end up manually fixing the font myself, using help from this answer:

    UIButton custom font vertical alignment