Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Imbalanced line-height

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #45529
    iknowdavehouse
    Participant

    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

    #138711
    Paulie_D
    Member

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

    #138725
    TheDoc
    Member

    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.

    #138756
    CrocoDillon
    Participant

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

    #138772
    chrisburton
    Participant

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

    #139285
    iknowdavehouse
    Participant

    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!

    #139286
    Sarfaraj
    Participant

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

    #139288
    iknowdavehouse
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.