I recently purchased a couple of fonts for a website project and I've found that one in particular is not at all fun to work with. It's called Goodlife Sans and the problem I'm having results from a large amount of white space included above the font's characters i.e. the font takes up more vertical space than the glyphs themselves.
It's difficult to set vertical margins as I have to account for the extra space taken up by the font. Setting line-height: 1em helps a little, but the line height is measured from the very top of the font, meaning that if the text is set in a block element with overlow: hidden the bottoms of the letters are cropped off.
The following images show the height of the font by itself, and with the line-height hack. The background of the block element is coloured red for clarity.
https://i.sstatic.net/VAjKz.png
https://i.sstatic.net/ffL9l.png
Edit: Here's the code
@import url("//hello.myfonts.net/count/2e978a");
@font-face {
font-family: "GoodlifeSans";
src: url("fonts/2E978A_0_0.eot");
src: url("fonts/2E978A_0_0.eot?#iefix") format("embedded-opentype"),
url("fonts/2E978A_0_0.woff2") format("woff2"),
url("fonts/2E978A_0_0.woff") format("woff"),
url("fonts/2E978A_0_0.ttf") format("truetype");
}
p {
font-family: "Goodlifesans";
font-size: 344%;
background: red;
text-align: center;
/*line-height: 1em;*/
margin: 0;
padding: 0;
}
body {
margin: 10px;
font-size: 80%;
}
<body>
<p>This is the test title text</p>
</body>
Short of actually modifying the font itself (which I believe licencing prevents me from doing anyway) is there a elegant solution to this problem? I really don't want to have to include a parent element with negative margin every time I use this font.
In the end the guys at HDV Fonts sent me their copies of the font files which fixed the issue. The files from myfonts.com apparently contain strange vertical metrics, which explains what I was seeing.