01 Relax
Try to maintain a relaxed distance from the screen. A great deal of design flaws originate from being too close to the screen. Good typography flows nicely from a comfortable reading distance. Realise that the average reading distance is greater for screen readers, therefore fonts need to be proportionally larger.
02 Forget Photoshop
Begin with a dry-erase board or a piece of paper, and then make a quick sketch with a vector program such as Fireworks or Illustrator. Once you've established a basic grid, begin working with CSS and HTML.
03 Find the right column size
Building grids is not as simple as it may seem. I could easily fill a page talking only about proper column sizes. In short, if you build a commercial site, ensure that your vertical grid is based upon standard ad forms. This can be quite a challenge, but creativity is a matter of solving problems - not constructing ideal worlds.
04 Know your typefaces
You have a limited choice of typefaces - basically it's still a question of Verdana, Arial, Georgia, Times and a couple of others. Because it involves a significant degree of detail, paper typography can be quite complex. What matters in web typography is not what font you choose, but how you use it. Knowing how typefaces of varying sizes render in various browsers and platforms helps.
05 Be generous with font size
Size matters. Most web designers still focus on aesthetics rather than the basic typographic rule: readability. As a rule of thumb, use a 1em or 100 per cent font size for reading text. On overview pages it can be smaller.
06 Offer contrast
Some say that black-on-white is too harsh a contrast, causing a shimmering effect. But the main problem is not black-on-white. The main problem is gray-on-gray or yellow-on-red. Make sure that even your oldest relative can see a clear contrast between font and background colour. Trained designers are especially sensitive to contrast and can easily misjudge a regular reader's eye.
07 Don't play with font colours
Make sure you establish a consistent font colour and/or underline for links. Links need to noticeably change when visited. These simple rules are not a matter of taste, they are the 101 of web usability.
08 Set whitespace free
Use lines and boxes if you don't have enough space. Otherwise avoid them. Look at the white space as if water is flowing through your site. If you have caves and chambers where the water gets trapped, rethink and rearrange your layout until your site is nice and open.
09 Use a baseline grid
Recently, the baseline grid has made a successful entry into the world of web design. The correct baseline grid is another mathematical problem requiring a lot of fiddling and pushing, but in short, the trick is this: try to fit font sizes and line height into a nice puzzle. But remember, because of the fuzzy nature of screen fonts, line heights need to be a little greater than with printed fonts. A good average is about 140 per cent.
10 Make the grid, break the grid
Creating a nice macro-typographic layout is like creating a nice logo. Don't be too logical with the grid or else your layout will appear stale. You need to break it at the right places.
Oliver Reichenstein is the founder of iA, an information design agency in Tokyo. iA is famous for its Web Trend Map and its popular information design blog, the iA Notebook. http://informationarchitects.jp
