Power To The People: Relative Font Sizes

by Bojan Mihelac

72 Reader Comments

Back to the Article
  1. Has anybody found a hack that prevents IE form going into quirks mode without hte DOCTYPE declaration being the very first bit of content passed to it?

    Copy & paste the code below to embed this comment.
  2. How funny: someone looking for hacks. Usually hacks will find you first.

    I don’t know of any IE doctype hacks. Why are you so afraid of Quirks Mode anway?

    Copy & paste the code below to embed this comment.
  3. As mentioned earlier, a much wider approach:
    http://icant.co.uk/ltlg/

    Allows users to:
    – Resize to a font size of choice
    – choose a Colour and background of choice
    – move the navigation around
    – Store the settings in a cookie

    Allows the designer to
    – Control all of that with CSS

    Give it a spin

    Copy & paste the code below to embed this comment.
  4. I’ve used a variation of this technique on a couple of my sites for about a year now, users love it.  Instead of styling a different sheet for each font size, I’m just using a JavaScript to increase or decrease the size of the font.  Check it out http://reclaimdemocracy.org/

    Rich
    http://RichPoints.com

    Copy & paste the code below to embed this comment.
  5. Read the earlier posts. I said about the exact same thing.
    Chris does the same thing on his site. It doesn’t seem to be there to help the reader read the text. It seems Chris has just put the display thing there for the wow-factor.

    Copy & paste the code below to embed this comment.
  6. If you mean the onlinetools site, that is true and it’ll be skipped soon. Using Javascript only totally defies the idea of adding this functionality as an accessibility enhancement. It is simply mimicking the browser resize functionality.
    Hence learning to let go, which works without javascript.
    Dante, please stop the whole thing about “why is quirksmode bad”. It is bad because it keeps us in limbo using handy CSS.

     

    Copy & paste the code below to embed this comment.
  7. ALA want to be a standard compliant site, or? but in many articles the XHTML code of the examples is not standard compliant. please rename your examples to .xhtml files and test it on a real XHTML browser like the mozilla. so you can find bad XHTML code and fix it.

    and please read the DOM specification, if you want to write good [removed]
    http://www.w3.org/DOM/DOMTR

    Copy & paste the code below to embed this comment.
  8. Yeah, let’s follow standards down a cliff.
    .xhtml documents display as text in my opera, funnily enough.
    Furthermore I can set up my server to render .xhtml as .asp or .php if I want to, the file extension is meaningless.
    If you don’t comment on the content, please just don’t comment at all. We all can read the recommendations and standards, but it helps a lot more showing people the way rather than showing them what is perfect but won’t work in the most environments.
    All about the woes and goodies of XHTML:
    http://hixie.ch/advocacy/xhtml

    Copy & paste the code below to embed this comment.
  9. i do not say that you should use application/xhtml+xml on your webserver. (the w3c say that it is okey to use text/html with XHTML 1.0) i want to say that you should test your XHTML examples as xhtml files before you publish them. so you can see errors in your xml code. i think its makes no sense to publish xhtml pages which do not work on normal xhtml browsers (and the CSS validator). if you do not want to make your XHTML pages compliant to standard compliant XHTML browsers (XML parsers), i think, it’s better to use HTML.

    Copy & paste the code below to embed this comment.
  10. in the hixie link. And still way off topic.

    Copy & paste the code below to embed this comment.
  11. Thanks for the article. But shouldn’t we collectively decide to move past doing anything to support NS4? Any standards based markup constructed using DIVS and CSS is already FUBAR from the start in NS4…so why then do we still pander to one of the worst browsers ever made?

    Copy & paste the code below to embed this comment.
  12. No, I say that you can publish them as .html files if you want, but you should test them on your local machine as .xhtml files. This has nothing to do with file extension in the URI on the webserver.

    Why should it be off topic to discuss about writing XHTML on a website about standard compliant webdesign?

    And why do you think is better to publish bad XHTML code then the right one. How do that help to “showing people the way”? How can the people learn to write standard compliant CSS code, when they can not validate it because they have copied your sourcecode and do not know where the problem is. should a teacher not show the right way? And well-formed XHTML (XML) code works on ANY environment. That are not dreams of the future!

    To understand why well-formed XML code is important you should read the following pages:
    http://ln.hixie.ch/?start=1074730185&count=1
    http://ln.hixie.ch/?start=1074782017&count=1

    Copy & paste the code below to embed this comment.
  13. I agree with d.v. kerns – NN4 is a dead browser, which is used by 0.4% of surfers (according to www.w3schools.com stats), and I bet, half of them are developers, just doing it for testing. Since there is a widely used method of forcing users into buying new CPUs by releasing software, which is not supported by old computers (and nobody objects to that, correct?), why not to adopt the same technique and gently force users to update their browsers? That, at least, is free, or relatively cheap. People get better browsers, we get to concentrate of the creative aspects of web design, people get better websites, everybody wins…
    On the subject: my experience shows that computer-savvy people who have problems reading small fonts, just change their display resolution. I have seen gorgeous 21’ monitors, running at 800×600. Those who do not know how to adjust display resolution, usually don’t know how to use browser’s text size adjustment features, FOR THEM:
    Font size changer may enhance your website’s design, or may not, depends on implementation. I kind of like the idea of selectively changing just the content area font size, assuming that the layout allows for it.
    Overall: good implementation of modern technology for an absolete reason…

    Copy & paste the code below to embed this comment.
  14. No-one has yet mentioned this script:

    http://www.dyn-web.com/dhtml/sizefont/sizerdx.html

    Another JS alternative which is very flexible and makes it very easy to control which divs on a page you want to be able to resize.  You can also pass the script a string if you don’t want to use the cookie (Looks like the glish one might permit this too).  In js terms none of these text-size scripts is rocket science but this one strikes me as quite elegant.

    Copy & paste the code below to embed this comment.
  15. PPK says Netscape 4 controls 2% of the browser market. I thought he was smart. The only people who surf with NN4 are people who test with it, as mentioned above. PPK should know that.

    I have been thinking and I have come to the conclusion that there are a few schools of thought on this subject of font sizes:
    1. Dino-Filtering: This is the name I give to the approach that sites like Simple Bits use: There is a link tag to the stylesheet, but the only rule is an import, which imports the actual styles. This filters out older browsers (dinosaurs, like NN4) from seeing the styles; they get their default font size and unstyled markup.
    2. The Onlinetools-Wired News-SFHE approach: Let the user choose the font size of his choice.
    3. Elastic Design: set the font size in ems or percentages.
    4. The Too-bad-for-IE approach: Set the font size in pixels and don’t let the user change the font size through DHTML.
    5. The Bojan Approach: Use endless hacks to marginally include older browsers.

    I use a combination of #2 and #4 for my history site and #4 for my personal site.

    Copy & paste the code below to embed this comment.
  16. I forgot to mention that there are two new CSS3 declarations that replace that script that qed mentioned: min/max-font-size. They allow you to set a minimum or maximum font size. No browser supports them yet. Test page: http://geocities.com/seanmhall2003/css3/fonts.html

    Copy & paste the code below to embed this comment.
  17. Firebird 0.7?!
    Pah! You want Firefox 0.8!

    Copy & paste the code below to embed this comment.
  18. First off, is anyone wondering who makes up the lingering 2%?  I suggest checking into the “recommended software load” of an American jumbo jet manufacturer that shall remain nameless, where until recently IE wasn’t even on the approved list and a number of people were waiting for NN5 to hit the market.

    As to the usefulness of an obvious way to change font size, keep in mind that my mother, who neither sees nor hears very well and has been caught entering URLs into the search box on Google, still spends money.  Like it or not, commerce fuels the internet, and catering to disabled computer-illiterates with big wallets brings in the fuel.

    P.S. The number of web-related acronyms with which I am familiar is exceeded only by the number of languages I’ve used over the years, and I could wallpaper my office with the covers of “computer books” on my shelf, but I didn’t know Ctrl-MouseWheel would resize my browser text.  Never assume your users know a damn thing!

    Copy & paste the code below to embed this comment.
  19. You guys have too much time on your hands. I can’t believe you waste your time and potentially your client’s money on coding for a function that is built into the browser. Come on man stop treating the average user as an idiot. If we can get to a website chances are we can navigate “view – text size – larger”.

    Copy & paste the code below to embed this comment.
  20. Copy & paste the code below to embed this comment.
  21. 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.
  22. 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.
  23. 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.
  24. Thanks for this information – particularly the style sheet hints.

    Copy & paste the code below to embed this comment.
  25. 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.
  26. Two words: get Opera.

    Copy & paste the code below to embed this comment.
  27. 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.
  28. 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.
  29. Thank you for the good idea.

    Copy & paste the code below to embed this comment.
  30. 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.
  31. 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.
  32. 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.
  33. 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.
  34. 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.
  35. 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.
  36. 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.
  37. 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.
  38. Another wicked article

    Copy & paste the code below to embed this comment.
  39. 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.
  40. 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.
  41. 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.
  42. 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.