Beef up your gutters and put your columns on a diet

Kevin Rapley — Thu, 29 Oct 2009 08:11:31 +0000

Thumbing through the UK version of WIRED magazine the other day made me realise that online there is very little experimentation or use of quirky or edgy layouts like we see in print. What I mean by this is most layouts online tend to be safe. They express a certain conservative nature with uniformed gutter sizes and content columns of same or similar width. They don’t evoke any emotion. Reading WIRED provokes emotion; each article has its own identity and style related to the content. One column may be far slimmer than the next with a gutter between them that you could drive a tank through.

Guilty M’ Lord. I employ such conservativeness in my online designs too. Scouring other websites for inspiration only, without input from other disciplines or stimulus from the world around us can be an awful trap to fall into. Too many designers appear to be doing so and it is now the occasion to call time on this practice. Web design is such a young discipline, don’t play it safe – do as great graphic designers have done before us. Experiment. Create harmony, create conflict, and whatever you do be creative.

I plan to experiment more with typography and layout. Firstly I will be digging out my old graphic design books, possibly buying some more and replicating some of the layout techniques in HTML and CSS. Web designers will be aware that technical restraints can give us limitations that print designers do not face (they have their own set of restraints). It will be a task of experimenting with what can be achieved in layout with HTML and CSS, exploring that edge first. And then reigning it in to what can be achieved with considerations of browser deficiencies, optimal screen resolution for audience majority and how layout sits within the heuristic factors an interface should abide by.

There is no reason why good layout cannot be used commercially, in a content managed system or otherwise. So why have so many, me included, been playing it safe for so long? I am going to push the boat out today and design an 80px gutter. Strike me down.

Web typography discussion

Kevin Rapley — Sat, 17 Oct 2009 11:40:12 +0000

I had a good conversation with Michael Wood yesterday whilst I was writing up a document on why I felt our design team, going forwards, should be using Cufón instead of sIFR for text replacement. Michael pointed me in the direction of a couple of sites that were inspirational to him and put forwards the argument that he has read too many times the cussing from web designers complaining about the lack of typefaces available that are considered web safe. Safe fonts are those that are regular system font installations for either PC or Mac. Those same web designers that complain could in fact vastly improve the typography of their sites by learning typographic skills. When looking at their personal website and sites that are in their portfolio it is clear to see that they haven’t mastered the art of type setting for the web.

Rather than calling web safe font’s ugly typography and search alternative typefaces and methods to deploy them, designers should first develop type sensitivity. Is their a vertical rhythm to the typography on the website? Are you using a typographer’s scale? Is there a clear hierarchy of H1, H2, H3, P tags? Does the leading (line-height) require increasing or decreasing? Is the kerning (letter-spacing) normal or would it look better with more or less pixels between each character? How about the amount of words per line – comfortably for reading online we should use between 11-14 words per line for passages of type. Have you uncluttered the guttering yet? A larger gutter between grid columns can improve readability and the elegance of typography.

Using the fine adjustment techniques above, the clarity and beauty of the web safe typefaces we have available to us becomes clear. Even the use of emboldening and emphasising key typographic areas can vastly improve an otherwise uninspiring type set for a web page.

This won’t of course stop me from hunting down new typefaces and ways to deploy them online. Each typeface tells a different story and assists the branding. However, this is food for thought and all the necessary type setting techniques should be used in conjunction with the chosen typeface. Simply replacing system font text for a sassy typeface just because you didn’t like the look of the system font is plain lazy and without skill.

Another point Michael made which I shall leave you with is that some of the best typography uses just one typeface. Take a look at this example Michael showed me for the Seed Conference. This site makes excellent use of uppercase, emboldening, italics and all of the techniques I mentioned previously with just one font, Times New Roman. The hierarachy is well defined. I would argue that Times New Roman isn’t a web safe font. It is a system font, but designed for ease in reading of printed documents. Legibility of this typeface at small sizes on screen is poor.

DigiKev » typography

Beef up your gutters and put your columns on a diet

Web typography discussion