Skip to: Navigation | Content | Sidebar | Footer

Weblog Entry

Font Size Redux

November 28, 2003

Phew. We’re turning over the font size issue so vigorously it’s gone green.

An on-screen style switcher was due on this site sometime down the pipeline, but I rushed it in response to the discussion. See right-hand sidebar — if things are funky, reload.

Here is every way this site now caters to potential font size problems:

  1. All fonts are defined in relative units so that even IE can scale them.
  2. Two style sheets exist, one with units defined, and one that bases units on your default browser size.
  3. You can switch between these with any browser capable of style sheet switching.
  4. You can choose a style and make it persistent by hitting one of the buttons on the right, thanks to the magic of cookies.

The only potential group that might still have a problem with all of this are an insignificantly miniscule fraction of users who disable scripting/cookies, retain CSS, leave their browser default at 16px, can’t read the text, and refuse to suffer the inconvenience of hitting two keys upon entering, and two keys upon leaving this site.

I’ve yet to write the alternate page that will load if scripting is disabled and the links are hit, but rest assured, that’s coming too.

Reader Comments

jgraham says:
November 28, 03h

Thanks Dave :) This rocks.

(bugette - with the larger type, the bottom of the preview / post buttons overlap, and this box is a little bigger than the container, so there are weird effects when you reach the end of the line. They could be Mozilla bugs of course).

jgraham says:
November 28, 03h

Argh… by ‘this box’ I mean the comment box, and by ‘overlap’ I mean ‘are cut off at the bottom’. Must not post when tired…

Eric says:
November 28, 04h

Sorry to be a nitpicker, but am I alone in thinking the icons are a bit confusing, as they seem to just be upper/lower case, meaning you would be switching to all caps? I know that seems silly, but I’m sure there are some AOL people out there who would do it :)

Firas says:
November 28, 05h

No, you’re not alone. I think it’s extremely suggestive of a case transformation.

I’m just nitpicking because it’s an easy fix :)

November 28, 07h

I admit, I noticed the potentialy confusing icons, as well. Aside from that, though, the style-switching works great. Also, the icons are beautiful – just a little confusing. :)

Great work!


ACJ says:
November 28, 09h

Yup, I was here to say what Erik said.
Apart from that, I think it’s a really nice addition.

Dave S. says:
November 28, 09h

You’ll get over it. Obviously we all figured out what they do, yeah?

Lenny says:
November 28, 10h

Thanks for the alternate stylesheet, but I have two issues remaining:

1. The buttons. I figured it out, but why confuse people unneccessarily?

2. The images. Perhaps the alternate stylesheet could turn off FIR.

Dave S. says:
November 28, 10h


1) Why not?

2) I have a grand scheme. Patience.

Lenny says:
November 28, 10h

I have a feeling you’ll be able to finish the alternate stylesheet before my vision starts to dwindle, so as long as you have the intent to do it, I have been appeased.

Dris says:
November 29, 02h

Can’t help but enjoy your responses above, Dave. Made me smile.

Besides that, I’m in agreement on the icon letters thing.

Chris says:
November 29, 03h

Random thought, but is the addition of a style sheet switcher which increases font size the best/only way around this problem?

I also didn’t find the lower case upper case thing confusing…although I can see where the other guys are coming from

November 29, 04h

Thanks for the styleswitcher buttons Dave! Would it be possible to add a button for a text size inbetween the existing small and large setting? Only the text when set larger is a tad /too/ large. You might also want to add an even larger size for users who think the opposite!

The main problem with a larger size is that the column width remains quite small, compared with the available screen estate. (That’s saying nicely that there’s lots of wasted space either side, that I wish the text would expand into, so I didn’t have to scroll so much.) :-)

Next all you have to do is add a button to change the font family. Oh, and one to alter the background colours. And one to swap the layout left to right. And one to…. ok, ok, I’ll stop!

(BTW, the large size reverts to small again when Previewing a post.)

Lenny says:
November 29, 06h

Chris: this is a basic solution for a font larger than the standard. Dave should not be responsible for custom-tailoring the site for users’ exact needs. Any customization beyond an alternate stylesheet for larger fonts should be done by the user.

Dave S. says:
November 29, 07h

It’s amusing to me that nowhere is the “give an inch, they’ll want a mile” maxim truer than on the web. Perhaps that’s because the barriers between author and audience are generally lower. But perhaps it’s also because seeing a response to a particular request is a catalyst for further requests… I’m not sure, I’ve just observed it often enough to spot the trend.

Dave S. says:
November 29, 07h

Joel - what’s the problem with persistence? There are layout quirks, but I believe if you’ve got cookies enabled it should work as expected. Though I’ve heard OmniWeb isn’t picking up any style at all…

Firas says:
November 29, 08h

Come on, you know you have to have an option to horizontally flip the site.

And while you’re at it, where’s the Hebrew version?

Dave S. says:
November 29, 09h

Ooh, you’re right, I’m totally slacking on my daily translations. Shame on me. One English -> Hebrew dictionary added to my Amazon cart! Stay tuned for Assyrian, Malaysian, and Tlingit.

November 29, 11h

Maybe you can apply a sniffer script that will redirect the user to the right page with the right CSS file *evil grin*

Joel says:
November 29, 11h

Thanks for the font size switcher! Despite having pretty good vision, I always zoom up small text on websites since I like to keep my face a healthy 3 ft. away from the screen. It’s good to have the convenience of a persistent setting to keep it that way. (Wait, it *is* persistent, right? …Damn, it appears not to be, which greatly reduces its utility.)

Another little problem – in Safari with the large font size, the “about mezzoblue” text wraps and screws up the menu appearance. My solution would be to not size the menu text up so much, since it isn’t used as often, but I suppose you could also increase the menu width.

Lenny says:
November 30, 01h

I’m having the same effect.

kasey says:
November 30, 08h

Thanks for adding the larger font style sheet. Not that I mind using Ctl+ constantly, but I believe there are many like me that strain all day trying to make out what’s on the screen before giving in to Ctl+. Any sign of consciousness raising on this issue among web designers is very welcome.

Mike says:
November 30, 10h


Good work with the two style sheets. I’ve had to do the same on many client sites, just too many ‘hey my websites broken’ e-mails when someone in a clients office accidentally changes the default font on their I.E. 5 or 5.5 (I’m lucky if they have 6).

For most we’ve even gone so far as to set the cookie for the pixel size in the computers of the clients office (little do they know) and put the switcher on the ‘Accessibility’ page.

For clarity we used text on the unstyled buttons (as they are in the accessibility page, not on the sidebar of every page): ‘resizable font size’ and ‘16px base font size’.

Good ol’ real world solutions.

Mark says:
November 30, 10h

I am a web dev guy myself and sympathize with your dilemma, but I have to wonder whether people who are so unsophisticated as to be unaware of the browser’s built-in enlarge/reduce will be clued in enough to pick up on the resize icon meaning either. I’m currently building a site for an accessible construction firm. The owner is probably physically a good representative of his audience - a bifocal wearer in his early 60’s. Even he hadn’t the slightest clue he could change typesizes. If the people who work in the industry are willfully ignorant, what chance do we have of reaching the rest of the hoi polloi?

Dave S. says:
November 30, 11h

Mark, that’s the breakdown between doing the best you can, and diminishing returns. Let me turn it around, and ask, what about the client who regards the large clunky fonts as being inelegant and unprofessional, when compared to a ton of other sites? Image is everything, as the maxim goes. It’s at least as valid a concern, since the client is the one writing the paycheque; obviously accessibility doesn’t mean anything if the site isn’t built in the first place.

Setting a default size that balances client concern, designer perogative, and user requirements is what we’re dealing with. This is a social problem, more than anything; look at how far I’ve gone with my stylesheets on this site - that’s about the best it can be done, technologically. The rest is education of those who have special concerns. Is the designer responsible for that? They can do their best, but in the end I believe the user has to take some ownership of their own problem.

November 30, 12h

Don’t forget that IE6 does have an option to “Ignore font sizes specified on web pages”. It’s under Tools, Internet Options, Accessibility button.

Dave, your site is weird in IE6 for me right now. Every time I hover over the header, it blanks and reloads it! Same for all the icons on the row below. Anyone else seeing this or is it just my setup?

AndyT says:
December 01, 03h

you have to edit your temporary files settings in internet option in IE - just check to fetch pages automatically instead of checking every time you visit the page…

Already on automatic, but the resizing icons keep ‘blinking’ on hover. BTW, those resizing Icons should probably be Az+ and Az-. :)

And while we’re on the topic, I never had a problem with your content’s font size, but I still retain that the font in the images are still too small (ie latest projects>>>>>).

Mike says:
December 01, 03h

I can confirm what chris hester mentions too - I’ve had that problem for a while with this site and photomatt’s site. They’re the only two sites that I surf to that do it.

p.s. my cache settings are fine! I’ve had the problem since the hosting debacle and the switch.

Rand R says:
December 01, 07h

I too am browsing with IE6 and am getting the reload behaviour (same as Chris and Lenny.) My cache setting is set to ‘automatic’. I’ve also noticed that nothing from mezzoblue is staying in my Temporary Internet Files. Other sites seem to be caching fine though…

Very mysterious…

dusoft says:
December 01, 12h

you have to edit your temporary files settings in internet option in IE - just check to fetch pages automatically instead of checking every time you visit the page….

Joel says:
December 02, 10h

Well, it looks like the persistence started working. I blame quirks in Safari. Looks great! (Other than the menu wrapping :)

Michael says:
December 04, 05h

What you’ve done works well, Dave, and does you credit as it makes things a little easier for some *without compromising the appearance of the page* (and what could we say about a designer who was prepared to?). Generally, my personal preference would be for a slightly larger font, but the default seems to be right for this page. The page simply does not look so good with the big font. Command + in Safari gives me an in-between choice that’s easier to read. But the default still looks best. Perhaps it is partly related to there being quite a lot of text on the page.

I think some people fail to grasp the complexity of the issue and think there is one simple answer that can apply in every situation. There never is. Not on the Web; nor in life. But you covered that in “No Happy Medium”.

On a different but related point, I wonder if it is worth adding that more and more I see people saying that WCAG require ems for fonts. Actually, they don’t; and it would be bizarre if they did, as the spec. provides for other sizing methods.

The Guidelines actually make no distinction between sizing fonts and sizing, say, boxes but merely state a preference for “relative rather than absolute units” (Guideline 3, checkpoint 3.4). (No rationale is offered, and people often make possibly mistaken assumptions about why.)

But the Guidelines also *explicity* mention accessible designs that use absolute units:

“If absolute units are used, validate that the rendered content is usable.”

(And they provide a link -
- to show how to do that.)

The BBC News uses a fixed width container:

Perhaps it is so that the average user browsing in a single window in IE with the favorites open at the side gets a full display which yet won’t jump and re-arrange itself, if he closes the favorites! Seriously, I’m sure they have good reasons. But provided they follow WCAG’s “validation” guidelines they _may_ and still qualify as accessible. Fixed-widths aren’t “banned” by the W3C - how could they be when the spec. provides the means to use them?

Awareness of these issues is a good thing. But I think people who want to criticize others’ sites should inform themselves better.

December 05, 11h

“Capital letter A” and “lowercase letter a” really don’t scream “size controls” to me. Yes, once you’ve read this post and realized what they are, people can figure them out, but the average user coming to this site just won’t get it, unless they read this archived post first.

It’s poor usability. You really should have something which is a better symbol for changing the font sizes.

Also, you may want to consider putting these types of accessibility aids “up front” in the source, rather than at the end of the document. Whenever possible (and I know it’s possible for you, using CSS!), you should try to make the accessibility aids the easiest features to reach.