Fix Custom Font Line-Height with CSS

Fix custom font line-height with CSS

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

UIButton custom font vertical alignment

Fixing font vertical height issue for multiple fonts

Try using the line-height attribute.

button {
  line-height:26px;
  vertical-align:middle;
}

I set the body font-size to 16px to make sure both font families have the same size - depending on the browser 1em might be different - and removed the vertical padding from the buttons and used a line-height of +10px the body font size to get the same result.

Bonus tip (edited): line-height cannot should not be used with input elements, just use height there instead - details after the fiddle.

https://jsfiddle.net/5j4L2tpj/

The reason is because in some browsers - Safari for iOS for example - the vertical alignment of text is messed up. Simple height property works as expected, perfectly aligning the text vertically - vertical padding not required in this case. To sum up, just use height on inputs, without line-height or vertical padding and get the job done as expected an all browsers/devices.

PS You had a typo for the Arial font family.

Fix custom font line-height with CSS

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

UIButton custom font vertical alignment

@font-face and line-height issue

In short, it's not an issue with either. They're behaving exactly how they should be. See your blue background? That's your line-height. Line-height doesn't affect the font itself, but rather the spacing of the lines of the text.

Some fonts are different sizes even when set to the same font-size. It's the way the glyphs are rendered. If you want your text larger, increase the font size. If you want fallbacks to be the same size, you can use similarly-sized fonts (look up "font stack generators" for help on this), or check out the CSS3 font-size-adjust property (do note that it is CSS3, so you'll want to double-check support of it).

Line Spacing for Individual Fonts

You can implement font-family with line-height in one class. I mean something like this:

HTML:

 <div class="lato-font">Text</div>
 <div class="monospace-font">Text</div>

CSS:

.lato-font {
    font-family: Lato, sans-serif;
    line-height: 1.6;
}
.monospace-font {
    font-family: monospace, serif;
    line-height: 1.6;
}

In this case you can set custom line-height for each font.

---

Related Topics