Double-Check Your Website Text - You Might Be Surprised

Wednesday, March 26th, 2008

Trackback

In a few occasions, website developers are surprised when they receive emails months after a website’s launch complaining that their website’s layout is askew.

What Can Happen?

Here’s an example of what can happen:

You have a 50px wide box. You managed to fit the word “crocodile” in the box perfectly (equal spacing on both sides and the top and bottom) with your 10 pixel Arial font.

You get an email from a user saying the format is all messed up and you can’t seem to replicate their environment.

The additional text can overflow and skew your entire web layout. Users do not end up sticking around on websites that appear broken. Minor issues like an off-balance design element can affect the professional integrity of the website.

Here’s a few tips on what you can do:

Check your website in an anti-aliased and a non-anti-aliased environment

Internet Explorer 7 will, by default, anti-alias HTML text. (You can disable this in the Advanced tab under Internet Options. Uncheck “Always use ClearType for HTML“). PC platforms, by default, will not anti-alias all text. This is disabled by default, but in case you turned it on accidentally, you can toggle it under Display Properties -> Effects… and unchecking “Use the following method to smooth edges of screen fonts“. Firefox users can use the latter setting to check anti-aliasing.

Check Your Website With The Alternate Fonts Listed In Your CSS

If you’ve specified Arial as an alternate font for a user that doesn’t have Trebuchet MS, (eg. font-family: “Trebuchet MS”, Arial, sans-serif;) check your website using uniquely Arial. You may have to switch platforms from Macintosh to PC (or vice versa) to fully test the results.

Check Your Website in an Linux Environment

The sans-serif font that is bundled in the most popular Linux distribution, Ubuntu, is, I’ve noticed, quite a bit wider then a font such as Arial. This has the potential to cause problems. The good thing about testing on Linux, is that the operating system is free and you can run it on old computers you have laying around your house.

Hope that helps. Good luck.