I’ve downloaded a couple of free web fonts from font squirrel recently… Some of my headings appeared to have extra top margins and they increased with the font size. I realised it was in fact a problem with line height.
Seeing as all these headings are all short / on one line I hadn’t addressed a specific line height as none of the content wrapped.
The more I looked in to this I realised that the font in question actually has about 3 times the space on the top than on the bottom so rather than being (0.5 font size)font size(0.5 font size) for example i have an imbalanced line height of something like (0.75 font size)font size(0.25 font size).
So my question is – can I target line-height top / bottom separately to compensate for this imbalance?
I appreciate the first answer will be “use a better font” but it’s quite specific / individual so if possible I want to keep it.
@chrisburton for advice but the issue would seem to be a ‘bad’ font.
For your specific question, I don’t think so…it’s not a css ‘property’ of the font, it’s part of basic glyph.
Some free web fonts have absolutely terrible line-heights and poor rendering.
> So my question is – can I target line-height top / bottom separately to compensate for this imbalance?
Not really. You can use a negative top margin, but that only helps on headers and should really be avoided.
> I appreciate the first answer will be “use a better font” but it’s quite specific / individual so if possible I want to keep it.
Unfortunately, that’s probably how you’re going to have to go about it. You might be able to contact the font creator and ask them to update the font for you. Or, if you’re comfortable, I believe you should be able to edit it on your own.
I think (as typographic newbie) it might be a font with a small x-height you’re referring to. With line-height the extra space always gets evenly divided (so space above font = space below font = (line-height – font-size) / 2). I’d go with top/bottom margins or relative positioning (disclaimer: might be bad advice D: )
> You might be able to contact the font creator and ask them to update the font for you. – @TheDoc
If it turns out to be the font, that’s a great suggestion. Now, they might not do it for free. Even if it was a mistake on their part.
> Or, if you’re comfortable, I believe you should be able to edit it on your own.
That depends on the EULA.
Thanks for the comments, sorry it took a few days to respond.
I’ve ended up using this font sparingly and addressing the issue manually. For the large “logo” header (will never wrap) I’ve used line-height: 0; so at least the block’s position doesn’t appear visually offset as it was before.
Luckily it’s a small personal site, otherwise I would have changed typeface. One of the main reasons for the original post was if this was something that you’ve seen happen regularly… thankfully it doesn’t look like it is!
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".