After purchasing a few fonts for my website project, I encountered an issue with one font in particular called Goodlife Sans. The problem stems from the excessive white space above the font's characters, causing it to take up more vertical space than necessary.
Adjusting the vertical margins has proven challenging due to this extra space. While setting line-height: 1em provides some relief, the line height is measured from the font's top, leading to the cropping of letters' bottoms when set within a block element with overflow: hidden.
The images below illustrate the font's height on its own and with the line-height workaround, with the block element highlighted in 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>
Without modifying the font itself, which may be prohibited by licensing terms, I'm seeking an elegant solution to this issue. Avoiding the need for a parent element with a negative margin every time I use this font would be ideal.