Typographic basics

Before we do anything we must make sure we can apply typography to our content. Lay-outs, grids and baselines are essential starting points.

Lay-out

Grids, lay-out grids are almost a necessity on today’s web. Headers, body text, navigation bars, sidebars, streamers, lede’s, footers, bylines, footnotes, captions and many more are pretty much commonplace these days. However many of these captions, headers and what not are often ‘tacked on’ in the front-end as an after thought. What we need is a more structured way of setting up a layout. Fortunately some designers of note have already tackled part of the problem. I recently came across ‘Blueprint’ which calls itself a CSS framework. Actually it’s a collection of libraries and or solutions. It’s obvious that these separate solutions were never intended to be bundled in such a fashion. Personally I would like to have seen these solutions merged into a more coherent whole. Hopefully this will improver over time. Currently these solutions would actually fail the ‘Guidelines for the accessibility and sustainability of government websites’. Therefore I certainly would not recommend using ‘Blueprint’ as is but when we take a closer look we can see the potential for typographic patterns.

You may be wondering that most websites have just one column for content and one or two side columns. Is a lay-out grid really that useful? Being able to place content with its multitude elements in structured way can enhance legibility tremendously. So seeing any lay-out solution is great. When creating e-commerce sites and portals which often have a mountain of information to display lay-out grids become vital to their success.
The best grid lay-out to date and for quite some time now is Khoi Vinh’s blog; Subtraction. Jeffrey Zeldman doesn’t call him the ‘Grid Meister’ for nothing. Not only does Subtraction.com have a very effective typographic lay-out the actual content structure (HTML) is beautifully semantic.
If you want to get to grips with setting up effective lay-out grids I suggest you take a look at Marc Boulton’s articles on grid systems. And then take a closer look at what Khoi Vinh has to say on lay-out grids.

Baseline

There seems to be a growing typographic premise on the web that all leading should cohere with the baseline grid as demonstrated in an example. Leading is mainly effected by the measure, text and background colour and if after all this the text happens to fit the baseline grids then fine, but setting all text to the baseline grid should never ever be mandatory.

Grids, baseline grids are a useful technique to getting your text to line up nicely. The original reason for doing this is so that text would look much neater on paper when text on the other side of the page also lined up nicely. Text usually is visible through the paper and having all the text line up gives you a very clean professional look, never mind improved legibility.

On the web this is obviously not needed. On the up side using a base line grid in a controlled manner will help you line up multi-column content and have your images render alongside text in a predicable manner. On the whole this will improve the appeal to users and value to stakeholders. Hopefully at some point we can start using CSS3 for text alignment. However, I have my doubts if a copy and paste solution will provide real typographic awareness. It could give some ‘quick and dirty’ websites a more clean and controlled look. In the end most websites do not have multiple columns for their content and thus will benefit little from this approach. Oh and by the way, don’t try zooming the text size, that kind of ruins everything.

In part two of this typography series I’ll be taking about Flash and JavaScript.

Previous entry: Typography and the bad bad web