Ask DN: Legibility and Line Height?

almost 7 years ago from , Head of Community & Content, zeroheight

Looking for some guidance/advice on a problem I have. With most of my projects I pretty consistently stick to a line height of 1.4em for legibility. However, on a project I'm working on at the moment I'm really struggling. 1.4 feels like it's too tight and is affecting the readability, whereas 1.99 (next up on the scale) feels like it's way too loose.

Here's two screenshots:



  • Rakesh KRakesh K, almost 7 years ago

    Why not be flexible and try something between 1.4 and 1.99? Readability is too important to let a set scale dictate the line height.

    4 points
    • Daniel EdenDaniel Eden, almost 7 years ago

      +1 to this. Scales and systems are there as guidelines, not strict rules. You should feel free to break the scale to make this right.

      That said, 1.9 doesn’t look too bad to me. The thing that sticks out to me is the margin between paragraphs. The margin should be at least as tall as the line-height.

      2 points
  • Luke Murphy, almost 7 years ago

    Wondering whether it's Museo Slab that's the culprit... It's supposed to be good for body text, but it seems to just be causing me problems. Looks right (visually), but doesn't read well.

    4 points
    • Eliot SlevinEliot Slevin, almost 7 years ago

      My suggestion - switch to Museo Sans if possible, line height somewhere in between (1.7? Is there a reason why you're stuck to these two heights?) and as mentioned upping that paragraph spacing.

      Paragraph width is perfect :)

      1 point
    • Brian A.Brian A., almost 7 years ago (edited almost 7 years ago )

      This was my thought as well. I haven't come across too many slab serifs that read well in body copy, so maybe a sans (Museo Sans) would work well? If you're sticking with Museo, then I'd second what others are saying and go with the 1.99 line height.

      0 points
  • Caleb SylvestCaleb Sylvest, almost 7 years ago
    1. I would suggest not using a slab-serif for body copy, it's just too thick. Slab-serifs are typically for headline and larger sized type. Use either Museo or Museo Sans.

    2. I always suggest using unitless line-height values. So set line-height: 1.4; instead of line-height: 1.4em; or 20px etc. That way if you change the font-size of the type the line-height scales in relation to the font-size, instead of being stuck in an absolute dimension. I wrote about this a little bit on my blog, though the article is old and lacking some, but may be helpful: http://calebsylvest.com/line-height-for-all/

    1 point
    • Luke Murphy, almost 7 years ago

      Cheers, Caleb. I read somewhere that slab serifs are apparently good for legibility, which is why I thought I'd give it a go, but I haven't found anything in practice that proves this... Going to change the typeface.

      On line-height, em is a relative measure as well... it's practically the same as using 1.4 or 140%. There are really minor differences, but I'd prefer consistency considering the payoff isn't great.

      0 points
  • Guillaume BroderGuillaume Broder, almost 7 years ago

    Look at gridlover ;)

    1 point
  • Yasmin AndreaYasmin Andrea, almost 7 years ago

    I personally feel that the 1.99 is more legible, but maybe you could slightly increase the spacing between paragraphs?

    1 point
  • Daniel KorpaiDaniel Korpai, almost 7 years ago

    Ideally the line height should be between 120 - 145 % of the font size, but there are some cases (some fonts) where this amount of line height simply not enough.

    I recommend you to try a line height value around 1.6 - 1.65, and see how is that work for you :)

    0 points
  • Ryan Hicks, almost 7 years ago

    I typically stick to 1.5 as a default and often use 1.6.

    0 points