Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Different line-height on iphone using font-face

To vertically center my text in a box I use the same line-height as the height of the box. It works perfect on the iphone for system fonts. But when I use @font-face I have to ad at least 3px to the line-height for the iphone or otherwise the text isn't vertically centered anymore (it's up or 3px).

Does anybody know why?

like image 902
Peter Kulinski Avatar asked Jun 19 '11 20:06

Peter Kulinski


People also ask

Should line height be same as font size?

While there is no perfect line height, a good rule of thumb is to set it at approximately 150% of the font size. While there is no perfect line height, a good rule of thumb is to set it at approximately 150% of the font size.

How do you calculate line height from font size?

For the optimal readability and accessibility, you should go with140 – 180% line height (this is the space around a line of text). This means if your font size is 16pt, your line height should be at least 16 x 1.4 = 22.4pt (140%), or 16 x1. 8= 28.8pt (180%) maximum value.

What is font line height?

Line height is the vertical distance between two lines of type, measured from the baseline of one line of type to the baseline of the next. Traditionally, in metal type, this was the combined measurement of the font size and the strips of lead that were inserted between each row (called “leading”) of type.

Are leading and line height the same thing?

Leading, a.k.a. line-height in digital circles, is the space between baselines in a block of text. The nuts and bolts: The gap between adjacent lines of type in typography is known as leading. In CSS, the line-height property specifies the amount of space between inline elements.


1 Answers

Have you tried adding to the CSS:

myel {
  -webkit-text-size-adjust: none;
}
like image 106
David Kaneda Avatar answered Sep 24 '22 15:09

David Kaneda