Grow your CSS skills. Land your dream job.

line height problems

  • # April 1, 2013 at 12:20 pm

    Hello;

    I am trying to test some line heights and for some reason, it is not working. I even went to the extreme of setting to 1px and it is not working. I have included a link with the css insiude the html for easier reading and any help would greatly be appreciated.

    http://www.pepelepew1962.x10.mx/corners.html

    # April 1, 2013 at 12:57 pm

    Perhaps you could define what the ‘problems’ are.

    # April 1, 2013 at 12:59 pm

    Ok, from what I understand, line height is the distance from the top of 1 line to the top of the next line. With a line height of 1px, the text should practically be overwriting itself. Or ???

    # April 1, 2013 at 1:07 pm

    The line height can’t affect the actual height of the text…just the space around it….usually.

    Again, my question is…what is the problem?

    # April 1, 2013 at 1:23 pm

    The problem is I need to drink more to understand this. Is this true … 2 lines of text, same 16px, with a line height of 1px would practically overwrite themselves?

    As for my problem … I want the “XXX” part to be large, say H1 size, with the “TITLE” smaller, say h3, but tucked underneath with very little line space between them. I could make an image and add it to the page if my explanation sux.

    # April 1, 2013 at 1:23 pm

    @pepe_lepew, `line-height` defines the distance between multiple lines.. see http://codepen.io/ChrisPlz/pen/ecmiq

    Your sample was working properly, each line is only 1pt as you defined, but when you only have 1 line, it doesn’t do much.

    **Edit**: you could accomplish what you’re after by using a negative bottom margin on the `h1` tag.

    # April 1, 2013 at 3:07 pm

    Okay, that makes sense … I needed more text to show it was working properly. I guess the problem is more the distance between paragraphs in this case. I have a temp fix that I can at least play with. THANK YOU !!!

    # April 1, 2013 at 9:33 pm

    Also, a good practice is a line height of x1.5 so a font-size of 20px should get a line-height of:

    20 * 1.5 = 30px

    Here’s a cheat sheet for common paragraph font sizes:

    **font-size / line-height (in pixels):**

    10 / 15

    12 / 18

    14 / 21

    16 / 24

    18 / 27

    I should mention that those line-heights are sometimes +/- 1px … sometimes, depending on the font, a 14px font will look good with 20 instead of 21, or 22 instead of 21. You’ll have to experiment.

    Hope that helps.

    # April 1, 2013 at 9:45 pm

    Keep in mind, creating a fixed line-height of 1.5x the font-size won’t always look appropriate. It is more visual than set with calculation.

    @ChrisP

    > Edit: you could accomplish what you’re after by using a negative bottom margin on the h1 tag.

    Or set a smaller line-height to the h1.

    # April 1, 2013 at 10:00 pm

    @chrisburton is correct. You’d have to specify line-height for elements that were always going to be the same font size. You couldn’t do, say:

    body {line-height: 24px;}

    because if you did, you’d be incorrectly spacing all the lines whose font sizes weren’t 16px (per my little cheat sheet) and that would be silly.

    p.main {line-height: 24px;}
    p.footer {line-height: 15px;}
    p.blockquote {line-height-21px;}

    Something like that ^ would be better. Would you agree @chrisburton?

    # April 1, 2013 at 10:24 pm

    It depends on how the font renders, honestly. I couldn’t exactly say with your example unless I have a visual reference.

    Plus, some people use 1.4x the font-size, some use 1.8x. It all depends visually. And I’m not a firm believer when it comes to baseline grids on the web.

    # April 1, 2013 at 10:30 pm

    > I should mention that those line-heights are sometimes +/- 1px … sometimes, depending on the font, a 14px font will look good with 20 instead of 21, or 22 instead of 21. You’ll have to experiment.

    Yes, I agree.

    # April 2, 2013 at 9:36 am

    @chrisburton, true, but I guess it really depends on the look he’s going for, because setting a lower line-height on the h1 tag also moves the h1 tag higher up the page.

    Test case: http://codepen.io/ChrisPlz/pen/gJnht

    # April 2, 2013 at 11:22 am

    Which you can, in return, use a positive margin to bring it back down. Doesn’t negative margins cause inconsistencies in some browsers?

    # April 2, 2013 at 12:05 pm

    No browser inconsistencies that I’m aware of..but I could be wrong

    http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

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