Usability Fails: Fonts, size and color

Before reading the 2nd part of this series, you should probably want to read the Introduction!

Since the beginning of internet, typography was very poorly implemented in browsers, compared with other technologies. We had to wait until css3 arrival to deal with custom font families.

Image Replacements

Web designers who wanted to please their clients with amazing fonts started to replace headers and in many cases whole paragraphs, with images containing all the texts.

Microscopic Text

The need to fit as much information possible in a page, leads many designers to use extremely small sizes for their main texts. The problems gets worse with the continuous improvement in computer screens and the huge screen resolutions.

There are also many traditional graphic designers who design web templates. who think that small sizes of text without proper alignment and line width, look artistic and add to the overall look.

Yes, it adds IF YOU DESIGN AN ILLUSTRATION! But, for God’s sake, this is a web page. People want to read the content you have here. They don’t want to admire the perfect symmetry!

Take this for example. These screenshots are from a recently redesigned news portal (imagine something like yahoo.com, but for Greece) The texts are tiny and in my 15″ MacBook Pro screen are barely readable.

Light Grey on White

Or “how close can you get to your screen, to read my content?” Probably many designers are earning money from eyeglass companies. There is no other explanation for using light grey text on white background. I know it looks nice if you take two steps back and admire it, but no human being can read it!

Same thing happens with dark background websites. They are perfect for promotional websites, for companies etc but no for websites containing huge amounts of text. Lots of researches have proven the obvious, that black text on white background is by far the easier to read.

Make use of white space to calm your visitor’s eyes. Choose a font size at about 14 pixels and a line height 1,62 times bigger (More about using Golden Ratio in CSS)