CODEWITHSUNDEEP
csstypographytypeface
Ilja
Ilja

Reputation: 46547

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

Upvotes: 1

Views: 1842

Answers (1)

Ganeshkumar K
Ganeshkumar K

Reputation: 535

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

Upvotes: 1

Related Questions