Page 105

199

Designing for the Web ~ Layout

200

Using the same typefaces as before, this example shows that by setting a paragraph with too much leading, or too much letter— spacing, can also result in an uncomfortable reading experience. Typefaces themselves can also have a bearing on typographic colour. Some typefaces have wide, open counters, and large spaces between the letterforms, (called kerns). Whilst others have tight counters, with minimal open space in the letterforms. Even the choice of typeface can play a significant role in the typographic colour of your final design.

White Space My first design job was based in a small studio in Manchester city centre in the UK. It was mostly a print design agency that produced work for various large and small clients alike, in varying media: packaging, publications, marketing support material etc. One of the avenues of output for the studio was Direct Mail. Designing for Direct Mail is actually quite tricky, for one simple reason: it goes against the fairly sophisticated graphic design principles, which is standard fare in college. Instead, designing Direct Mail is about as sophisticated as a small lump of concrete. Direct—Mail clients want to appear down—market, there is no getting away from the fact that it works as well: big, bold and brash design is the order of the day. And in the words of one client, words that I will never forget as long as I’m a practicing graphic designer; ‘White Space is empty space’. However, for the most part, he couldn’t have been further from the truth.

Definition White, or Negative Space is the space in—between elements in a composition; be that a web page, a web app or a spread in a magazine. Actually, that’s only a part truth. The space between major elements in a composition is Macro White Space. Micro White space, is, yes you’ve guessed it, the White Space between elements such as list items, the space between a caption and an image, or the space between words and letters.

Macro white space

Micro white space

Legibility A while ago I was lucky enough to go and see Erik Spiekermann give a lecture. Part of his talk was about his redesign of The Economist magazine. He mentioned one of the primary reasons for the redesign was the Economist thought their design was too heavy. The content was difficult to read. In newspaper design — which has so many parallels with web design — information is dense. Sometimes, as in web design, it’s difficult to add white space because the content makes it hard to do so. Newspapers often deal with this by using a typeface for the body, which is quite light and has plenty of white space within, and around, the characters. This was part of Erik’s solution for the redesign of the Economist. He redesigned the typeface slightly, whilst retaining the quirkiness of the original. He added more whitespace to the individual characters. He set the type slightly smaller I believe, with more leading. All of this was adding Micro White Space to the design. The overall result was subtle. The content was more legible and the overall feeling of the magazine was lighter, yet there was still the same amount of content.

licensed to Denis (1 user license)

Profile for anh7

Five simple steps designing for the web  

Designing for the web

Five simple steps designing for the web  

Designing for the web

Profile for anh7
Advertisement