How important is Vertical Rhythm to web design?

Hi all,

Over the past years, I've morphed from being an enterprise developer to someone who loves the agility and pace of web development/design. I'm a bit of a jack of all trades and definitely master of none but am learning all the time, which itself, is great fun.

I've developed a huge interest for Typography and have read loads of various aspects of web design and put it into practice on my weekend projects. One area that I'm convinced contributes to the overall feel of a web page, is adherence to vertical rhythm principles.

In my day job, I am currently responsible for getting a web site up within the large organisation where I work using resources located in a different region, who do not report into me. Therefore, I'm in that bizarrely weak position of being an "internal customer" (with the added twist that my department is not paying for their time).

I've felt that the designs that have come out of the internal team have been weak and I have articulated this by pointing to the vertical rhythm principle among other areas of constructive critique and referred them to further reading where I could. I even took what was delivered (in HTML), adapted using Google Developer Tools with good typographical best-practices as a guide with the view to performing a crude split test. I then took a screen shot of each and sent to a general list of contacts asking them to simply decide which they liked more without them needing to justify why.

The results were overwhelming in that ~82% preferred the modified design, which I conclude could increase the conversion rate on our site but here is the thing - the developer/design team responsible are still rejecting the value of Vertical Rhythm! More disappointingly, there seems little motivation to do any form of real split testing here to prove one way or the other.

Therefore, given my situation, what other resources would you lovely experts refer me to that I can utilise to help convince this team that spending time with a calculator calculating the ems is a worthwhile pursuit (along with any other good practice)? Are there studies that can prove this better than I can? Am I being too anal about this and this is truly not as important as I believe it to be?

Any advice would be gratefully received.

Regards,

Dan

boagworld

Hi Dan,

if I am honest I have mixed feelings about vertical rhythm. It is certainly an important design principle but I am not entirely convinced it works on the web. In print it is massively important but there are so many factors on a website that can screw up vertical rhythm that in my principle it is almost impossible to implement successfully.

I am also not convinced rhythm in isolation will make much difference to conversion. Other elements of design like layout, white space, grid, colour and imagery will be much more influential than vertical rhythm.

Anyway that is just my two cents. 

dbaggs

Thanks Paul,

Great to get your thoughts. I agree that it is a challenge to implement 100% due to various elements like images etc. and agree it is not a silver bullet.

Let me put the question another way in order for me to try and learn about alternatives: if it isn't the principles of vertical rhythm guiding the padding/margin around say a good old <li> element, then what influences the decision here? Is it purely down to subjective opinion? The specific placement on the specific page i.e. the surrounding elements etc.?

For further context, it is desired (quite rightly in my opinion) by the dev team that these elements are all developed with the view of heavy re-use as part of a central corporate style-guide/css framework. This itself aids the building of pages quickly over a heavy per page design approach. My thoughts were that a guiding principle of Vertical Rhythm would facilitate this.

Any further thoughts given this context?

Regards,

Dan.

ebrunborg

Dan,

I agree that vertical rhythm is important and even though it's difficult to implement 100% on the web, in my opinion it's worth it. In a sense, vertical scrolling is the web's way of turning pages and that indicates vertical rhythm is more important than horizontal. 

Although there are no hard and fast rules, a good starting point is to identify a baseline, ie the line-height of your smallest element (often the body copy), and build everything up from there. For example, if your body text is 16px on 20px line-height, make all other styles and elements add up to a height that is a multiple of 20px: H3 18px/20px, H2 40px/40px, H3 58px/60px. 

We've based a lot of our work on this article on ALA, here's one example. The beauty of baseline is most apparent when seen across two adjacent columns, but even in one column layouts it does add subtle finess to the consistency.

As for arguing against your dev/design team that could be a difficult battle to win, especially given your position as an internal client.

Good luck!

dbaggs

Thanks for your input. The second of your two links goes nowhere, can you revisit?

Regards,

Dan

ebrunborg

Strange – try it now (edited the link)

Darren

Our lead designer would have a fit looking at the "what we do" heading and the content in the box to the right of that. "they're not level!!!!! Why are they not level????" is all I'd hear for days, or until I'd had enough of listening to him whine lol It does go some way though to show that a lot of it is subjective and taste driven.

mattiman

Agree that it's difficult to get 100% right. One image upload in the CMS by the client inside the content and your vertical rhythm is off by a few pixels.

However, I think you should still start with a good typographic rhythm and see how far you can get it right. 95% right is still a lot better then 100% wrong.

dbaggs

Thanks Darren, any chance of getting your lead designer to comment and shed some light on the method behind his apparent madness?

Regards,

Dan

dbaggs

Thanks Mattiman, I tend to agree. Any references to where this constructively impacts the effectiveness of a page? Is anyone aware of any tests in this area?

Regards,

Dan

Darren

He's a print designer by trade and has moved to the web in the last few years. He loves his rhythms both horizontal and vertical. In his design he'd have it aligned to the same baseline across the page and everything indented the same. He's been known to use a ruler across the screen when checking a design. I'll see if I can coax him in to talk about it.

mattiman

Feel sorry for him :)

Print designers can't stand to have to loose control on the web. "What do you mean, not exactly the same font?" "Users resizing the text size? Oh no!"

thezenmonkey

I came from a print design background, and I avoided web because of the lack of control. I find with modern browser implementations and tools like TypeKit and jQuery and HTML5/CSS3 there's enough control to be able to forgive/ignore those old issues.

I use 960 Gridder or Syncotype-alt to help calculate my vertical rhythm. And I've just taken to writing my own CSS framework since I can't find framework with a flexible enough horizontal grid, and decent vertical rhythm. I ended up combing my favourite parts of 960.gs and bootstrap with my own baseline grid to create a decent starting point for typographically sound responsive framework.

As for preventing clients from screwing it up it, I plan on integrating some better image upload tools into my CMSs. Something that will help calculate image height and allow the client to resize/crop to help maintain the grid if they so choose.

dbaggs

Thanks Monkey,

Great to get that insight - for my weekend projects, I too have adapted the CMS's to adapt images. Great that I'm thinking on the same wavelength as others.

Back to the burning question however, has anyone got any solid test proof that utilising Vertical Rhythm has positively affected the effectiveness of the design? 

Doug_S

I was trained (initially) as a print designer so I was shown proper typesetting, grid theory, rhythm, color... All of it. It was great. Then I jumped to the web and was excited with how much more freedom I had. Then I learned there is so much you can't do or can't do well.

Kerning, anyone? I'm sorry, letter spacing isn't the same. We still don't even have hyphenation! Word has had it for DECADES! Why can't we have it in our significantly more powerful browsers?

Then there are issues like vertical rhythm. Vertical rhythm as it's done in print is impossible on the web because you can't see an entire page. It's like looking at a poster through a letterbox and shouting through the hole for someone to move it up and down so you can see more. Vertical rhythm takes on a whole new meaning.

However, I don't think that makes it impossible or less important. If anything, it's more important because there is so little vertical space to work with. Instead of vertical rhythm on the full page, it's localized to elements and section. Then you build the rest of the page so it flows.

Now, there are certain things you can't do that you would in print. For example, you can't have it round to the nearest [X]px for height so everything sits perfectly on your baseline grid. (Not yet, anyway. I actually have a side project I want to do to fix this.)

As for @dbaggs's question about testing is a difficult one as it's hard to A/B test vertical rhythm. The purpose of it, when done correctly, is to make it easier for the eye to travel over the content. The brain uses sight-lines to predict where the next paragraph will begin, where the next block of content might be. Which is quite handy when talking about it's usefulness because vertical rhythm is part of grid theory and we have over fifty years of evidence to support the effectiveness of grids and while they're still relatively new to the web they have been shown to be as effective, if not more so. After all, people don't read the web; they scan it.

So I think it's less a question of whether or not vertical rhythm is useful, but how better to adapt the principle to the web. It's easy in print because you have 100% control. Since we don't have that on the web the answer isn't to abandon it but to modify it.

dbaggs

Hey Doug,

Great to get your views. It definitely gives me the confidence to not drop the baton on this one.

Let me know if you need help with that side project of yours, I've had similar thoughts but not put fingers to keyboard as of yet.

Regards,

Dan.