homepage Welcome to WebmasterWorld Guest from 54.237.99.131
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / WebmasterWorld / Accessibility and Usability
Forum Library, Charter, Moderators: ergophobe

Accessibility and Usability Forum

    
Letting your visitor choose the size of the text on your website
Why doing it and how?
le_gber

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 7 posted 3:52 pm on Feb 17, 2006 (gmt 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


    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.

    ---

    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.


    How
    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:

    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.

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

  •  

    ronin

    WebmasterWorld Senior Member 10+ Year Member



     
    Msg#: 7 posted 5:00 pm on Feb 17, 2006 (gmt 0)

    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.

    DrDoc

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



     
    Msg#: 7 posted 5:24 pm on Feb 17, 2006 (gmt 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]

    SuzyUK

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



     
    Msg#: 7 posted 5:52 pm on Feb 17, 2006 (gmt 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

    Global Options:
     top home search open messages active posts  
     

    Home / Forums Index / WebmasterWorld / Accessibility and Usability
    rss feed

    All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
    Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
    WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
    © Webmaster World 1996-2014 all rights reserved