Vertical Rhythm - How important is it

Question

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.

http://daneden.me/baseline/

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.

Answer 1

Guidelines are meant to be broken when the need arises.

I feel that keeping the local vertical rhythm should give you a nice consistent feel. (I would assue) We process images and text differently and would not be able to co-relate the height of image in terms of multiple of line height, which would back the argument that you should focus on vertical rhythm in a contextualized fashion rather than being upright and enforcing a global one.

Some tips on how to get a good vertical rhythm.

Answer 2

Adjusting image sizes to maintain that kind of vertical rhythm (as performed by your link), in most cases, is not an improvement. You're right in that the horizontal grid is more important that the "global" vertical rhythm (much more important, your eyes aren't lying to you when you say that site looks worse with plugin turned on). And that plugin doesn't work right under some browser settings (e.g. overriding the font size with a browser setting).

There's plenty of fine tuning to be had with basics (fonts, line-height, line length, margins and padding).