greg-wood.co.uk
The homepage of web designer Gregory James Wood
The Blog
Some Thoughts on Vertical Rhythm
There's been a fair amount of discussion regarding the subject of vertical rhythm recently, and I've found myself reading a number of blog posts and visiting websites publicizing their use of vertical rhythm techniques. For the first time in while (especially so considering the amount of respect I have for such designers using the techniques) I've found myself looking upon the subject with the air of a sceptic.
The primary reason for this being usability. It may be my lack of experience, my small amount of knowledge regarding print design techniques, or my general lack of design education, but for the life of me I cannot think why conforming every text based element to a vertical grid can enhance the user experience or usability of a site.
I understand that vertical rhythm techniques must be used for things like articles, essays, news reports; generally items with a larger word count. The reasons for this are obvious. Factors such as line-height and the distance between sub-headers and their respective content need to be considered to provide a nice reading experience for the user. However I can’t think of any reasons why lining up other page elements to a similar set of vertical rules is beneficial.
Mark Boulton is a designer whom I truly respect. I’ve never met him but via his blog he has taught me things about design I never would have considered without his input. Nevertheless he promotes the use of incremental leading, a technique that sees designers (as an example) lining up their sidebar line heights to correspond with every fifth line of the main content article. You can read more about this at Mark’s site, but it seems to me that this technique costs more time than is necessary. Calculations regarding pixels, ems and your lovingly created PSD document have the potential to cause frustration and sometimes dissatisfaction.
Instinct
I do things a different way. When considering how to design the content of a particular website, I head straight for what’s most important first. The main content. For this example let’s say our main content is a bunch of articles.
After you’ve designed your articles pages, addressing things like leading, line length and character size (obviously created an article page that is readable by monkeys), you’ll want to (in our example) get some juicy, related content into the sidebar. Now instead of painstakingly calculating via trial and error a way to get this sidebar content to line up with (for example) every fifth line of the main article content, I personally suggest using your instinct.
Zoom out to 50% in your Photoshop, Illustrator or Fireworks document, and then play with your leading and character size till you get something that just fits. I personally find that zooming out by 50% is similar to squinting at something from a few metres away (readers who’ve ever painted will know what I mean), and it gives a much more overall perspective on the design you’re working on. For this reason I find it’s very easy to determine how to style your secondary (in this case sidebar) content and in my opinion, is a lot easier than going through the frankly ball-aching process of calculations and trial-and-error.
Evidence
Obviously this is all just an opinion, but if you take a look at some of the sites I’ve made/designed, you may find that vertically, the sites flow quite naturally. I’m not dismissing Mark’s theory of incremental leading, it’s just that I’ve never found the whole calculation based technique necessary when creating websites that are primarily usable and readable, and secondarily beautiful.
Post a comment
About this entry
- Posted on: 01/08/07
- Posted in: Design
Feed Me!
RSS feeds, for all your content-to-desktop needs!
Feed me what? I hear you ask. Well, RSS feeds are a fantastic way of getting content from your favourite websites delivered to your desktop. No need to trawl through your favourites checking for updates! Especially useful for arse-ugly websites.
Copyright © Greg Wood mail@greg-wood.co.uk http://www.greg-wood.co.uk 2007 | Everything here protected and licensed using a Creative commons license | Get some RSS
Comments (4)
Post a comment
Biscuitrat // 02/08/07
I try to achieve some sort of balance in my content section, but my sidebar is so jumbly that I don’t really include it in any of my mostly-unsuccessful ventures. I guess that’s something I have to work on too :P
Andrew // 02/08/07
Greg, I’ve seen a few bloggers say that it isn’t necessary to match the rhythm of a sidebar with that of the main page, their point being that it is a different set of content and creating a connection between it and the main content by using the same rhythm suggests a relationship that doesn’t exist.
I don’t personally go along with this but I understand where they are coming from.
I have found that I prefer it if it all lines up; however, I honestly couldn’t say if it makes reading it any easier. I am confident though that setting the main content to a rhythm makes reading that easier.
Greg // 02/08/07
Cheers for your comments guys.
@biscuitrat: sometimes designing the sidebar content is my favourite part of the design process! So many different sections and unrelated items often get relegated to the sidebar, and I find it challenging and fun trying to give these elements some order and structure.
@andrew: I agree with the fact that you prefer it if it all lines up. However, for most sites, the content within the sidebar or secondary content section is often designed differently, to give it less emphasis than the main focus of the page (the primary content). Therefore my point remains; that I think spending time on calculations is unnecessary when you can use your visual instinct to achieve similar results.
Lauchlin // 22/08/07
I think most design should come from instinct. And pulling back to see the overall design is a good idea. I’m not sure that lining up the sidebar in that “painstaking” process is always needed, but I’m sure that, for most, this has come from their instinct, which has then been “whittled down” to a process. For those coming from a print perspective, lining up is just second nature. For me, I’ve learned from example..looking at every site..seeing what works for me and what doesn’t. I guess it’s the process of learning...you go with what works for you.