22

Does vertical rhythm actually make text more legible? Has it been proven?

11 months ago from , Nostalgia Maker

There's lots of things that are proven help type be more legible - good size, good line spacing, line width just right, good contrast, etc.

But then there's this idea of Vertical Rhythm - that all vertical units on your page should also fit within a grid. Is there any proof that this actually makes designs better, compared to just good spacing and structure? Could it be noticed in a blind test, does it actually provide an intangible nicety for viewers? Or is it just BS like the golden ratio?

I tried searching google scholar but couldn't find anything - any ideas?

25 comments

  • stephen fstephen f, 11 months ago

    "Or is it just BS like the golden ratio?"

    Image title

    36 points
  • Numecca .Numecca ., 11 months ago

    Dude, I don't use any of this bullshit and my garbage looks like crap.

    12 points
  • Adam WAdam W, 11 months ago

    As you mentioned, good vertical rhythm emerges as a result of appropriate spacing. But just to restate for context—just as text is difficult to read when the measure is too long, dense/long paragraphs of text are difficult to read as well. It is a matter of perceiving figure (text) from ground (page). You need adequate spacing to properly make that distinction so the reader can more easily keep their place when reading.

    To answer your question though, just like the golden ratio, the baseline grid is just a tool. Use it or don't, it's just one way of establishing good spacing and structure. Whether the reader can perceive that a baseline grid was used or not depends on how familiar they are with how typography is designed or treated using a baseline grid. If familiarity exists, then sure, they might notice and appreciate it. If not, then it’s not likely it will be noticed. The baseline grid by itself does not have properties that exist outside of the person perceiving it, but as a means to making text more readable, it is certainly valuable.

    10 points
  • Gavin McFarlandGavin McFarland, 11 months ago

    Whoa whoa whoa, the golden ratio is BS? :P

    7 points
    • Vincent Jouty, 11 months ago

      No way man! They said you can find this pattern on a pine cone, that can't be BS... Wait!? Are pine cones BS?

      2 points
    • Tim SilvaTim Silva, 11 months ago

      Haha, I haven't thought about the golden ratio for years. Something about it always seemed off to me. In retrospect, it's clearly an extraordinary claim and after digging around for about 10 minutes, I can't seem to find an extraordinary evidence that it makes a measurable difference... Anyways, I've gotta run! I'm late for my astrology and palm reading session.

      4 points
      • Eliot Slevin, 11 months ago

        'Guys I figured out beauty it's this one exact number gg'

        2 points
        • Tim SilvaTim Silva, 11 months ago

          Classic haha. I ran some calculations and confirmed that .512367 = likes on Instagram + Dribbble, and upvotes on DN!

          I grew up watching the "Penn & Teller: Bullshit!" series. If you've never seen or heard of it before, you maybe enjoy it. ;) They poke fun at this stuff constantly and underscored the importance of having a skeptical mind.

          0 points
  • . h, 11 months ago

    as stated in the link that you provided:

    "Horizontal rhythm mostly impacts the legibility, while vertical rhythm impacts the readability of the text and establishes a sense of visual hierarchy."

    and based on this statement for the differences between legibility and readibility: https://english.stackexchange.com/questions/58251/readable-vs-legible

    So yeah, I haven't found study about vertical rhythm and legibility of a text too. But I'm sure that vertical rhythm will affect the readibility of text. A paragraph with good vertical rhythm surely will easier to read than a very compact or a very 'spacey' one.

    2 points
  • Sak O.Sak O., 11 months ago

    I think there's some confusion here: "vertical rhythm" isn't a very helpful concept and it isn't the same thing as a baseline grid — and the claim that "Horizontal rhythm mostly impacts the legibility, while vertical rhythm impacts the readability of the text and establishes a sense of visual hierarchy" is just not true and is actually quite misleading.

    This guy has some decent advice on web typography specifically but gets a few basic things wrong too.

    For a basic intro into typography I would suggest The Elements of Typographic Style by Robert Bringhurst (just bare in mind that not everything in it applies to web typography, but its a good starting point) and on grids I would read Grid Systems in Graphic Design by Josef Müller-Brockmann.

    Personally when designing for web I use a column grid but don't think a baseline grid is worth the hassle and would just over complicate things.

    2 points
  • Johannes Neumeier, 11 months ago

    Here is a simple fact that refutes the idea altogether: All typefaces render at different height and different line height. Different as in arbitrarily decided by the type designer.

    Imgur

    As type designer you define how many units the font em has (a common one is 1000), and you can position the actual vectors of the letters anywhere in that vertical space (the background light square in the image). Furthermore, you can set how much line space should be reserved for the font, i.e. to render tall accents and the like without clipping (the green lines in the image), and to include what you feel is a good baseline measure for line gap when stacking lines of type without leading one on top of the other.

    Now, you can set a font to 20px (or 1em, it really matters not, since they all are dependent on the font’s internal “1em space”) and the line height to be a multiple of that, all that is fine and good. But fonts render at different glyph body height and line gap, due to the aforementioned facts. For example, try both Zapfino and Helvetica at, say, 20px size and 30px line-height — very different affair, not just in style but in terms of vertical rhythm.

    Alas advice like given in the article is circumstantial at best, outright nonsense at worst. Even the idea of splitting vertical rhythm into multiples does not hold up, since fonts, in effect, define their own base spacing for line height, so to say.

    What rubs me wrong the most is not just this relentless need to formula-ize design, but the argument for apparent invalidity of judging by your eyes and impression. Every font, every design and every typographic mood might call for its unique vertical space treatment. Be a professional, use your empirical judgement.

    2 points
    • Adam WAdam W, 11 months ago

      I'm not seeing how this refutes the idea altogether. While typefaces broadly do render at varying visual heights and sizes for the same specified type size, type generally doesn't change for the user or viewer in the middle of reading something. This article provides a thoughtful example of how to establish vertical rhythm using a specific typeface within a specific context. As a designer, it is on you to make these principles work in context of your own design (if you decide they are appropriate for your design problem).

      The point of all of this is that vertical rhythm is important to be mindful of when designing for optimal readability. To do that consistently across a website requires some level of standardization, especially when the same content has to accommodate numerous screen sizes. There is a place for optical judgment, and a place for standardization. Don't be so dismissive of there being a "right" way of approaching the problem. Be a professional, use your empirical judgement.

      0 points
      • Johannes Neumeier, 11 months ago

        Be a professional, use your empirical judgement.

        Touché. Yet this is discussion, not design. Sure, following some guideline might be better than following no guideline. At the same time you will get hundreds of designers reading articles like this over and over again and eventually it will dogmatize their design. Digital product design of the day is, in part due to coding and design frameworks or rationalizations like this, utterly boring and repetitive.

        My main argument, though, was that line height and font size are inherently arbitrary. Not in the design, but in the typefaces, as designed by the type designer. Giving advise based on the assumption that you can rely on line height or em height simply is an approximation at best.

        0 points
  • Steven CavinsSteven Cavins, 11 months ago

    It's been a while since I've read it, but the book The Shallows: What the Internet Is Doing to Our Brains had some interesting research about reading comprehension (quantifiable) with respect to the medium.

    0 points
  • Simone Phillips, 11 months ago

    I read a study on NN/g about how aligning images and text in a zig-zag format effects legibility in vertical layouts. Is this the kind of thing you're looking for? https://www.nngroup.com/articles/zigzag-page-layout/

    0 points
  • Marcel Yves, 11 months ago

    Listen all jokes aside - stop relying on random ding dongs who frankly don't seem to be qualified to be writing typography manuals and learn from actual typographers. Start with TYPOGRAPHIE (1967) by Emil Ruder.

    And if you don't care to learn then please don't ask questions stemming from people who themselves seem to have reiterated a typography for dummies course.

    People have spent centuries learning the intricacies of type, please don't disrespect them like this. Thank you.

    -1 points
    • Antonio Carusone, 11 months ago

      I would read up on some text written by some of the best typographers in our field. Marcel's suggestion above is a great start, also check out The Elements of Typographic Style by Robert Bringhurst. Those should get you started.

      In short, it's not BS. Like Marcel mentioned, the proof is hundreds of years of use and learnings.

      5 points
  • Zsolt Kacso, 11 months ago

    I think it's a nice touch, don't necessarily need proof that it's better by any metric.

    -1 points