Power To The People: Relative Font Sizes

72 Reader Comments

1. Very nice. Power to the peeps indeed.

2. I like this approach, especially as it allows non-JS agents to switch style sheets through the use of the various alternate style sheets [which, in theory, show up in a menu of the application].

   As obvious as the idea is, it never occurred to me to do this. Thanks, Bojan for an enlightening article.

3. It is some kind of myth that IE only goes into quirks mode when a XML Prolog or PI is used before the DOCTYPE.

   Using a comment can already do that.

4. We did a “lighter” version of this last month at the Wisconsin Historical Society, just “large” and “Normal.” I wish I had seen this first…

5. “These names will be displayed in Firebird’s “Switch to alternate stylesheet” menu and Mozilla’s “View > Use style” menu.”

   Also in Opera’s View -> Style menu.

6. All I did was copy/paste the part. Apparently something did not connect along the way. Sorry about that.

7. This was a very good read. Btw, it also works fine with the PHP supported switcher, which you will find in the Server-Side section.

8. Why are the (small, medium, etc) styles applied to so many different elements?

   If you give everything a size using percentages, then all you have to do is change the size of the body element to resize the entire page.

9. Good article. One small thing: onclick=”” attributes shouldn’t have javascript: in them. They still work in most browsers but it’s not garaunteed to work everywhere, so it’s best to leave the javascript: out.

   I would suggest enhancing this technique by writing out the form and buttons used to control text sizing using Javascript – either with document.write() calls or using the DOM. That way users without Javascript won’t see a widget that doesn’t work. Even better, set up a server side client switcher which the script can “fall through” to if Javascript is disabled.

10. Jarek wrote: “All I did was copy/paste the part. Apparently something did not connect along the way.”

    Don’t forget to grab the other css files ; )

    href=”large.css”
    href=”medium.css”
    href=”small.css”
    href=”x-small.css”
    href=”xx-small.css”

11. Drats! That link didn’t work the way I wanted it too.

12. This article is published like 3 days after I created my own version.
    I can’t say I like it. We should only worry about older browsers. W3C DOM browsers should have a feature like the one on the wired news site: change font size through DHTML. Take a look at my site (http://geocities.com/dc_sfhe) or wired.com/news and you’ll see what I mean.
    I love the idea, but I don’t like how it’s done.

13. Dante Cubed has the right idea. Allow the user to carry on enlarging the text as large as they like. The example page in this article stops after a certain size.

    Another way to improve on the idea is to change the buttons when the font has reached its largest or smallest size. Make them inactive, so the user knows not to waste time clicking on them again and again in a frustrated attempt to enlarge the text even more.

    Note that pixel fonts may also be used in this scenario. The W3C declares them as “relative” units, believe it or not, so they are perfectly acceptable to use. It is only IE on Windows that stops people resizing fonts set in pixels. In which case, a style switcher is essential. But otherwise, just let the user resize the text themselves merely by using the browser’s built-in controls. Then no extra code at all is needed.

14. That message was related to the one directly above it, in which the quotes and apostrophes got screwed up, not to implementation of the technique itself 🙂

15. All we did here was replicate a functionality that a good browser should have. It does not really help accessibility, if I have to do that for every page of the site. Therefor, a solution that stores the settings makes a lot more sense. I am some testing shy from releasing a PHP script that allows resizing of the font, colours and page layout, and stores the result in a cookie, which helps a lot more. Watch this space. I got the idea after reading Joe Clark’s article on the subject:
    http://www.naarvoren.nl/artikel/high_accessibility.html

16. My font changing system on my site has 4 buttons:
    1. Enlarge Text
    2. Reduce Text Size
    3. Make text darker (originally it’s a shade of green)
    4. Return to default text
    I give the font size as 13px. Since almost all my visitors use Internet Explorer, they can resize text as they wish. And if they want the original text back, it’s there with the click of a button.
    The script is like this:
    var fontsize = 13;
    function bigText() {
    fontsize++;
    document.getElementById(“content”).style.fontSize=fontsize+”px”;
    }
    And they buttons themselves are only available in W3C DOM Capable browsers.

17. Great article, not sure what to say other then thanks. Not sure if I will implement this in to my design. But its really neat and I could Imagen it coming in handy in the future.

18. One reason I can think of to limit text sizes (as opposed to increasing ad infinitum) is that the layout might become unusable at a certain point. Certainly it would become less appealing.

    I realize that some disabled users might want enormous, screen-size text; they should probably be using a screen reader or text-enlarging software. Just a thought.

19. Aaah … it all makes sense now.

    http://www.alistapart.com/discuss/relafont/#c7558

    http://www.alistapart.com/discuss/relafont/#c7564

    8 )

20. if you want to have a fun site that lets you change colors, sort of like the old ipod site.

21. nice and clean article.
    just one complain: the example warns about having the XML delcaration on the first line because of the IE problem. but the way it it done in the source with on the 2nd line is not the best solution.
    the declaration is optional anyway so i guess it is better to leave it out completely. you have to state the encoding with a HTTP header then, but thats what most browsers would use anyway. as i understood XML, if an XML declaration is present it *must* be the start of the file so that a processor is able to guess the encoding. i did not check but i doubt the example should validate in a fully compliant XML processor. the w3c HTML validator does not complain, but i guess that does not say it is ok to do it the way it is done.

22. does no one use “ctrl+mouse-wheel” anymore ??? i do all the time…

    instead of using so much code we should make apple do a mouse with a mouse-wheel so all of you soo called designers can see the simplicity of a PC mouse, instead of all this annoying code.

    the change font size has been a html ingredience for many years know and people still dosn’t seem to see the simplicity in just using the right tag sizing…

23. Helplful article which combines some of well known facts and extends them in an easy “useit” solution (after you download all the files 🙂

24. … the beginning of this method, particularly this part:

    /* default font size*/
    @import url(small.css);

    You put this rule in the html file right? And the following rules, where do you put them? What is contained in the small.css file? Sorry I do not get the logic…

    /* Netscape 4 safe font sizes */
    body, div, p, th, td, li, dd {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    }

    h1 {
    font-size: 130%;
    font-weight: bold;
    }

    h2 {
    font-size: 110%;
    font-weight: bold;
    }

    Thank you for your help

25. i think the idea described in this article is nice, but look at this web site: http://www.glish.com/ – there, in the upper right corner you can see a similar js font size switcher plus a font switcher. and, as mentioned in one of the previous posts in this discussion, the buttons used to change the font size become unclickable when you reach the smallest or the largest font size possible. also, if you look at the js source code, you’ll see that the script sets a cookie to remember your preference for future visits…

26. In my script only the main content area’s text is changed. The actual text of the buttons don’t change at all.

27. Having done quite a bit of experimenting with switching stylesheets myself, I found this approach quite interesting. Intellectually.
    I’ve yet to see a really good, trouble-free implementation of font resizing on any of the dozen or so sites where I’ve seen it used. (A visual “bump” when the page re-renders; horizontal scrollbars; general ugliness at the new font-size; etc…)
    Also, it seems to me that it adds a lot of complexity in exchange for very little payoff.
    Five extra server requests plus the extra weight just to nudge the fonts!

    In fact, the whole W3C spec for alternate stylesheets leaves a lot to be desired. Especially in that it only affects one page at a time rather than at the domain (or site)level.
    The whole multiple stylesheet switching thing is and will remain little more than a CSS parlour trick if you ask me.

    However, I have found a two-sheet switcher very useful in fine tuning style sheets to accomodate IE5’s quirks behavior. I remove the doctype so the page viewed in IE6 emulates IE5. Then I add the style amendments to stylesheet #2 and click the switcher to immediately view the result. (I set the stylesheets and javascript up differently than Paul Snowden’s method, however.)
    After the “right” quirks mode style rules are in the second stylesheet, I move them over to stylesheet #1 along with the Tantek Celik hack. Then the doctype gets uncommented and the javascript removed.

28. I don’t see a reason to duplicate functionality built into most web browsers- most likely implementations of this ‘solution’ will break more often than a flexible positioning model.

29. I see a bunch of ‘ya this is great’ comments and thought I would add a ‘what is the point?’ Seriously though, you now have 5 stylesheets to keep in mind and some more JS in your page for what purpose? To mimic behaviour found in all browsers if you use percentage font sizes?

    This is a cool style switcher but I wouldn’t encourage anyone to use it. Maybe this was for the so called *enlightened* blogger…

30. I guess it is always war between designers who always want small fonts, and usability exeperts who wants them at least 12px, and here is the reader between them, who has the choice (we hope he has) in the second level menu. wow, has ever anyone clicked “Tools > Mail and News > Send a link” to send link to interesting page to a friend? I guess this options could be in the toolbar by default or at least in context menus.

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

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

33. 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

34. 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

35. 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.

36. 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.

37. 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 Javascript:
    http://www.w3.org/DOM/DOMTR

38. 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

39. 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.

40. in the hixie link. And still way off topic.

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

42. 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

43. I agree with d.v. kerns – NN4 is a dead browser, which is used by 0.4% of surfers (according to http://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…

44. 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.

45. 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.

46. 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

47. Firebird 0.7?!
    Pah! You want Firefox 0.8!

48. 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!

49. 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”.

50. …

51. 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.

52. 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.

53. 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.

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

55. 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

56. Two words: get Opera.

57. 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.

58. 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.

59. Thank you for the good idea.

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

61. 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.

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

63. 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!

64. 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

65. 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

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

67. 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.

68. Another wicked article

69. 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.

70. 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.

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

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

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