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:

All fonts are defined in relative units so that even IE can scale them.

Two style sheets exist, one with units defined, and one that bases units on your default browser size.

You can switch between these with any browser capable of style sheet switching.

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

(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).

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 :)

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!

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.

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.

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…

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.

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.

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

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?

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.

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…

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

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.

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

–Kynn

Search this site:

About This Entry:

You are reading “Font Size Redux”, an entry posted on 28 November, 2003, to the 1066 collection. See other posts in this collection.