unraveled

A Short Story About Font-Sizing

  1. In the beginning, Joshua sized fonts using pixels.
  2. Now the fonts were small and unsizable, the weblog was not accessible and the Spirit of Zeldman was hovering over the weblog.
  3. Then Joshua said, “Let fonts be sized with ems” and it was so. Joshua saw that accessible fonts were good.
  4. Then Joshua heard the voice of Zeldman saying, “..if you try to force ems to deliver undersized text, what looks elegant on your monitor could be mousetype on ours. If you commit this act in the name of accessibility, you’re kidding yourself.”
  5. Joshua agreed with Zeldman; he was delivering smaller text and when it was resized in IE on the PC, it was tiny indeed.
  6. So Joshua said, “Let fonts be sized with pixels… again” and it was so. Joshua was annoyed that IE on the PC couldn’t resize pixel-sized fonts like it should, but still believed he was doing the best thing.
  7. Then Joshua heard the voice of some wise-ass named Jack saying, “my eyes really hurt i cannot resize the text ouch ouch ouch ouch ouch.”
  8. Joshua was at a quandary: he could either size fonts with pixels, realizing that many visitors wouldn’t be able to resize fonts, or size text with ems, knowing that text may look like mousetype on some browsers.
  9. Then Joshua remembered Zeldman’s entry saying, “Alternately, client and aesthetics permitting, you can design all your sites using only normal or oversized type set with ems. No CSS widgets required, no legibility problems even in IE/Win.”
  10. Joshua knew an oversized type set was the only way, sighed, and said, “Let fonts be sized with ems.” and it was so.
  11. Then Joshua looked at his website, knew the text was accessible albeit kind of large, but it was very good.

Update (December 13, 2002): I’ve since switched to using percentages for the base font-size because there’s a smaller chance that they’ll cause mousetype in IE/Win. I’m using a base font-size of 100%. If you also decide to use percentages, I recommend sizing them no lower than 85% to avoid mousetype.

Comments

  1. Hmmm, I really liked the smaller text when you used pixels, but as I’m typing is this box, I’m really appreciating the big font - no leaning forward to see what I’m typing!

    As far as my site goes - I refuse to code around the fact that IE 5 has a bug that breaks the font resizing when pixels are used in the style sheet. I see it as a good opportunity to promote more standards compliant browsers, such as Mozilla.

    But then, for the most part, I don’t care who can read my site.

    …something else to consider for my re-design (which I’m thinking I may never finish).

    Brad Lauster on 7 Aug 02

  2. I can see switching among any of the type sizes, depending on my workstation at the time (18” and 15.9” monitors at 1280x1024) and my distance from the monitor at the time (slouched forward, leaning back, etc.).

    BTW, the preview button is funky. It showed my comment at the top of the page. I scrolled down to find the comment box and found a few HTML codes in it, instead of my message.

    -Jack (proud wise-ass/assclown)

    Jack on 7 Aug 02

  3. If switching sizes sounds unlikely, it all has to do with ease of use. In IE I hold CTRL down and move the mouse wheel. It sure beats putting a resize button on the toolbar.

    Jack on 7 Aug 02

  4. Brad, both IE 5 and 6 break font resizing. I try to promote standards too but if people can’t read my site, why would they ever listen to my standard evangelizing?It is nice to have such large text in the comment box though, eh? Big fonts are on the comeback! People now care about their long-term eyesight! You heard it here first.

    Jack, thanks for pointing out the preview funkiness but I’m aware of the problem. I should have it fixed within a day or two.

    Joshua on 7 Aug 02

  5. I love it! Big fonts all the way! …tiny fonts are played out!

    Oh - Joshua, the fonts are smaller than they were earlier today. Did you change something?

    Brad Lauster on 7 Aug 02

  6. Yes, I changed the font sizing again. I’m now using percentages (note the change in #10) and it seems to be working great.

    The big fonts were friendly and easy to read but they caused way too much scrolling, so I had to do something.

    Joshua on 7 Aug 02

  7. You know, technically it’s not a short story. It’s just a numbered list.

    Jack on 7 Aug 02

  8. Glad to hear you’re back on the relative side. Not that I’m biased or anything. I’m always used ems on Zen Haiku. I’m curious why you are setting your body font size to 80% rather than 100%.

    Chad Lundgren on 8 Aug 02

  9. Wow. I’m impressed with how diplomatic you are in your responses to the constant Jack attacks. He sure keeps you on your feet.

    What I’ve been using incidentally on the sites I maintain at work, which Jack wouldn’t agree with, is one style sheet with text and layout rules and separate sheets for IE, NN6+, NN4 (sniffed and put out with JS) that use keywords (small for IE and NN6 and x-small for NN4) to size body and commonly used tags. Then I use percentages for larger text (e.g. headings) and the <small> tag for smaller text. Probably not the best solution, but it works for me to keep the text-size relatively small, but allows for scaling up and down using the browser’s capabilities. There’s no way I’m sticking to the huge defaults of the browser. It can mean huge scrolling windows at times.

    michael on 8 Aug 02

  10. Joshua, I disagree on a technicality. When designing with style sheets there is a default font size — the browser’s default. Why some designers feel they know better than the user what’s best for the user I’ll never understand.

    Michael, I was invited. I’m a wiseass, full of myself and direct with my opinions. If people grow weary, I can leave at any time.

    Jack on 8 Aug 02

  11. Jack, I enjoy your comments. I love devil’s advocate type questions and comments. Makes you challenge yourself and forces you to consider different perspectives/possibilities. I have often toyed with the idea of playing devil’s advocate to my own comments on my weblog by logging in as a different user. Kind of laying both sides of a chessboard. When I said you keep Joshua on his feet, I meant that as a good thing!

    michael on 8 Aug 02


  12. I especially like the email addresses — schonchin@heyguyschillout.yahoo.com

    michael on 8 Aug 02

  13. Michael, my my my my my. You don’t understand. I’m not playing devil’s advocate. I really am this way.

    Jack on 8 Aug 02

  14. 100% made everything too big and I was too lazy to go through and change the size of everything, although there really aren’t that many specified font sizes. The fonts are about the same size as they were when sized with pixels, but when IE renders fonts with percentages, they seem to be more readable (at least on IE on PC) because of larger spacing. I wish I knew more about how different units affected the font rendering…

    Joshua on 8 Aug 02

  15. Ummmm. 100% is the default. It’s the reality of the situation. So you’re expecting the world to change to your tastes instead of the other way around. IMHO, if the default text is too big for you, you should downsize it in your browser and not foist smaller text on the rest of us.

    That’s right, I’m never happy.

    Jack on 8 Aug 02

  16. When you’re designing style sheets, there are no defaults and you can do whatever you want. I think you’re referring to the default for the browser, which I have little control over when I’m using relative font sizes.

    Right now, the default font-size on both IE and Mozilla is very close to what it was before when I was using pixels, but it’s resizable and just as accessible as it was when the fonts were larger. That makes me and most of my visitors happy.

    I’m sorry you’re not happy, Jack, but I’m tired of playing with fonts, and I would like to get back to work.

    Joshua on 8 Aug 02

  17. You all suck

    Izzy on 9 Dec 02

Go back to the top of this entry ↑

Comments are now closed for this entry