CODEWITHSUNDEEP
font-facewebfontscss
Thibaut
Thibaut

Reputation: 182

Webfont (@font-face) line-height issue

I often embed webfont (@font-face) in sites that I develop and I have never encountered a major problem until today.

In fact, I feel there is a big issue with the line-height, I'm not extremely good at English so I'll try to illustrate it with pictures. I already contact the support from fontshop.com (where the font was bought) but they do not seem to understand / solve the problem.

What we had before with standard desktop font (= rendering is good for us):

What we had with the font-face (no change in CSS stylesheet):

Here is the CSS:

#content h1 {
    background:#000000;
    color:#FFFFFF;
    font-family:"DINPro-Bold","Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
    font-size:35px;
    line-height:30px;
    padding:10px;
    text-transform:uppercase;
}

Upvotes: 16

Views: 10485

Answers (7)

ElBrm
ElBrm

Reputation: 344

This worked for me:

Generate the webfont at Font Squirrel. After uploading the fonts select 'Expert', scroll down and check the checkbox 'X-height Matching'. This resizes the height to match the x-height.

Upvotes: 2

Sulibrat
Sulibrat

Reputation: 151

If you have problem with line-height of your webfont (especially if font suppose to be big in your project) try this: close your font in div or other block element and set "overflow" to "hidden". Div will have exact height of your font so any additional space will be cut off.

Upvotes: 0

Casualty
Casualty

Reputation: 43

Try position: relative; paddint-top: 5px; padding-bottom: 0px;

Upvotes: -1

Bryan Corey
Bryan Corey

Reputation: 760

That's not the same font. The shape of the O and the curvature of the arm on the R give it away, which means the fallback fonts are being used, likely due to @font-face not loading properly. Different fonts will have different default spacing, as stated already, which would also lead you to believe it's a line-height issue.

Try making your fallback fonts something totally obvious, like:

font-family:"DINPro-Bold",serif;

Upvotes: 5

Joker
Joker

Reputation: 38

Try adding "position: relative; top: 5px;" to the "h1" tag

Upvotes: -1

Adam Privette
Adam Privette

Reputation: 93

Usually font websites will have ways to configure the webfont package when you download it. I buy all my fonts from myfonts.com and under the advanced settings there are options for line-height adjustments. Try downloading the font using native line-height adjustments if this option is available. If not, try uploading the font to fontsquirrel's online font generator and upload the new version.

Upvotes: 5

cih
cih

Reputation: 1980

Line height according to wikipedia

In typography, leading (rhymes with heading) refers to the amount of added vertical spacing between lines of type.

This can be achieved like this...

.class{ line-height: 1em; }

But if you are referring to the height of the letters then this is not something that can be adjusted. It is part of the font you have chosen to use.

Upvotes: -2

Related Questions