After successfully composing my website redesign to a vertical rhythm, I was curious if anyone else bothered about this, or even knows it exists?

 

What is vertical rhythm?

 

Vertical rhythm is the process where the entire layout and text of a website falls into a regularly spaced vertical grid. What this usually boils down to is deciding on a line-height for your paragraph text, for example 20px, and then composing the rest of the website elements (headers, images, fixed height items, etc) to fit within complete multiples of that number (20, 40, 60, 80, etc). There is a bit more to this, like getting margins/paddings/borders to fit into the rhythm, but you get the idea.

 

When done right, this means that any text on the website will be in line with the rest of the text on the website. Apart from being visually pleasing, it is most noticeable on multi-column layouts, where the text in both columns will always line up, whatever you add to the columns. If you laid a 20px high grid across your website, everything would fall onto the lines perfectly - I actually do that with background-image to check it's all positioned correctly.

 

It sounds quite scary, but once you get your head around it, you'll find that you automatically start thinking in the line height you've chosen.

 

Does anyone else take this extra step when designing their websites? If not, any particular reason why not?

 

It will be interesting to see what everyone else thinks of this technique.

I've been using line-height on and off for years though only usually on paragraph, lists and quotes to make them more easily readable. With padding/margins I tend to use mostly uniform values, for instance if I'm working with a 2% margin in one area I'll generally use 2% across the board.

This is a little more than just setting a line-height, as you need to get absolutely everything to line up in a unformed fashion.

 

There is a great post on 24ways about vertical rhythm.

I've not done it to a production site yet. It's a topic I've rather recently begun to explore.

 

I have done it in this test case http://www.thomthom.net/storage/markup/html/sitenav/ where I'm testing various things. (Work in progress)

Debug version: http://www.thomthom.net/storage/markup/htm...nav/index2.html

 

It took a little time to get my head wrapped around getting the line height correct. But the biggest issue I found was that since I worked with EMs I'd suffer from small deviations from browser to browser. Especially when it comes to rounding numbers which eventually after many elements throw things of a tad.

 

I'm building an article on the experience and my findings on this as well as other things in this test case.

That is a nice development page Thomas, you've inspired me to start trying out some of the CSS3 stuff.

It started out by that I wanted to try out a variant of the drop down menu. I figured that showing all the elements would be more user friendly. I then applied some basic styling to it and figured I could play with some CSS3 features and web-typography. One thing lead to another, as well as browser bugs and quirks, and it's still growing. At some point I just need to stop and finish of writing. But I think I'll have to include the latest nightly builds of webkit and opera as both are very close to passing ACID3. That is, if I can get hold of the builds. I had hoped that IE8 would surprise me here, but it didn't. No CSS3 support in the current build. In fact there's some quirks still that might lead me to ignore it in the testings.

 

But back to the topic of vertical layout. It's something that I would like to do on every site, but the extra work it takes to make it perfect is probably not worth it. In some cases it could be near well impossible if there's too many elements about. Spending the extra time to do this would seem hard to argue infront of a client. So I'd think you'd have to have quite a bit experience to pull it off quick enough. Too many browser deviations.

 

It would be tempting to use pixels for this kind of thing, but I really do try my very best to make everything in relative units. (btw, my testcase use only relative units. Not sure if it all lines up that well when it's sized up though. Getting consistent relative units and font sizes across browsers is a pain. Even when targeting the latest cutting edge browsers...)

This is a little more than just setting a line-height, as you need to get absolutely everything to line up in a unformed fashion.

 

There is a great post on 24ways about vertical rhythm.

 

Thanks for that, I'd not seen that article. Interesting concept and one I have to look deeper into sometime!

I've actually hit an interesting area in the theory / technique of vertical rhythm - whether I should link the rhythm of the sidebar (content unrelated to the body/main area) to that of the main content.

 

There are two opinions to this:

 

Some people say no, because it would insinuate a link between the two areas that doesn't exist. While others say yes, because it brings the entire site together as a unit, and looks pleasing to the eye.

 

I still haven't decided what to do about it yet.

I say that the sidebar should. That's also how typesetters do it for traditional media. I'm not buying that it creates a link between them. In which case a different colour for the sidebar, or a border, or more whitespace should be enough to separate them.

I can see both sides of the argument but can't really say one is better than the other for every day use. As a designer it would probably be very pleasing to do but for the end user would it make any difference?

I can see both sides of the argument but can't really say one is better than the other for every day use. As a designer it would probably be very pleasing to do but for the end user would it make any difference?

The same argument would then apply to vertical rythm in books. How many will actually notice all the work a typographer do when setting a book?

I do tend to notice when someone has taken the time to implement it, as everything looks a lot more organised and polished.

Thomas: I just thought I'd let you know that your test page is beautiful.

 

As for this vertical rhythm thing, this is new to me - thanks for bringing it up. Its something I suppose I had better take a look at . However - how would you go about doing it when you size everything (text size, margin/padding) in ems rather than pixels or similar. I cant imagine that working, because you wouldnt be able to create images in ems for obvious reasons. And if you set the line height in px, surely it'd get thrown all out of whack if/when a user resized the text....?

Yes, images would be an issue. I think I'd make the images fit to the text with default size. Photos can't be scaled, but with graphics you can use SVG which support em units. Though this is supported only by the newer browsers, espesially SVG as background images. It's stuff like this which makes it hard to directly apply traditional typography to the web as it's a completely different media.

 

When you create vertical rythm in relative units like this you have to constantly keep track of the font size for each item. When you change the font size of an element you also have to change padding, margin and line-height to fit the grid you're using. Some prefer to set the base font size for a document to be equal to 10px. Since the default font size in browsers are 16px, you do so by html {font-size: 0.625em;}. Now 1em equals to 10px and it's easier to calculate.

 

When you set out to make a fluid layout you can't use pixels as all as they won't scale with font-size changes. You would have to use only relative units.

 

It's tricky, but possible.

 

 

Just had a thought in regard to images... if you make them to fit the grid in default font size, then maybe it'd work if you calculate how large it would be in EMs and set the size in CSS. Maybe it'd then scale... ...this is something I might add to my test page... it wouldn't work for backgrund images of course as we've got no control over that. ...maybe with the exception for SVG background images... hmm.... many interesting questions here...

This is interesting, not seen or heard about it before, but haven't really done "columns"

 

Certainly some food for thought!

Vertical rhythm can be done with pixels and EMs (or any other sizing standard), as it's just a theory, not a fixed technique.

 

The trick with images is just to make sure the height of the image + any padding/margins/borders adds up to a full multiple of your chosen line height. This makes sure that all text after the image will continue to flow correctly inside the 'grid'. It is too tricky to try and do dynamically sized images, so sticking with pixels for the images is best.

 

When I have the time, I'll write up a little guide / starter pack about it, see what everything thinks when they can see some examples.

Hi RobH - I made an attempt to maintain a vertical rhythm in my homepage (www.sunwukung.co.uk). Any text that comes below an image in one of the galleries may not fall into place - owing to the irregular height of the images.

I've tried getting my head round working in ems - but not doing great so far, so I've generally set the line spacings by eye. I saw a trick in one of the Apress books that scales the base font em to match a factor of ten, which makes subsequent declaration of em values a bit easier to cope with.

 

I also added an overflow:scroll value to the whole site, so that it wouldn't alter it's horizontal positioning in the event of the content using a smaller area than the screen height.

I'm going to have to find somewhere to try this theory out. Its certainly interesting, although I am skeptical about how much difference it makes. I find if a site looks good, it looks good. The fact bits may or may not line up doesn't really factor in (at least not consciously!!) - but that would of course depend on how the content is laid out and separated etc.

On a more subjective level, I agree - vertical rhythm is not a necessary aesthetic constraint, it just achieves a certain aesthetic effect. There are plenty of stunning sites that are not composed with a formal vertical layout. It just depends on the effect you want to achieve, i.e: do you want the site to look orderly, wild, relaxing, energetic etc.

I personally think that following a vertical rhythm takes a lot of the guess work of feeling out whether the design looks good or not. I have read that article form 24 ways and it is excellent.

I had planned to make a script to calculate this, but I just found that James Whittaker has made one allready: http://www.jameswhittaker.com/blog/article...thm-calculator/ Have a look, it's really nice.

Though, I might make this into a desktop gadget.

Never mind that comment about desktop gadget... turns out when you scroll down enough that James W. already done it!

Oh my, now that is a wonderful tool! I'm going to go through my calculations later with this, and see if I got it all right.

 

Thanks Thomas.

Hi!

 

Thanks for briefing about what is Vertical Rhythm?

Emilyandrew, if you're unsure what vertical rhythm is, I've explained it in the first post, and I put a link in post 3 to an article about it.

Lol Rob,

 

I think Emilyandrew was just thanking you for your article and copied the question mark from the article name.

 

I may be wrong tho

Btw, I'm just playing with this idea, using Jim Whittaker's calculater.

 

What on earth do I do when I want to increase a font-weight?

 

I've looked at the alistapart article on text sizing, read the 24 ways article and looked at Jim Whittaker's article. None of them seem to mention weights, but as soon as you bold something it all goes out of whack.

 

What's the trick I'm missing?

 

*EDIT: hmm nevermind I think I get it now.

What on earth do I do when I want to increase a font-weight?

 

I've looked at the alistapart article on text sizing, read the 24 ways article and looked at Jim Whittaker's article. None of them seem to mention weights, but as soon as you bold something it all goes out of whack.

Why would that make any difference? Surely emboldening the text wouldnt affect its height...?

Post links to your vertical rhythm projects please people. Show your creations.

I don't want to show the public my web site yet - but if you PM me Thomas, I'll send you a link to the development area

I thought I would resurrect this topic as I confess I never really understood the whole vertical rhythm deal until the other day when I discovered this article: http://dev.opera.com/articles/view/setting...-baseline-grid/

It is brilliant and if you are having trouble with this concept I urge you to read it! And if you know it all already you can simply read it while feeling smug and superior

You might like this CSS setup..

http://sencss.kilianvalkhof.com/

ooo Nice on SWK, thanks for the linkie

You might like this CSS setup..

http://sencss.kilianvalkhof.com/

 

In Safari the vertical rhythm on that framework is off by the end of the test page.

You might like this CSS setup..

http://sencss.kilianvalkhof.com/

That is absolutely fantastic sir, many many thanks.

 

[edit]

Rob is right, though - it goes out of sync on webkit browsers

In Safari the vertical rhythm on that framework is off by the end of the test page.

 

don't tell me, that's on a mac...

don't tell me, that's on a mac...

It could be on PC if you use Safari for Windows!

Safari on Mac renders fonts differently than PC though eh? The stylesheet falls apart when it hits the form elements, but it's a nice start. I made my own variation but ripped out loads of the content, focussing mostly on pure text elements.

 

As time goes on, you inevitably develop your own system of resets and defaults - I've taken to loading a much more heavy duty reset these days to combat cross browser rendering discrepancies.

 

Something I've really gotten into is setting up my typesheets to group selectors by style, font, weight and colour (as opposed to applying rules per selector) - makes it much easier to maintain consistency across a site. I'm thinking of applying the same theory to floats, clears and padding sizes. The more of this I can standardise - the easier it is to augment these things with a "lighter" touch - rather than hammering elements into place with overtly specific selector trees.

 

/*FONT STACK*/
/*---------------------------------------------------------------------------*/

/*SIZES*/
/*---------------------------------------------------------------------------*/
legend
{
  font-size:1.2em;
}

dd
{
  font-size:1.2em;
}


/*COLORS*/
/*---------------------------------------------------------------------------*/

/*dark brown*/
#main_nav li a, label, dl, p, legend
{
  color: #362F2D;
}

/*light brown
label
{
  color: #ADAD90;
}
*/

/*light grey*/
.sub_footer p
{
  color: #D2D5B6;
}

/*white*/
label
{
  color: #FFFFFF;
}


/*WEIGHTS*/
/*---------------------------------------------------------------------------*/
.sub_footer p, legend, label, .address, dt
{
  font-weight: bold;
}

/*-9999px*/
/*---------------------------------------------------------------------------*/
#masthead, .title_welcome, .title_location,  .title_contact, .title_facilities
{
  text-indent: -9999px;
}


/*STYLES*/
/*---------------------------------------------------------------------------*/
#main_nav li
{
  list-style-type: none;
}
#main_nav a
{
  text-decoration: none;
}
#content ul, #content dl, #content .map, #content ul
{
  line-height: 2em;
}
#content ul
{
  list-style-position: inside;
  text-indent: 2em;
}
#content dl
{
  list-style-position: inside;
  text-indent: 1em;
}

Safari on Mac renders fonts differently than PC though eh? The stylesheet falls apart when it hits the form elements, but it's a nice start. I made my own variation but ripped out loads of the content, focussing mostly on pure text elements.

 

That's only partly true. It doesn't display line-heights differently, just the anti-aliasing. Vertical rhythm works fine in Safari on my site!