Accessibility and Usability Forum

I admit I was one of them until a couple of years or so ago.

Why

Let's put yourself in the shoes of my Gran - Mrs Johns - who buys products on the internet for her puppy. She's using IE and asked me if there was anything I could to to help her 'see' the words better on a computer screen. Being a nice kid I say - sure Gran whatever you need - and changed her screen resolution to 800 x 600 and the IE settings to view > font size > biggest. My Gran is really happy - she can see the icons on her desktop better , and the websites text is easier to read too.

Then one day she calls me and talk about yourfriendlypuppy.com and their products. She tells me that there is a nice rug she would like to buy for Frizzly - that's the puppy's name - but she want to make sure it's machine washable. She adds that she can't read the text as it is very small on her screen and wonder how I did it last time I increased her font size.

How do I explain her that it's because the web designer hasn't done his job properly and we cannot change the text size for this particular website?

yourfriendlypuppy.com has lost a customer because my Gran decided to buy the rug at mylittlepuppyshop.com. And when my Gran decided to send them an email about not being able to resize yourfriendlypuppy.com's text the web designer who designed the site lost a customer too.

---

How
Q: So how I go about allowing visitors to change the font size on my website? I hear you way.

Using relative font sizing in your stylesheet
This is the technique I tend to use the most. Using the css small, large, x-large 'keywords' or the ems, ex, and % allows the visitor browser settings to 'cahnge' the font size on your site.

How to do it:
This is how I personally do it - I am sure there are some better ways for you own circumstances.

First I add this to my stylesheet:

body{
font: 75% Arial, Helvetica, sans-serif;
line-height: 1.5em;
}

This would make the font size to appear as if it was approx 11/12px in the visitor's browser if his font size settings are set to normal. I usually also increase the line-height to make the text 'breathe' and easier to read. DO NOT use px for the line-height otherwise your lines will overlap if the text size is increased

I then define each element's size in percentages as well:

h1 { font-size: 150%; }
h2 { font-size: 125%; }

Note that this size will be relative to the body{} size in the styleseet so the h1s look as if they were between 16.5px/18px and the h2s between 13.75px/15px

Stylesheet Switcher
I have rarely used this method because it usually relies on Javascript or cookie acceptance from the visitor but there are good tutorials online on how to acheive this.

This usually allows you to still set the font size in px and by testing your stylesheet you will be able to see how your website 'degrades' using each of them

Final thoughts
It took me a bit of time to learn how to 'adapt' my designs so that the font would flow and not break everything but it's been worthwile when you get a customer on the phone saying that he's received some good feedback about his site from someone with visual impairment.