Ignore typography in web design only at your peril !

Ignore typography in web design only at your peril!

Good typography is crucial to design. It is.

Good typography is crucial enough on a web page as it is in any other medium.

Any thing, good or bad, under the sun and even beyond it hmm… that goes into

making the web page pleasing to look at and enticing to read boils down to careful

typography. You can not be spared if your website is not visually appealing

or digitally inviting in the multitude of sites in cut-throat competition.

Before you make any excuses for a lack of good typography, you might be out of the fray. It is high time you learnt fundamentals of typography that will help your site look – and benefit too – fundamentally different.

A word of relief for web designers! You are not alone on this side of the fence. Ninety percent of web pages that browsers look at have been poured- not designed.

What designers have to pay heed to

Designers have to employ the tools and technique of typography in the best possible manner in conjunction with media needs, target audience aimed at, specialty of communication to be disseminated.

Designing for a computer screen has its own set of uniqueness and problems. Add to these the elastic nature of a web page, which has to work across different computer platforms and screen sizes, communication needs.

The unfailing concern for designers should be about a good match between the style, semantics, and intended impact of your text and corresponding properties of the typeface it uses

What typography means

A page designed to support a childrens TV program should be different for one designed for a politics course in a university. Similarly the text on the Financial Times Website , if it is doing its job right, should be be different from that of the The Tate Modern .

So typography, whether on the Web or otherwise has a job to do. This could be to support and re-enforce the message being presented by the content, or tell you something about the background and the implicit context, that the the page is part of.

Here's how you go about when it comes to zero in on typography. It will definitely bail you out from your site which is low on looks, readability, aesthetics and usability.

Text alignment

Aligning text to the left, ragged on the right, increases reading speed because the straight left edge helps to anchor the eye when starting a new line

Line length

There seems to be little agreement on the best length length for optimum reading speeds. The most commonly advice is that limiting line length to 9 or 10 words can increases speed and comprehension.

Users read faster when line lengths are long, although they tend to prefer shorter line lengths. When designing, first determine if performance or preference is important. If user performance is critical, use longer line lengths to increase reading speed.

Leading (line-height)

Set the leading larger than the default - as a rough guide 1.3cm of leading (130%) will make a big difference to the readability of a web page. Leading and line length however are related; the longer the line the bigger you need to make the leading.

Newspapers have very short line lengths and very little leading - so they can fit as much text into a small space as possible.

Choice of fonts

Choose a font that is suitable to your subject matter. If you use more than two fonts on a page and it can start to look like a ransom note - distracting the users attention from the content. Off-line, headings are commonly set in a sans-serif font, with body text set in serif.

Morever, on-line, sans-serif are often used for both headings and body text; the cleaner outlines of the sans-serif fonts tends to make them easier to read on low resolution screens. Don't mix serif and sans-serif fonts in your body text, as it rarely looks good.

Italics

Avoid using italics for small text sizes: the problems of screen display of outline fonts has not entirely disappeared. Italized fonts look particularly bad at small sizes - as italics do not easy to render using a square pixel grid. If you must use italics, avoid using them for large blocks of text.

Use of capitals

Don't use all caps for bodytype - or even capitalise all words in headings. The uniformally of size and shape of capitals make them harder to read than lower case letters.

Readability is increased if only the first letter in a heading is in capitals; each capital - being less recognizable - acts as an interruption to the eye as it scans across the text.

Contrast

Ensure good contrast between the text colour and the background colour.

Underline links

Make it easy for visitors to understand what is a link and what is not a link. Don't rely exclusively on mouseovers to identify links, as this can be confusing and reduces usability.

Users scan web pages

For Service based website in particular, arrange your text for 'scannability', i.e have lots of headings, provide the most important ideas at the start of paragraphs, and use lists rather than dense passages of text when appropriate.

In short, typography is not so pleasant (Scared? Not too difficult either) means to make your site pleasing to aesthetic senses of surfers. It is done painstakingly and carefully, but definitely, it is worth it. It can either pay you or leave you at peril. So, give it a thought where you are heading for.

Deepak Sharma is a Web Designer at BlueApple, a Web Design and Development Company with a well connected development infrastructure in India having a strong portfolio with global clientele and offering superior web services and solutions at competitive costs.