Vojtěch Vojtěch - 2 months ago 13
Less Question

Font "bottom-padding" is bigger than expected

I've recently bought

Proxima Nova
font for my project and I am having issue aligning it vertically. If I set all the margins, line-heights and padding exactly as with
Arial
, I don't get the same results and the font is misaligned. You can see the
Arial
is nicely centered and the
Proxima nova
's bottom padding is bigger than the top padding.

I suppose it is a problem with the font - the question is - how can I overcome the issue? Do I have to redo the font? Can I set up some css property to fix this?

I've created a page to demonstrate the issue:

http://fonts.knyt.tl/

enter image description here
Edit:

My question is - is there a way to globally "configure the font" to have the correct paddings so that I don't have to rewrite the whole css code once I decide to change the font? Or do I have to edit the font files to achieve this?

Answer

I thinks, its the problem with the font. The font you used, ie; 'proximanova' takes a little padding in its bottom. Either, u should adjust your padding as

padding: 10px 10px 8px 10px;

or change the 'font' file used.

Hope it helps.

Comments