Vertical Rhythm – How important is it

I’m working on vertical rhythm right now for my website. It’s hard / impossible with images of unknown size.

There’s a javascript plugin that helps with keeping vertical rhythm by resizing the images.

My problem with the plugin is that I think the plugin makes the site look worse (check their demo). The image is now smaller and no longer maintains the grid horizontally, which is just as bad in my opinion.

While vertical rhythm is no doubt important, I think what’s more important is local / relative vertical rhythm.

For example if your base line height is 24px and your image is 60px, breaking the rhythm, if your next paragraph is 24px from the bottom of the image then there is still localized rhythm despite broken page-wide rhythm. From that image below I would try to maintain multiples of 24px without being concerned about the interference from the image, basically ignoring the effect of the image. This is most doable I think because I don’t have sidebars that you can compare the rhythm with. I think it’ll look obviously horrid if it doesn’t match up with sidebars, but without sidebars break in rhythms should be basically invisible.

Am I right or should I be more concerned about page rhythm.


I don’t think that doing it automatically is the right way, no software can replace human eye (yet).

You should fix every image and section via css, so you don’t have messy spaces above / below the blocks.

But don’t make this a cornerstone for your page, I’m not 100% sure that vertical rhythm is really aplicable to web pages.

Source : Link , Question Author : Harry , Answer Author : Marius Stuparu

Leave a Comment