@ font-face and line-height

Question

The image below displays the result for:

div.test { background: #00F; font-size: 50px; line-height: 50px; color: #FFF; margin: 50px 0; font-family: Wiesbaden; } 

One using Wiesbaden (which is a font) and the other without a font. font-face seems to ignore the line-height property.

Is this a problem with the font or font?

Answer 1

In short, this is not a problem either. They behave exactly as they should be. Look at your blue background? This is your line-height. The line height does not affect the font itself, but the distance between lines of text.

Some fonts have different sizes, even if they are set to the same font-size . This is a way to display glyphs. If you want to increase your text, increase the font size. If you want the backups to be the same size, you can use fonts of the same size (look for "font stack generators" for help on this) or look at the CSS3 font-size-adjust property (note that this is CSS3, so you'll want double check its support).

Answer 2

The line-height determines only the vertical distance between the beginning of one line and the beginning of the next. If you typed something that took two lines, the beginning of the second line should be in the same vertical position using any font.

It looks like your font looks like "font-size: 50px". If you want, you can increase the font-size by keeping line-height: 50px to fix it.

Answer 3

I had a similar problem, but I used a Cufon script instead of a font to avoid browser issues. To solve my linear height problem, I changed the doctype from transitional to strict. Try it.

Answer 4

The following script illustrates the differences between the four fonts (3 are very common fonts found on Macs, PCs, etc.). One of them is the Google font. Regardless, 4 fonts - four different results. If the design will be heavily dependent on a “non-standard” font, make sure that the backups did not blow it all up.

Pay particular attention to differences in:

• upper interval between capital Q and its parental border
• different heights xx (especially lowercase versus capital)
• lowercase descender G (some of them really come out of their Parent)

_http: //jsfiddle.net/suK2U/