Power To The People: Relative Font Sizes

73 Reader Comments

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.

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.

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.

4. Thanks for this information – particularly the style sheet hints.

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

6. Two words: get Opera.

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.

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.

9. Thank you for the good idea.

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??

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.

12. thanks for this peice. I’ve just been struggling with fonts and this helped out quite a bit.

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:

    window.location.href = window.location.href;

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

    Thanks!

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

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

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?

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.

18. Another wicked article

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.

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.

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?

22. Hi Fernando, look this article for more information about relative font sizing:

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

23. Pingback: Web typography: a refresher and history - Jeffrey Zeldman Presents