Rectangle 27 0

css3 Fix custom font line height with CSS?


Did you try fontsquirrel? There are some options with different results.

Fontsquirrel has a option to modify x-height, except font from fontshop are protected ..

I have had that problem aswell in past, even different browsers gave different line heights! I think it happens when using the webfont generator and can only be fixed with using different line-height as far as I know.

Note
Rectangle 27 0

css3 Fix custom font line height with CSS?


I think Chrome just doesn't know how to calculate the line-height until it's rendered the custom font.

In Chrome I've found that if you are using a font-face declaration. You can solve the line-height issue with either a style="" call i the HTML, or simply declaring the line-height AFTER the font declaration in your CSS.

Note
Rectangle 27 0

css3 Fix custom font line height with CSS?


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

Note
Rectangle 27 0

css3 Fix custom font line height with CSS?


<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>

For buttons, the padding method probably works well enough. However, in general, if a font causes problems like this, a different font should be chosen.

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.

That's working, but I'm looking for a scalable way to change this accross all my element (button/input), I can't put span in every button, and that won't fix input align.

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).

The issue here is not line height but vertical placement of glyphs, in particular the location of the text baseline. Thats 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 lets assume its 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.

Note
Rectangle 27 0

css3 Fix custom font line height with CSS?


p {

    vertical-align: text-bottom;
    line-height: 1.5;

}

I've tried but that didn't change anything, I can't really put a codepen up as this font is protected

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.

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.

Note