Power To The People: Relative Font Sizes

by Bojan Mihelac

72 Reader Comments

Back to the Article
  1. Up until recently, I had an old computer at home which could only run NN4, IE5, and iCab.  NN4 was the closest to the functionality I wanted, so that’s what I used.  If I couldn’t use it on a site, I normally never went back to that site (which would of course, if others did so as well, lead to lower numbers).

    Now that I have a newer computer, I’m on Mozilla 1.6.  People who use older browsers may not have a choice (my case) or may now know how to download a new browser.  And the few who are on MSNTV (formerly WebTV) don’t have a choice.

    Anyway, there is a difference between catering to NN4 (what we have done in the past), being NN4 tolerant (what we will be doing with the next technical redesign of our site)and NN4 hostile (which we won’t do because we’re a public agency and try not to annoy people).

    Back to the article itself:

    As for duplicating browser features, the average user is not familiar with those features.  We’ve gotten multiple complaints about people not being able to zoom PDF maps we’ve published; zooming is a built-in feature of Acrobat Reader.  If it’s not out in front of them on the Web page, they often won’t know it’s there.

    Copy & paste the code below to embed this comment.
  2. thanks for this peice. I’ve just been struggling with fonts and this helped out quite a bit.

    Copy & paste the code below to embed this comment.
  3. I experimented with your code and all works fine.
    I prepared five stylesheets with only the initial font-size settings, and a single stylesheet with all other classes definitions, with relative dimensions.

    With Mozilla 1.4 I need to reload the page after a size change, so I added the following:

    [removed].href = [removed].href;

    at the end of both functions fontsizeup() and fontsizedown() and all works fine.

    Thanks!

    Copy & paste the code below to embed this comment.
  4. Hi


    Using CSS you can actually fool the Search Engines. Which is kinda Unethical. You can show an H1 tag smaller than a normal size font using CSS.

    SEO India

    Copy & paste the code below to embed this comment.
  5. I’m not usually so pernickity, but I happened to be reading the 2.1 recommendation and they’ve changed the scaling again.  It differs for each step now to be more usable.

    http://www.w3.org/TR/CSS21/fonts.html#font-size-props

    Copy & paste the code below to embed this comment.
  6. The example is outstanding.  Trouble is, I’m a novice.  At first, the instructions sounded like you plug in the script and you’re set to go.  That sounds too good to be true, even to me. But what if you don’t now how to work with css?  Anyone know a company who might volunteer to add this feature to a charitable organization’s website for the disabled community?

    Copy & paste the code below to embed this comment.
  7. Relative font sizing rocks. Personally, I try to use ems or % rather than keywords, but I can see there are circumstances in which keywords are better. Good article.

    Copy & paste the code below to embed this comment.
  8. Another wicked article

    Copy & paste the code below to embed this comment.
  9. Ok, that’s nice, but…. It weren’t better to instruct two diferent sizes limit according to the screen res?
    If people have, say, a 800X60 res, and swaps size ‘til the max size, it gets a very bad layout.
    Urges a script that manages this:
    if I have the screen set to 800×600, so the max size is this (say, from 8px to 11px); if it is upto 1024, it is that (say, from 11 to 15 px).

    It is more reasonable and elegant, I guess.

    Copy & paste the code below to embed this comment.
  10. I think everyone should be given the oppurtunity to resize their font. What if is to small or to big. It should be easy to resize font also. Give them some choices. you never know who is reading anything.

    Copy & paste the code below to embed this comment.
  11. I’m a bit confused, and after a testing, even more confused. Why has the author chosen to declare font-size in this manner:

    /* xx-small.css*/
    body,
    body div,
    body p,
    body th,
    body td,
    body li,
    body dd {
      font-size: xx-small;
      voice-family: “\”}\”“;
      voice-family: inherit;
      font-size: x-small
    }

    Wouldn’t the following be enough?

    body { font-size: xx-small }

    With the latter, everything in the body now is xx-small, no? From my testing, the author’s code actually causes some inherietance problems. Is there a point that I’m missing in writting it out the way the author has here?

    Copy & paste the code below to embed this comment.
  12. Hi Fernando, look this article for more information about relative font sizing:

    http://www.alistapart.com/articles/sizematters/

    Copy & paste the code below to embed this comment.