The basic idea behind composing to a vertical rhythm is to keep text lined up on an imaginary grid of evenly spaced horizontal lines all the way down the page. The effect is unconscious to the average reader but helps to make the layout of the page feel harmonious and restful.

Handily, the CSS property line-height can be set globally on the BODY element and inherited down through every other element to form the basis of our invisible grid (which I’ve made visible on my example). We also set a default font size in a similar way:

body {
font-family: Verdana, sans-serif;
font-size: 0.875em; /* set default font size to 14px */
line-height: 1.42857em; /* set global line height to 20px */
}

In order to maintain our grid, it is important that the margins relate to the line height rather than the font size. So we set margins on individual element types like this:

p { margin: 1.42857em 0; /* Set margins on paragraphs to 1 x line-height */ }

Of course, not all text on a page will be the same size, so we can vary this on individual element types (note that this doesn’t affect the line height, which retains its value as inherited from the body element). The important thing is to adjust the margins accordingly:

#sidebar p {
font-size: 0.85714em; /* reduce font-size to 12px for #sidebar */
margin: 1.6667em 0; /* adjust margins accordingly */
}

You’ll see there’s a bit of maths going on here. To work out a new font size in ems, simply divide the target pixel size by the default pixel size. So if the default font size is 14px and we want a pixel size of 12px, we set it to 12/14 = 0.8571. Then, remembering that margins relate to the font size, we scale them so they match the global line height. In this case we want a margin of 20px (to match our line height) so the calculation is 20/12 = 1.6667.

So far so good. The only other tricky bit comes if we want to set the margins on our headings so that they are closer to the text below them, and have a bigger margin above. This helps re-inforce the relationship between a section of text and its heading, and helps create more appropriate spacing between sections.

One way to achive this is to double the top margin for headings, but that can make the spacing pretty large. So often I prefer to move the headings down by a fraction of the global line height. The important thing here is to keep the overall rhythm going, even though the rhythm is broken for a particular heading (maybe we should call this ’syncopated headings’). To do this, just make sure that when you take something off the bottom margin, you add the same amount onto the top margin. That way the overall grid is maintained. We can use negative bottom margins to help with the interaction with the top margin on a following P element:

h2 {
font-size: 1.2857em; /* 18px */
margin: 1.6666em 0 -0.5556em; /* top margin: 30px, bottom margin: 10px */
}

And that’s basically it. You can see a live demo of this technique here. I’ve added the horizontal grid lines on with a background image, to help see how the spacing works.

One of the new features I was glad to see was the ability to add tags to bookmarks. This is a much better way to organise bookmarks than a folder structure and it made me wonder about importing all my del.icio.us bookmarks into Firefox. Although the del.icio.us plugin for Firefox 3 is actually very good, I thought it might be nice to be able to use the native browser system for adding new ones. (Sadly you can’t use both at the same time at the moment, because installing the del.icio.us extension seems to cripple the Firefox ‘add bookmark’ function).

Annoyingly it turns out that, although you can export your bookmarks from del.icio.us with tags, importing them into Firefox strips off all the tag information. After some discussion on the Mozilla forum, someone came up with a ruby script for converting del.icio.us bookmarks into the required Firefox compatible format (including tags). And now my friend Zhang Xue from e-accent has helped me create a little online tool for doing the conversion, based on that original ruby script. Check it out at:

http://delicious.e-accent.com

On the plus side I’m learning more and more about building templates for WordPress. Verstion 2.5.1 seems very solid. And I was really impressed by John Godley’s advanced search plugin, which provides search term highlighting in the results (just give the search on the right a try to see what I mean). It seems to be really well constructed — I’m definitely going to investigate John’s other plugins.

In this version I’ve decided to take the Sheep character a bit further and include some little cartoon sketches along with the blog posts. I draw these with pen and paper, which gets me away from the computer, and then later on scan in and re-draw with Illustrator. There’s just one in here so far: I’ve got a few more to come, just need to find the time to re-draw them.

This new site features a semi-flexible page width, which adapts to the size of the browser window. Also I concentrated on developing a consistent vertical rhythm for the typography, which should also maintain its structure pretty well as the text is resized.

Hope you like it!

The Gfaster search actually works well in practice. The only slight downside I’ve found is that many of the text-only pages are a little wide, resulting in quite small font-sizes on the iPhone, even in landscape orientation.

The app was built using Google’s Ajax Search API, and I had some invaluable help from a couple of the guys at the API Google Group. As usual, I was impressed by the community spirit of people willing to spend time to help each other out.

You can also find Gfaster listed on Apple’s Web App Directory.

For anyone giving this a try on their iPhone, let me know how you find it, and if you have any ideas for improving it. I should probably add pagination at the bottom, so when I get a moment I’ll do that.

The site is ground-breaking for a commercial agency portfolio in that it allows readers to leave comments on the work, as well as pulling in other related advertising content from the blogosphere.

The visual design and most of the initial HTML/CSS for this site was done by Henning von Vogelsang, otherwise known as Core, while my job was to create the WordPress template and change bits of the PHP until it did what we wanted. The WordPress backend provides a full content management system where the client can write new articles, upload images and approve comments.

My experience with WordPress in this case was that it is generally well thought-out and constructed, and very stable. However, things are a bit ragged around the edges, especially in areas like image uploading which are maybe not considered core to the blogging functionality (looking forward to improvements in WP version 2.1 though!).

As is typical of these sorts of Content Management Systems, the more you try to deviate from the pre-packaged functionality, the more you need to resort to ugly hacks. If you need to build a blog with a fairly standard structure, then WordPress is an excellent choice. If you need to make something a little more complex, particularly if it involves different sized images on different views, then be prepared for a lot of work. In fact, you might want to consider a fast prototyping framework like Ruby on Rails or CakePHP instead.