Home  /  Stories  / 

Text Versus Space

10 Apr 2003
Hamish Fraser is a web designer from Verb in Wellington. Here he writes about design issues in web site construction. "One of the biggest clashes between the accessibility / usability schools…

Written by

Hamish Fraser

Hamish Fraser is a web designer from Verb in Wellington. Here he writes about design issues in web site construction.

"One of the biggest clashes between the accessibility / usability schools and the design schools is over the use of type in web design... Hamish Fraser is a web designer from Verb in Wellington. Here he writes about design issues in web site construction.

"One of the biggest clashes between the accessibility / usability schools and the design schools is over the use of type in web design...In this article I would like to touch on a number of aspects of type use and the solutions I have found while designing in the commercial environment but first I would like to address the complete misuse of type on the internet today.

Dear web design industry
It is terrible design to make type content really really small because it doesn't "fit" the design of the site. The sexy graphics that you spent ages on look great but the client wanted some useful text content in there for their readers. Why is your best solution to try and pretend it's not there? You make it as small as possible, blending its colours in with the background and call it design? That information isn't just for creating texture, its accessibility is generally the primary purpose of the internet and of that site you are designing. It would be somewhat similar if Jern Utzon had when designing his opera house left out the auditorium to accommodate the design of his roof.
Listen, if you were designing a new potato peeler you would work primarily on this new object being visually stimulating in its form and highly effective in its purpose. In the same way, surely it makes sense as a web designer to design your pages to be both visually stimulating and effective in their purpose?
This purpose just happens to be what the internet is completely all about - sharing information! Why, in the majority of "designer" sites does this information happen to be wrapped up within blocks of tiny uncontrollable type in an attempt to pretend that it isn't there.
Please adapt to this new medium soon.

Kind Regards
A designer.

Some tips and pointers to help.
We have to focus on making that information look great as well as being highly accessibility. There are many solutions to presenting information really well on the web and I am now going to touch on a few practical examples - but it is our job as designers to find these methods out and execute them with precision, not to blindly follow a few artistic "greats" who haven't thought through these idea's as a designer should.

  1. Take up the forgotten text formatting HTML tags that have been so wonderfully reincarnated with the arrival of CSS - I'm talking about H1, H2 etc as well as the LI, EM, CITE, ADDRESS etc. These provide wonderful backwards compatibility for Aunt Nancy's 12 inch monotone monitor running DOS as well as providing a quality design environment for now. Just declare in your css file:

    h3font-size:140%;font-weight:bold;color:#09F;margin-bottom:0px;padding-bottom:0px;

  2. RANT
    Stop using font tags! There is no need and they are the bane of the internet - shame on you Dreamweaver for all those font tags you have dumped on the net.
    /RANT
    Here are some articles if you need further persuasion, FONT FACE considered harmful, Beyond the font tag, What's wrong with the FONT element?.
  3. Use variable font sizes - this is highly debated but before you skip on to the next tip I would like to say I have found an interesting solution that helps the situation.
    The beauty of variable font sizes is that for those people with poor eyesight they can increase the size of the type (using there browser) so they can read the page content. The ugly part is they increase or decrease the font sizes far beyond what would be considered generally of any use to anyone which puts you at risk of having your site look terrible. I have found a wonderful little JavaScript (include it as a js file if you want your HTML to validate) that gets around this issue for those people with JavaScript enabled - I realise this isn't a total solution but to date it's worked and I figure those people who have turned JavaScript off generally would also know how to change the font size.
    This great article where I found the script is definitely worth a read - let me know your thoughts.
  4. It pays to always cross platform check - this I believe is only going to get more and more important with a rise in the number of browsers successfully beating IE in performance and with the number of web enabled devices on the increase. Make sure you have a text browser for an indication on how blind readers and many other text based platforms will see your site. You'll also want to test Opera, a Mozilla based browser and IE5 and 6 (as well as a Mac running IE5, safari and Camino) - you may have given up on this but I think you'll be pleasantly surprised with the cross compatibility of CSS nowadays and the improvement in browsers across the board. The best Mozilla browser in my opinion for windows users is Phoenix (tabbed browsing making it the one reason it's better than IE), it doesn't even require an install (on windows) - you just unzip it to a directory and it runs!
    Netscape 6 uses an older version of Mozilla so keep that in mind (Netscape 7 is available now as well).
    Forget Netscape 4.7 - this browser sucks and is the main reason so many designers are disillusioned today with cross platform testing!

That is all for today if you don't agree with any of this then call yourself a web ARTIST and go wear a Beirut demanding all your viewers use IE 6 at 1024*768 while cramming as much artistic wonder into each pixel as you can.