Menu
I can't figure out why letters that drop below the line (like g and y) in my paragraph are getting cut off. I tried setting the line height higher but it still cut them off. I played with font-size in px, pt, and em but still no luck. Now when I set the font-size much larger (like 3.0em) the problem disappears. But I need the font to be about this size.
Here is the link: http://sportegy.com/font-test/font-test.html
You'll need to use the link and see the .ttf font I have in order to really see the problem. However, I'll paste my HTML here too.
<html>
<head>
<style>
@font-face {
font-family: lib-font;
src: url('css/LiberationSansNarrow-Regular.ttf');
}
@font-face {
font-family: lib-bold;
src: url('css/LiberationSansNarrow-Bold.ttf');
}
</style>
</head>
<body>
<span style='font-family: lib-font;color: #232322;font-size: 1.0em;'>
The quick brown foxy was jumping over the green doggy.<br/>
The quick brown foxy was jumping over the green doggy.<br/>
The quick brown foxy was jumping over the green doggy.<br/>
The quick brown foxy was jumping over the green doggy.<br/>
The quick brown foxy was jumping over the green doggy.
</span>
573
Try
line-height: normal;
Seemed to fix a few people's problems.
84
Try increasing the line-height to something like line-height: 1.2;
If you bump the font size up to 1.1em, it doesn't get cut off.
I suggest using a CSS reset like Normalize.
38
I can only reproduce it at exactly 16px (1em on my browser), so I suspect a font issue like the one described here and here.
You could use the font as-is and avoid 16px, fix the font metrics yourself (as described in the links), email the font creator, or choose a different font. Lots of good free fonts out there, all the best :)
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
