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

Vertical rhythm is, imho, very, very pleasing to the eye. It's one of those details that a viewer doesn't consciously notice, but has a huge impact on their perception of a site. I started using a vertical grid in webdesign just a few months ago and I'm seriously hooked.

Images are a pain, indeed, but nothing you can't manage with some clever planning ahead. If you're just coding an html/css site, simply crop your images to the right multiple-of-24px size. If you're using a Content Management System, it should be possible to have the CMS create alternative sizes of the uploaded images, with those alternatives' dimensions set by you to match your vertical grid. That, or using the CMS's image editing to crop the image after upload.

WordPress, at least, has the resizing capability. It just requires some coding in the theme, but that's nothing the gals and guys at https://wordpress.stackexchange.com/ can't help you with.

Alternatively, you could wrap each image in a <div> with {overflow: hidden} that has its height set to a multiple of 24px. And now I'm trailing off into https://stackoverflow.com/ territory.

Answer 2

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.