Power To The People: Relative Font Sizes

by Bojan Mihelac

72 Reader Comments

Back to the Article
  1. Thanks for the article. It seems that this method could be upgraded furtherly, so the alternative stylesheets xx-small.css through large.css could bring additional benefits for the user. Like better contrast of text, if user choose a larger font.

    Copy & paste the code below to embed this comment.
  2. You can’t design for the “average user”, you have to design for the lowest common denominator in the audience you intend to reach.  Targeting average users is one of the reasons we’ve ended up with web sites that only work in one browser.  Designers said “Most people use Netscape so we’ll design for that.”  Now that most people don’t use Netscape, all those sites, along with the techniques dreamt up implement them, are obsolete.

    Besides, the average user IS an idiot.

    Copy & paste the code below to embed this comment.
  3. I would add to Steve J’s list a certain enormous state university in Ohio, which is certainly not the only one in the US. Probably also any number of underfunded operations like public libraries and high schools still making due with 100mhz machines from the mid 90’s that can’t even fit the newest Netscape browser on their hdd.

    I agree that developing for NN4 is a waste of time and that anyone still using such browsers by choice is simply not interested in pretty layouts and non-default fonts, but developing in a way that actively excludes NN4 and other such browsers from accessing content is just taking the easy way out.

    Copy & paste the code below to embed this comment.
  4. Thanks for this information – particularly the style sheet hints.

    Copy & paste the code below to embed this comment.
  5. Why is it necessary to change an entire Stylesheet when you can just use DHTML to change the Stylesheet. I think we should allow the user to view the page in Plain Text. I added a plain text stylesheet to my history site.
    Opera 7.23 has a built in function that switches stylesheets, it’s under View > Style

    Copy & paste the code below to embed this comment.
  6. Two words: get Opera.

    Copy & paste the code below to embed this comment.
  7. I have both Opera 7 and Netscape 4 on my computer. Opera is great for older browsers (light), but people who use these old computers don’t have a damn clue what Opera is.

    Copy & paste the code below to embed this comment.
  8. In the article it said that the font-change option is burried far away in the menu. That’s true, but don’t forget those who have a mouse wheel. If you press CTRL and scroll your mouse wheel, a good webpage will size the fonts bigger and smaller on IE and Opera. On Netscape use CTRL and the + and – keys on the numkeypad.

    Copy & paste the code below to embed this comment.
  9. Thank you for the good idea.

    Copy & paste the code below to embed this comment.
  10. When I try and change the input type to image I get an error can’t find /GET

    Works fine when I use “button” but not “image” what am I missing??

    Copy & paste the code below to embed this comment.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. Another wicked article

    Copy & paste the code below to embed this comment.
  19. 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.
  20. 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.
  21. 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.
  22. 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.