Welcome to WebmasterWorld Guest from

Forum Moderators: ergophobe

Message Too Old, No Replies

Letting your visitor choose the size of the text on your website

Why doing it and how?

3:52 pm on Feb 17, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 14, 2003
votes: 0

  • How many web designers are only testing their websites in IE?
  • How many web designers are using fixed pixel width for their font size?

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

    But after reading about website accessibility and how different people access websites in different ways i believe that using relative font sizing makes commercial sense


    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.


    OK my Gran is not called Johns and this is not a real exemple - but it could be. Now imagine the millions of other people that could be alienated by this fixed-size font technique, people using their built-in computer browsers, people who wouldn't call themselves disabled - but with a more limited sight that you and me nonetheless. This is why you need to consider if your visitors would benefit from your website allowing them to resize the font.

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

    A: Well I think there are mainly to options - but would love to hear about more:

  • using relative size in your stylsheet
  • using a stylesheet switcher

    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:

    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.

    If you would like some more examples of how to make your website accessible you could start by reading diveintoaccessibility.

  • 5:00 pm on Feb 17, 2006 (gmt 0)

    Senior Member

    WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

    joined:Mar 9, 2003
    votes: 8

    le_gber> That's great - thanks for that! Good work. I will go and do some experimenting.

    it's because the web designer hasn't done his job properly

    Or alternatively, it's because the browser developers didn't do their job properly. In fact that's almost certainly the case because you can specify font sizes in pixels and Opera and Firefox will still enlarge and decrease the size of the text.

    Absolute font-sizes should be as resizable as relative font-sizes are.

    AFAIK only IE can't make this happen.

    5:24 pm on Feb 17, 2006 (gmt 0)

    Senior Member

    WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

    joined:Mar 15, 2002
    votes: 0

    As a developer/designer, you can use pixel sizing and still get IE to resize the font size based on use preferences.

    How To: Get pixel fonts to resize in IE [webmasterworld.com]

    5:52 pm on Feb 17, 2006 (gmt 0)

    Senior Member

    WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

    joined:Oct 1, 2002
    votes: 0

    le_gber, that's a great post!

    IE can resize pixels in IE7 (it has a zoom feature), but until then you can use ems or percentages which usually goes better with the fluid design theory as a whole anyway, as it will help to retain other readability features such as line length and line-height


    Join The Conversation

    Moderators and Top Contributors

    Hot Threads This Week

    Featured Threads

    Free SEO Tools

    Hire Expert Members