@font-face embedded font height troubles

Question

Hi all,

Having some trouble with the CSS alignment of text generated with @font-face. For some reason, there is a ton of extra space visible at the bottom of each letter, stretching the text's containing box too far downward.

If you inspect the text on this sample page, you can see what I mean.

Have googled and inspected a bunch of other pages, but this one's got me stumped. Any chance someone could help?

Thanks!

Answer 1

You are using <h2> tag there. for the h tags use the CSS style's margin and padding to remove those extra spaces.

<style>
h2 {
   margin:0;
   padding:0;
}
</style>

Answer 2

For starters, the computed line-height is 65px, so you could always define it to be 60px if you wanted.

However, most of that space is actually just required by the font you chose. Though you've converted it to uppercase with your CSS, the font still needs room to render characters that draw below the text's baseline. Try adding a comma to that header's text, and you'll see it's actually pretty huge and should fill up most of the empty space.

Answer 3

Hey Tim,

I also thought that would be the case, but I checked out some other sites with League Gothic embedded, they don't seem to have the issue.

Inspect the headlines on hugsformonsters.com, or snook.ca to see what I'm talking about.

Even when I adjust the line-heights, it still seems to want to distribute the space unevenly.