How to setup Font Text Size on webpage: [A (small font) | A (medium font) | A (large font) ]


  • Hello


    I’m designing a website using Microsoft expression.


    I need help on how to set up Font Text Size options: [A (small font) | A (medium font) | A (large font) ] on my webpages so that users can select the text size they want when viewing my site.



    Thursday, July 23, 2009 3:22 PM

All replies

  • Here's one way:

    Here's another:

    The way I have done it in the past is:
    1) Give the links for resizing
    2) When a link is selected process that and set a cookie
    3) Check the presense of the cookie when any page loads and, with PHP, print out a resizing CSS stylesheet
    4) Anytime someone visits the site, check for the cookie and print out the appropriate stylesheet
    Chris Hanscom - Microsoft MVP
    Veign on Facebook | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    • Proposed as answer by Veign Thursday, July 23, 2009 3:26 PM
    • Edited by Veign Thursday, July 23, 2009 3:43 PM
    Thursday, July 23, 2009 3:26 PM
  • Andy,

    Users can change the font size of your site in their browser options. If they have less than perfect eyes, or a tiny yet high resolution screen, they may already have their browser set for larger text, for example.

    Just curious: is there a reason you want to set it up the way you are describing? (A specific non-browser-savvy audience, for example?)

    Thursday, July 23, 2009 3:39 PM
  • While you can use a stylesheet switcher it is much easier to use fonts that scale properly such as keywords, ems or percents. Then the visitor can use the native browser tools to resize the text on your page so that it fits their needs.

    Design for "medium" and check how the page scales when you use View > Zoom > Text Size only. Adjust as necessary for two clicks up and one down.
    MS MVP Expression Tutorials & Help and online instructor led Expression Classes
    Thursday, July 23, 2009 4:04 PM
  • To the OP: Although I have seen the "three-A's" text-size adjustment before in the menu bar of Web pages, the only time that I have ever been tempted to use it to adjust text size was when the developer inexplicably adopted an x-small font size for his principal body text. Perhaps he wanted to encourage use of the resizer. Whatever.

    Just design the site properly for readability by all age groups of visitors that you expect to have, make sure that the design doesn't break when text is resized, and concentrate on your site content. Your visitors do not come to see your fancy interface gadgets, howsoever much they may please and impress you. Just make the site readable and provide compelling content and you're good to go.

    Thursday, July 23, 2009 4:54 PM
  • Hello

    I tried the second method, it work alright on fonts on plain webpage. but not on fonts inside a tables.

    this is the code, any suggestion how i can modify the code or any other solutions?

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Increase Font Size Decrease Font</title>
    <style type="text/css">
    .style1 {
     font-size: small;
    <script language="JavaScript" type="text/javascript">function changeFontSize(inc){  var p = document.getElementsByTagName('p');  for(n=0; n<p.length; n++) {    if(p[n].style.fontSize) {       var size = parseInt(p[n].style.fontSize.replace("px", ""));    } else {       var size = 12;    }    p[n].style.fontSize = size+inc + 'px';   }}</script>
    <a href="javascript:changeFontSize(5)">Increase Font Size</a> <a href="javascript:changeFontSize(-5)">Decrease Font Size</a>

    Sunday, August 02, 2009 3:47 AM