csstypographytypeface

How to deal with extra whitespace that comes with custom fonts?


I am using custom font-face in my web app and as demonstrated by image bellow it comes with this extra whitespace underneath it which makes alignment a bit tricky in elements like buttons for example.

I tried playing with different line heights, but it didn't change it. I believe space below it is needed for some ligatures of this typeface which is fine. But can I add extra space above as well to sort of match it all and make alignment easier? Preferably with css.

enter image description here


Solution

  • You can use line-height property in css to either reduce the height vertically.

    similarly, you can use padding-top to add space on top of the text