Grow your CSS skills. Land your dream job.

Imbalanced line-height

  • # June 14, 2013 at 9:06 am

    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.

    Thanks

    # June 14, 2013 at 10:13 am

    @chrisburton for advice but the issue would seem to be a ‘bad’ font.

    http://www.brightlemon.com/blog/typography-01-font-basics-what-is-x-height-leading-kerning-tracking-ascender-de-0

    For your specific question, I don’t think so…it’s not a css ‘property’ of the font, it’s part of basic glyph.

    # June 14, 2013 at 12:37 pm

    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.

    # June 14, 2013 at 5:29 pm

    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: )

    # June 14, 2013 at 7:49 pm

    @iknowdavehouse @Paulie_D I can’t really help without seeing the site or the fonts.

    > 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.

    # June 19, 2013 at 5:36 am

    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!

    # June 19, 2013 at 5:50 am

    @iknowdavehouse
    add this line in your css “margin:0; padding:0; line-height:0;”.
    line-height depended of you. because some time heading use margin and padding default of code.

    so try this.

    # June 19, 2013 at 6:01 am

    Thanks, it was definitely the line-height, I’d already re-set the margins / padding and swapped out the font to double check. Works as expected with any other font!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".