Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Font Size: No Happy Medium

November 26, 2003

If there’s one thing nobody can agree on, it’s how to treat your text size. Pixels aren’t scalable within the most common browser on the market, and if you do everything you can to support relative units, you will still get people complaining that you are using text that’s too small, or too big, or too low in contrast, or too high in contrast. A designer can do his or her best to find a happy medium, but someone will always speak up:

Please see http://www.w3.org/2003/07/30-font-size

I have. Why? The only point on that list that I might be breaking is “Avoid sizes in em smaller than 1em for text body” — a pretty good success rate.

Because your fonts are tiny!

CTRL + ‘+’ ? Or CTRL + ‘scroll wheel’? I’m using relative sizing specifically for cases like this. Besides, my text is a pretty common size…

Of course I know how to adjust font size in my browser quickly. Doing it all the time is annoying though.

My fonts are based on your default browser size. If you bump that up, they scale accordingly. So is this my problem, or, perhaps, yours?

And what about thin users who think that IE ‘is the internet’?

My site is not for them. I have a target audience; what do mom & pop care about CSS, after all?

Perhaps your site is not for them, but, in my opinion, ALL websites should be accessible to ANYONE, ANYWHERE. My opinion of course.

Then read [above] again. My target audience is not clueless newbie. But they are able to view it all the same — not only are my fonts scalable, the rest of my site complies with Section 508 and the better half of WAI’s AAA. In fact, it would be single A if it weren’t for FIR; other than that it’s kosher. Even IE can scale my fonts just fine, and it renders the site well.

I really have a hard time understanding what your problem is — if you don’t want to hit CTRL + ‘+’ just say so, and don’t cloak it behind misdirected accessibility concern. This isn’t an accessibility problem, it’s a convenience problem, n’est-ce pas?


Okay, a rather contentious way to start off the day. But something I’m hearing more often than I’d like is the opinion that text size should be left alone; a user’s default font size shouldn’t be messed with. This is an idealist view, and not at all representative of how the world works.

Built into that viewpoint is the naïve, or willfully ignorant assumption that all users are a) aware of this setting, and b) have changed it to suit their preference. Even the low percentage of the population that know they can do this generally won’t; too many existing pages rely on a 16px default font size. The majority, believe it or not, would bump their default down a size or two. 16px is too big for most people.

If it helps, don’t consider this issue on a site-by-site basis, consider it on a web-as-a-whole basis. Bump your font size down a setting or two, and start loading some common sites. Microsoft. CNN. Yahoo. This site, even. All become less legible, since they assume a starting point of 16px. And they assume because people don’t, as a general rule, screw with the default font size.

Let’s ignore Internet Explorer for a second. Browsers like Firebird and Safari allow a quick adjust. If, as a user, I visit a site that uses a text size I can’t read, I can hit CTRL + ‘+’ a few times until it’s legible. Done, and my fonts are now bigger for every other site. The fact is that my browser allows me to compensate in different ways; I can even whip up a custom user style sheet to customize each site I care to, if I wish.

Which places the legibility issue in a grey area somewhere between designer and user, since both can combat the problem. The designer should take precautions to ensure his or her default font size is legible to a wide percentage of the population. But is it necessary to address users who need extra assistance, within the same style sheet everyone else uses? CSS offers choice; is there some reason we shouldn’t be taking advantage of this?

The current standards movement seems to place an awful lot of responsibility on the designer. It’s up to the designer to work around browser flaws by not using pixel-value text. It’s up to the designer to consider people with perfect vision, low vision, and no vision. It’s up to the designer to account for different monitor sizes and resolutions. It’s up to the designer to make sure their layout doesn’t break when fonts are at 100%, or 150%, or 200%.

Which, when you consider the history of the web, is the way it’s always been, except that no one used to do it. And now that we are starting to, by way of alternate style sheets and relying on relative font sizing, it’s becoming clear that while CSS offers answers, sometimes the answers aren’t good enough for some users.

Yes, it’s important for the designer to keep all these things in mind, and with a developed social conscience, cater to the largest audience possible. But, and here’s the whole point of what I’m trying to say, when the designer does this to the best of his or her knowledge and ability, and it’s still not enough, perhaps it stops being his or her responsibility.


Reader Comments

1
November 26, 02h

> If, as a user, I visit a site that uses a text size I canít read, I can hit CTRL + Ď+í a few times until itís legible.

…and then hit CTRL + ‘-’ a few times when you go to the next site. And then CTRL + ‘+’ a few times for the next site. And then back again. And so on.

The issue of avoiding the user’s font size isn’t about too small fonts. It’s about the difference between font sizes on different websites. I have a good browser. I have a good font size. I don’t like having to adjust the font size for every new website I visit just because lots of different designers have lots of different ideas on what the best font size is for me. I am in a far better position than them to decide what the best font size is for me, and it really doesn’t drastically change depending on what site I am on.

> My target audience is not clueless newbie.

So you can assume that if they haven’t changed the browser font size, then it’s because the default is fine for them, not because they are incapable.

> But, and hereís the whole point of what Iím trying to say, when the designer does this to the best of his or her knowledge and ability, and itís still not enough, perhaps it stops being his or her responsibility.

That’s irrelevent. You aren’t doing ‘this’ to the best of your knowledge or ability - you *know* the problem and you *know* how to fix it, and you *choose* not to for aesthetic reasons that don’t apply across the board. That’s your decision, but please don’t hide behind “it’s too hard”.

2
Will says:
November 26, 02h

Does anyone have any statistics on sight-impared users and browser choice? I’d like to know if they use browsers that allow for easier resizing of pixel sized text (such as Mozilla & Firebird) more than regular users.

3
Dave S. says:
November 26, 02h

> Öand then hit CTRL + Ď-í a few times when you go to the
> next site. And then CTRL + Ď+í a few times for the next
> site. And then back again. And so on.

Or dig around and find the style-switcher mechanism, and change it upon each visit. Specific action is irrelevant; fact is, whether we’re talking about font scaling or style sheet switching, both require action on the user’s part.

> Itís about the difference between font sizes on different
> websites.

Do the different point sizes across various magazines and books bug you too?

In both scenarios the designer has control over type size. The difference being that on the web, the user can override it. That alone is argument enough for me to continue designing how I see fit, and allowing you to adjust accordingly if you have a problem with it.

Someone will jump on me for being an arrogant designer at this point, but I think I’ve explained my position rather well.

> you *know* the problem

If I re-scale my fonts for someone, the new size becomes a problem to me. Why is this ignored?

> you *know* how to fix it

I did already. My fonts are scalable.

> you *choose* not to for aesthetic reasons that donít
> apply across the board

I choose not to because this isn’t a commercial site, and at the end of the day, I read it too. The size is one I’m comfortable with on my 1600x1200 17” monitor with ultra-small pixels.

> Thatís your decision, but please donít hide behind ďitís
> too hardĒ.

I’m doing nothing of the sort.

4
November 26, 03h

Hi there Jim D. While we’re on the subject of accessibility, I would like to access some content on your website, http://jimdabell.com . Oh wait, there isn’t any.

It would at least be nice to read your name at the top but it’s in cursive for some reason, and I can’t quite make it out. Maybe if my vision was better I could.

I have some advice for you: People who live in cardboard boxes shouldn’t give interior design advice. I’ve seen your incendiary posts on other sites before and I have a hard time believing you’ve ever done anything of any value to anyone on the web. So before you go messing with Dave here, perhaps you should learn more about the medium.

5
November 26, 03h

I find it odd that some people are upset with designers for changing font sizes for aesthetic reasons. The web is a gross beast already when it comes to design. What is your screen resolution? Screen size? Color depth? Browser? etc. I think it is reasonable that designers be “allowed” to adjust font sizes up or down a few pixels/points.

I don’t see the big fuss about font sizes being too small – especially since most browsers can scale fonts. By the end of the day, I’m tired and my eyes are shot (CS student + web developer = all day on computer), I bump up my text a few sizes and I’m good to go. If that is too difficult for someone to do (or too annoying), then they can just disable stylesheets (real easy) or make their own stylesheet (takes some time) and every letter of every word will be set to their liking.

Not that I helped the discussion at all, but with Firebird in hand I don’t really care what you do with your font sizes.

A quick tip: to quickly reset the font sizes to their original value you just do Ctrl-0. Those few milliseconds it takes to adjust font sizes just aren’t a big deal, IMO.

6
Tom Passin says:
November 26, 03h

> Does anyone have any statistics on sight-impared users and browser choice? Iíd like to know if they use browsers that allow for easier resizing of pixel sized text (such as Mozilla & Firebird) more than regular users.

One of my colleagues, out of a department of about 40 people, has 20/15 vision but terrible acuity . He leaves his computer set at 800 X 600 (19 inch monitor) so that text and icons look much bigger, and does not seem to care about the resulting jaggies. He cannot read anything smaller than 9 pt, even laser-printed.

And Dave, I concur that the text in the second nav bar is hard (for me also) to read, and CNTRL + does not change it in Firebird/Win.

7
November 26, 03h

Isn’t this really a technology issue, more than a design issue? Web technology, as it stands, simply does not allow for a user to view any and every website they may visit at “their” optimal font size automatically. Nor can every designer create a layout that will adjust perfectly to every possible font size and maintain what they believe “looks good”.

As of today, it simply cannot be done. Yet we are all more than happy to argue that “my” preference is better (for this reason and that) than “your” preference. This argument will always exist so long as the technology remains as is.

As I see it, we have two choices:

1. Help develop ideas to remedy the problem from a technology standpoint…

2. Or continue to offer quick and easy ways to change font sizes on our websites.

Your gonna be hard pressed to convince everyone that “your” preference is the preferred preference. I think that has already been proven. Hey, at least we have choice.

8
November 26, 03h

> Do the different point sizes across various magazines and books bug you too?

When people pick up books and magazines, they generally hold them close enough to read comfortably, which is the real-world equivalent of sizing text manually upon entering a new site, except no additional action needs to be taken. In any case, the fixed size of the print medium is a limitation that simply doesn’t apply to the web - the print designers have no option but to choose a particular size.


> That alone is argument enough for me to continue designing how I see fit, and allowing you to adjust accordingly if you have a problem with it.

But just because it’s possible to work around it, it doesn’t mean it’s convenient. And isn’t a large part of web design about making the interaction between the visitor and the website as fluid as possible?


> If I re-scale my fonts for someone, the new size becomes a problem to me.

I’m not advocating changing the font size on your page for anyone. I’m advocating *not* changing the font size. If you prefer a particular font size, then shouldn’t you be setting this preference in your browser?


> > you *know* how to fix it
>
> I did already. My fonts are scalable.

I thought I made my position clear; the problem I am talking about is the mismatch between different websites - manually scaling fonts is not anywhere near ideal.

[off-topic]
Peter, please feel free to carry on thinking of me as an arrogant newbie. I’ve always maintained that arguments should stand or fall of their own accord, not because anybody in particular is saying them. I have no wish to start a flamewar here attempting to defend myself; this article is about font sizing on the web, and I don’t intend to pollute that. I’m not trying to “mess with Dave”, merely voice my opinion on the topic of conversation. Any subsequent ad-hominem attacks will simply be ignored; if you think I’m wrong about something, attack the point, not the person, as Dave did. I’d appreciate a private email with links to other places where you think I’ve flamed somebody though.

9
jgraham says:
November 26, 04h

Dave: Your text is too small :) But I see why you’ve done what you’ve done, and there’s no denying that text on the web is /hard/. The problem is that browser makers set a too-large default size and then never encouraged anyone to change it. However that’s a pain for people like me who set the size to something reasonable to begin with…

The situation would be improved if you could specify text sizes in physical units like cm, and rely on the browser/OS to convert from cm to pixels. You’d have to think a bit to make sure it would cascade nicely, but I think it should work.

Another solution would be more intelligent text resizing algorthims. It would be neat to set the minimum font size pref and havet all text scaled by the amount required to make the smallest type on the page equal to the minimum font size e.g. if I set a minimum size of 10px and the actual minimum font size computed is 5px, all the sizes get doubled. It’s not clear how well that would work across pages though.

Yet another solution would be more powerful user stylesheets. With a user stylesheet, you rarely know about the document structure in advance, so it would be useful to be able to select on the attached css rules something like :::css-rule[font-size=”80%”] {font-size=100%;} (that syntax sucks but you get the idea). Of course, that would be a pretty fundamental change in CSS…

10
November 26, 04h

Mozilla allows a minimum font size, which makes all arguments about adjusting your font sizes for each site bogus. I’ve set it at 13px which causes no problems and makes my family very happy.
The only responsibility you have as a webdesigner is making sure that all font sizes are properly set relative to each other.

11
November 26, 04h

jgraham,

> Web technology, as it stands, simply does not allow for a user to view any and every website they may visit at “their” optimal font size automatically.

Yes and no. Theoretically, yes, as users are free to pick a font size, and any web author who just leaves the font size alone will be giving them their optimal font size.

Practically, lots of people point out that users often don’t have a clue about font sizes. However, this in and of itself doesn’t mean that you should try and mess with the font size. 80%, 12pt, 15px, etc are arbitrary. There’s no good reason to think that they are more appropriate for everyone than 100% - all you are doing is getting it wrong for the people who do know how to set their font size. Furthermore, if the default font size is *unacceptable* to a user, you can be sure they’ll find out how to change it, so you’ll never be faced with providing an unacceptable font size.

So, the end result is the choice between a) not messing with the font size and guaranteeing the optimal font size for the techie users, or b) messing with the font size and guaranteeing a sub-optimal font size for *at least* the techie users (and perhaps an *unacceptable* font size for others). I think it’s clear that, while you may not be able to get the optimal font size, leaving it at the default is the closest you can get and the safest choice all ‘round.


Jeroen,

Minimum font size does not preserve the difference in font sizes within a document. The mechanism jgraham describes would fix this. In any case, I specifically don’t set it as a precautionary measure - it’s no good trying to do the right thing with font sizes if it turns out your browser is hiding errors from you.

12
Dave S. says:
November 26, 04h

> the text in the second nav bar is hard (for me also) to read,
> and CNTRL + does not change it in Firebird/Win.

Text performs a function. And sometimes, its function is to step out of the way, only to be there if needed. If those were critical sections of the site, I’d feel differently. They’re not though.

> they generally hold them close enough to read
> comfortably

If we’re considering the analogue method, you can do that with a screen too…

> And isnít a large part of web design about making the
> interaction between the visitor and the website as fluid
> as possible?

Yes. Isn’t a large part of the web to project as good an image as possible? Yes. Different people have different priorities. Finding a balance is *tough*. I understand where you’re coming from, here’s an attempt to explain where designers are coming from:

Design is about proportion, rhythym, and flow. Issues like browser size, font size, and screen resolution are incredibly large bugbears for good design because of this. If I can scale one element, but not another, I can’t accurately define a relationship between the two items, except hopefully within a fuzzy upper- and lower-limit. Likewise, if I don’t know ahead of time what canvas size I’m working with, I can’t properly define a relationship between figure (content) and ground (background) - this is why every designer prefers fixed-width over liquid (though that’s also a legibility issue because of line-length, but I digress.)

> I thought I made my position clear; the problem I am
> talking about is the mismatch between different websites
> - manually scaling fonts is not anywhere near ideal.

Neither is relying on a user’s default font size. Because here’s what you have to change to make your scenario work: first, you have to make sure everyone in the world has adjusted their browser to taste. Second, you have to get every designer in the world on board with your thinking, and make sure they don’t screw up the system. Third, you have to retro-fit the millions of pages that don’t currently work this way.

If this is such an issue for you in particular, why not add a user style sheet, and leave it at that?

html, body {
font-size: 16px !important;
}

Sam’s got it. This is a technological issue. If all browsers used something like Opera’s scaling, then we wouldn’t be arguing.

13
Dave S. says:
November 26, 04h

> In any case, I specifically donít set it as a precautionary
> measure - itís no good trying to do the right thing with font
> sizes if it turns out your browser is hiding errors from you.

Jim, really. There’s your convenience right there. You’ve got as good of a method as I do in ensuring your fonts remain legible. Use it. Don’t blame us.

14
Lucian says:
November 26, 07h

I’m half afraid to post any comments here for fear someone will dig through my stylesheet and find that I set my font size in px.

It is impossible to please everyone when it comes to design, let alone typography and text-sizes. Even when implementing scalable text, you could offend someone who doesn’t appreciate the range of text-sizes you use. (ie. when they set your smallest font to something they like, your largest pisses them off). If so inclined they should write their own stylesheets I say.

Like Dave said, there comes a point where it is the user’s responsibility. You don’t enter a room with sunglasses on and then ask to have all the lightbulbs changed or the roof removed.

15
Scrivs says:
November 26, 07h

It is okay to put the responsibility on the user, at least just make sure that if they are using IE they can resize the fonts. Not digging at you Lucian, just making a point. I find that if you use verdana 70% is equal to 11px.

16
Brian P says:
November 26, 08h

When ever I come across a usability issue I go to the usability guru, Jakob Nielson:

http://www.useit.com/alertbox/20020819.html

From looking over this article again, it seems that he puts most of the responsibility on the user. For the designer he only says use at least a 10pt font. It’s up to the user to adjust the size to their preference. He also says the browser should make changing the font size easy.

I generally don’t specify a font-size so that the user’s default size takes precedence. I only make some things relatively smaller (rarely) or larger as the design dictates. But using sematically correct code also helps. For example, the font size of an h1 tag is not defined by the designer. It’s size is standard throughout html. Unless the designer overrides it, but that also does a good job of defeating the purpose of using the h1 tag.

There is no single right answer to this.

I’d agree that the second toolbar’s text is small and I’m only at 1024x768 with normal vision with my glasses. And because it’s images and not real text, it’s not scalable. This is why I don’t like images of text. I can’t wait for SVG to be included in most browsers. I also dislike popup menus. I don’t like it when you cross over them with the mouse (e.g. going from a browser toolbar or menu back to the content) and they popup when you don’t want them to. They should have to be clicked like any other menu in an application. CSS already handles one event, hovering, why not clicking as well.

17
TOOLman says:
November 26, 11h

Dave, I think your argument is a Catch-22. We need to make the font smaller because people won’t set a good default size in their browsers. People won’t change the browser defaults, because too many web sites make the size smaller … :)

The way I see it, here’s the problem with setting the base font size to e.g. 80%: you deliberately mess with the people who’ve set their browser defaults in accordance with their needs, just to accommodate the majority who doesn’t care.

Remember that most of the people who have problems with tiny text aren’t what we’d usually call “visually impaired”. They aren’t using screen magnifiers. They are simply people whose eye-sight is beginning to deteriorate with age. Think baby-boomers, for example.

If your target audience is mostly made up by eagle-eyed designers under 30, then by all means, make the text as small as you like. However, a site indended for the general public cannot make that kind of assumptions. There are more and more middle-aged and elderly users on the Web, and 11px is way too small for most of them. At the same time, many of them don’t know how to change the browser defaults, or how to resize text on a web page.

I think you’re seeing this strictly from a designer’s point of view, which is quite understandable. I think a good designer should be able to create a design that doesn’t rely on font size. Isn’t that one of the requirements for admission to the CSS Zen Garden?

(And please don’t flame me because my current web site by default uses a fixed font size in pixels. I didn’t know better at the time, and it will be dealt with in my upcoming redesign.)

18
Scrivs says:
November 26, 11h

Funny that you should just write about this as I had just got done reading a couple chapters of The Elements of Typographic Style (highly recommended). I am in the same beliefs that I try to make the font legible for the majority of my users and I use percentages to set the font-size so they should be scalable. If the user is unhappy then they can bump up the settings. You can’t please everyone, and the ones you can’t please would be better off pleasing themselve by making their own custom stylesheets.

19
November 26, 12h

particularly when it comes to the accessibility issue, it’s a phrase that i use all too frequently, but: the onus is not just on the designer, but the user as well. if you KNOW that you need to have large fonts (due to partial sight loss or similar visual impairment), you as a user should choose the best tool for your situation. if you see that, out of all current browsers, IE doesn’t let you resize text on certain sites (which use pixels), DON’T USE IT. (nonwithstanding the fact that people with visual impairments are more likely to use proper screen magnification software, rather than just setting text sizes to huge). to use another phrase of mine: you can’t blame a screwdriver for being such a lousy hammer. use the right tools for you. to take it to the extreme, you could argue that all webpages should also be made available in audio format, as not all blind users may have a screenreader.
heck, by separating content from presentation i thought we had established that yes, as a designer i can still wallow in my predilection for small fonts, pastel colours, whatever…but that the content itself is available to anybody who wants to view it. user stylesheets, alternative stylesheets with switchers, etc are all a step in the right direction.
but yes, the users have to meet the designers halfway as well.

20
Eric says:
November 26, 12h

I’m pretty much on board here, I just have some requests to designers out there:

1. Don’t use non-standard font-size changing as the only method (i.e. those little icons and menus people put in nav bars). If you really think the browser options are too technical, use the dual approach that Wired uses, where you can either do it on the page or in the browser.

2. When putting text in images or flash movies, make it bigger than you’d like the normal text size to be, since people can’t change the size. I have 20/20 vision and a 19” monitor and I’ve seen dozens of sites that were still totally illegible. The second nav bar (with latest projects>>>) and blue subheads in the right column on this page are borderline examples that I can guarantee you my mother with her best glasses would struggle to read.

21
jgraham says:
November 27, 02h

> SoÖ why not px?

Because the people who really need font scaling /really/ need it, irrespective of which browser they use. These people won’t be the x% of your visitors who never adjusted the font settings, they’ll be the ones who did (or who got someone to do it for them; the number of computers configured by knowledgeable people outweighs the number configured by clueless people, even if most users are clueless).

Because some people have high resolution screens so the actual physical size of even 16px text is tiny, and IE won’t resize the text for them.

Because all the people who are saying “people who really have vision problems use screen magnifcation” are wrong, or at least missing the point. There are plenty of people who can’t read 10px text but can read 16px text. These people don’t need screen magnfiers, they just need the text to be bigger when they select ‘larger’ from a menu or select a default size of 20px.

All these people need web designers to realise that the web isn’t a desgn friendly medium and you have to give a *lot* relative to desgning for print. One thing you have to give is control over precise text sizes, so that people can actually read your site. A site that looks pretty may be initially attractive, but if you have to fiddle with browser settings to make the content legible, that’s at least as off-putting as slightly larger than normal text.

This won’t happen, of course. People will never get together and decide en-mass to always use 100% body text and scale other fonts on the page relative to that; it offers no benefit unless everyone (or nearly everyone) does it so anyone failing to do so breaks text on the internet for everyone. Since it’s an intractable social problem, you can probably call it a technological problem. The technological problem is soluble (e.g. hardcode the default pixel size, let users scale all fonts relative to that so that 100% = 16px is always true but the user can set a scale factor that applies to all fonts on all pages; remove px as a font unit size (that’s been rejected as an idea by the CSS WG, iirc); etc. ), but it’s not easy and relies on people actually switching browsers to a more useful one (which is a social problem as difficult as the previous one).

Dave, my practical advice is to increase your main font size to 90%, since you’ll never agree to increase it to 100%. In practical terms, that’s a 1px increase for most people, but it will make a huge difference to the legibility of your site.

22
Joel says:
November 27, 02h

The funny thing is Dave, that your text is a bit on the small size. Yes, I know I can increase it, but I’m one of those nice folks who likes to look at a person’s site exactly as they designed it. In Opera, my main browser, I don’t want your graphics to pixelate. I prefer to read your site as it appears in my browser with no user alteration, and if that’s a fellow designer’s site I can say to myself that guy needs his type a little bigger, you’d think he’d realise. Maybe everyone’s too polite to say so!

If I come across sites I can’t read, frankly I just move on, I don’t bother. Yours I can read, but in my opinion your type is too small. Let’s not forget the obvious here. But I still read it, I *can* still read it, and your design decisions are your design decisions.

23
Joel says:
November 27, 03h

I should add to my previous comment, of course, that there will be people who can afford much higher-res screens than mine who will find my site unreadable, since I am an unashamed user of fixed pixel size. Doubtless they will think I design badly because of that. Still, what the hell, we all make our choices. And I think that’s my point really.

24
November 27, 03h

“For example, the font size of an h1 tag is not defined by the designer. Itís size is standard throughout html. Unless the designer overrides it, but that also does a good job of defeating the purpose of using the h1 tag.”

I disagree. Nowhere in the W3C specs does it define the exact size of the H1 tag. It is merely the largest of the tags. I’ve yet to use a design that hasn’t required changing the default size, along with the other H tags.

“Mozilla allows a minimum font size, which makes all arguments about adjusting your font sizes for each site bogus.”

This is an outstanding feature. A forum I visit has a hardwired font size set by the programmers for the smallest size you select from a menu, when posting a reply. It’s so small you cannot read it. (At least not on Windows XP which blurs the characters.) Eventually I realised I just had to set the minimum font size in the browser to something like 10px. Problem solved!

Regarding the main topic here, the problem seems quite simple to me. It all comes down to one browser - Internet Explorer (IE) on Windows. As we know, most if not all other browsers allow text sizes to be changed from the menus. Even IE on a Mac. Yet IE Windows does not. Experts like Nielsen and Zeldman have long campaigned for Microsoft to change this, but now we know development of IE6 has stopped, it will never happen.

The next point about IE is simple, yet often overlooked. The default text size when first installed along with Windows is “SMALLER”! This means a designer wishing to make their site look the same across all main browsers will find setting the font sizes in pixels solves the problem. Just add a style switcher to allow the fonts to be enlarged as well.

If you use ems, without first declaring a font size of 100% or less on the body tag, the result is text so small it’s criminal. (If the user has IE set to “Smallest” you simply cannot read the text! While “Larger” and “Largest” are so big it’s silly.) This is due to a bug in IE.

So if it weren’t for IE, pixels would rarely be used for setting font sizes today. In the past they were most likely used when fixed layouts were seen as the way forward, when emulating print was the goal, but I digress.

All is not lost, because IE7 comes with the next version of Windows. This uses a new graphics system that allows the contents of ANY window to be smoothly enlarged. So a layout 300px wide with tiny text can be made larger and larger until the text suits the user. Like Opera’s brilliant Zoom feature, it will also retain the layout structure, enlarging the images too.

So in 10 years time (chuckle) when IE7 is more common than IE6, we can use fixed fonts again to get the design WE want, knowing that users can alter the font size in their browsers if they wish, to get the size THEY want.

If users don’t know how, well if they NEED to enlarge the fonts badly, they will find a way, ask around, look through the menus.

For now I would expect anyone with serious visual problems to rely on browsers like Mozilla and Opera.

25
November 27, 03h

I’d like to be able to use keywords (x-small, small, etc.) but it seems impossible to obtain whatever Verdana 11px and Arial 13px on IE6/Win actually are, consistently using keywords, which is a shame, as these are two of the most attractive fonts to use, in my view.

What I for one would find helpful is a chart which translates sizes of keywords, %, pt (and whatever else) with px, for common browser/platform combinations for common fonts. This could be compliled and then verified by people and then used as a central resource.

At the moment, there seems to be quite a lot of guesswork involved and ‘hoping for the best’. At least a comparison chart would ensure that there is a degree of assurance.

26
Mark says:
November 27, 05h

why not use:

http://www.thenoodleincident.com/tutorials/typography/index.html

27
Hemebond says:
November 27, 05h

Good grief, what a discussion. It’s really not that difficult. Simon is on to it.

Use the browsers default font-size for main content and make minor adjustments for variations of text.

Also, if you use EM’s for everything, you can get almost the same effect as Opera’s zoom function in any browser. Even images can be resized this way.

For the record, I have my default font size set to 12px in Mozilla Firebird, and this site is unlegible upon arrival. I have to scale up twice to read the main content, and four times to read the right-hand column.

28
November 27, 06h

I wonder if anyone else adopts the same simple, infinitely “scalable” solution to viewing web sites with small or large font sizes? Sometimes, if I find the fonts a bit on the small side, I move a bit closer to the screen. If the fonts are rather large, I lean back!

(Compare behaviour with reading books & magazines - and no fiddling with browser controls ;-)

29
November 27, 07h

I have found this discussion to be very interesting indeed. Font-size issues have bedevilled web design since the World Wide Web became the best thing since sliced bread. I have found that there are basically three camps:

1. The visual designer - will ALWAYS set font sizes smaller than default, because big glyphs are ugly. Their unit of preference is the pixel.

2. The accessibility nut - will ALWAYS set font sizes at the default or larger, because small glyphs are difficult to read. Their unit of preference is the em.

3. The happy compromiser - will use mostly the default size, varying by plus or minus 20% for the most part. The units of preference of preference are the em and the percentage, but keywords are also used.

I fall into the third camp. I do not come from a design background and I am not an accessibility nut. My number one concern has always been that all of my users can read my content, but I am not afraid to reduce the glyph size by 20%. I have found the following works well on most system configurations:

1. Body text at browser default, in Georgia or Verdana.

2. Primary navigation at browser default, in Arial or similar sans-serif font.

3. Secondary navigation and incidental text (like copyright messages, etc.) in browser default -20%. That is the equivalent of 0.8em.

I personally believe that setting a font in pixels, or reducing its size by more than 20%, is unwise and unecessary. Because of resolution and monitor-size variations, the pixel is probably unsuitable for setting ANY text size.

A website should be perfectly readable WITHOUT the need for text-resizing by the user. It is incovenient for the user, and I believe it makes a site (and its designer) look unprofessional. I believe that the body text on Mezzoblue is a little too small, but I feel that the navigation text is FAR too small. I can read it, but my wife cannot - she is forced to resize the text when I want to show her something here.

I know this will be an unpopular, but I must saddle some of the blame for this issue on the Mac. In the world of visual design, the Mac is very popular. Unfortunately, most of the users are viewing the web pages with Windows-equipped PCs, and fonts look different.

I’ll conclude this longer-than-it-should-be tome with this: The average user will NOT alter the default settings of their system, so designers should create their masterpieces with that in mind. Users should not have to change anything, but they should have the option of changing. That means default font-sizes, and relative units are probably the way to go.

30
November 27, 07h

> I disagree. Nowhere in the W3C specs does it define the exact size of the H1 tag. It is merely the largest of the tags.

I would argue that the size of the element is irrelevant. What is significant is their importance, and where they appear in a document. H1 is intended to be a higher level than H2 - that is all that really matters, isn’t it?

> The default text size when first installed along with Windows is ďSMALLERĒ!>>

Er…when I installed Win XP Pro last week, the default IE text size was set to medium.


DAVE - For some reason, your “remember me” feature isn’t remembering me. I’m getting an inferiority complex.

31
eric says:
November 27, 08h

design for your AUDIENCE: when i visit a photographer’s portfolio site i want to be intrigued by the presentation and the consideration of user-defined font sizes should take a back seat. a simple yet slick flash interface (with all the graphically goodness) is an ideal tool for this kind of thing IMO. however, when im reading a content-based site like metafilter then i want a presentation completely different, something that’s easy to read, navigate, and adjustable. two completely different arenas of browsing that require a different set of questions when planning the design.

to further the book, magazine analogy, you see this all over the place: think about the difference between NYT newspaper and Shift.

anyone thinking that consistent font-sizing on the web (or any other medium for that matter) as a practical idea is just deluding themselves. even if this were reality what has been accomplished? well, we’d certainly be one step closer to the drab colorless of uniformity. hurray.

32
Justin says:
November 27, 09h

Thanks to shows like CSI, we have to face the fact that a lot of people believe that we use the same technology as seen on TV that takes a 3px-by-3px capture from security video to print out a 8 X 10 print. The guy I carpool with was commenting that it makes no sense that meteorologists can’t predict weather very well “considering all the technology we have now.” I can’t imagine the difficultly I’d have with computers if I didn’t get to work with them every day.

Take a look at the Mozilla or IE browser window and ask yourself where the zoom option is. If you don’t see it, it doesn’t exist. Sure I explore drop-downs in every program, but most people don’t. I think it’s perfectly fair to put that responsibility on the user, but it’s not exactly been shoved in their face. It’s hidden in a drop-down menu along with lots of stuff.

Business 101 is: don’t piss off your target audience. Make it easy to purchase. Mozilla.org (love it) now reflects that understanding of removing barriers. Even my customer can call long-distance to reach me, but I won’t give them any reason to hesitate so I provide a toll-free. It’s that simple.

My GM runs 1280x768 on a 19” monitor with the IE font size set for smallest. We have some content styled with Arial 0.8em and the text is illegible on his screen. Even when we’ve discussed it, he knows he can control the font size. His argument is that at almost every other site he visits is very legible, yet this one is not, and that he “can’t be the only one.” What do I tell him? Is it my fault? The customer is King… they may not be right, but they’re the king.

I believe the responsibility of striking the right balance rests squarely on the designer, until a friendly ‘zoom’ button appears on the toolbar of all web-browsers.

33
Dave S. says:
November 27, 10h

Simon, Justin - I see what you’re saying, and I’d like to agree. Given your arguments, why should I NOT use px to size my fonts?

Basically you’ve just argued against relying on font scaling. I tend to think you’re right, that most users don’t know it exists, and won’t use it. So. If font scaling is out of the picture, and we know there are too many problems with precise control over relative font sizes, then why not use px?

IE doesn’t scale px, of course. But go back to the premise that we’re not relying on font scaling, since the size has to be perfect from the start. So… why not px?

(Simon - I’ve noticed the ‘remember me’ is broken, but I haven’t bothered looking into it yet.)

34
November 27, 10h

> Basically youíve just argued against relying on font scaling. I tend to think youíre right, that most users donít know it exists, and wonít use it.

I think that that is largely untrue. Most people I know that have any vision problems seem to know it’s there. Then again, if I had any vision problems I would use Firebird exclusively.

35
Justin says:
November 27, 11h

This topic is like lemon on a wound at the moment since I’m trying to make a decision and fighting with these same issues.

When teaching seniors, I’ve observed that almost all of them were not aware of the feature, but someone else had changed the setting on their behalf.

So basicially I’m saying that, although you can’t rely on scaling, it’s not appropriate to take features away from those who need and use them. So to answer your question, I think the best practice is to use the default size, and stick to minor variations for enhancement, without taking control away from the user - hence, no using px.

IMHO: I think browser-makers need to have a easy zoom tool on the primary toolbar - like the zoom in MS Word perhaps.

36
Adam Rice says:
November 28, 02h

I’m with Eric on this: if accessibility is important, use Wired’s approach. Set up one stylesheet with elements that will be common to the tiny-type and giant-type versions, and other stylesheets that handle the aspects specific to each. Don’t want to rely on Javascript? Use PHP for styleswitching.

Although I don’t find this site hard to read, I also don’t quite understand the fetish for tiny type. It’s not like we’re trying to conserve paper here. And I don’t think that larger type looks bad.

37
November 28, 02h

Let’s look at this from the perspective of my work website. This must look the same on Netscape 4, 7 and IE6. Mozilla and Opera are catered for as well because I want to.

Firstly, there is a problem with small fonts - Netscape 4 makes them smaller! But the main body text is the same across all these browsers - but ONLY by using pixels.

Say I change to ems. I tried this and gave up. The text was different sizes across various browsers. So how do I square that with the client? It completely ruins the look of each page. Why can’t they all look the same?

So I added a styleswitcher. This offers a Larger Text and a Low Vision option (with larger text in yellow on black or red). Of course this is mainly aimed at IE users who cannot resize fonts set in pixels.

It requires Javascript though - what if the user has that switched off?

I’d love to use ems and will test again in these for my home site in the future. I just hate going to a site (usually about accessibility) where the text is really big Verdana, caused by ems in the stylesheet. It just looks so wrong to me.

I don’t know what the solution is. Browsers will always offer a variety of controls and settings. I hear Safari uses a different base font size to everyone else. Agh! Then there’s the difference in line-height between Moz and IE…

38
AndyT says:
November 28, 02h

I have to agree with Eric in a previous post. The words in images (latest projects) on this site are a tad too small. Even though I can read it out, I can imagine quite a few people can’t for a variety of reasons. Its mainly beause it can’t be scaled, unless you have a zoom in tool which Opera provides.

Back to topic, I have been building sites for many years but I have only recently (last couple of years) started taking standards seriously. The problem occurs with people like me (and for any new starters) is the mixed messages we get - assessibility vs designability.

Should designs be the firstmost importance, or the users assessibility? From what I gather, Websites are for conveying information, so should design matter at all? It is after all, not a magazine.

In the end, the way to make it most assessible is not to design it at all and leave it to the basic, cause you never know when you will be doing something wrong - javascript, colour schemes, hyperlink underlines, font size, images as words etc…

Websites used to be very easy to create (or teach) for everyone, even homeusers. Now its so much more complicated and restrictive.

39
jgraham says:
November 28, 05h

> This must look the same on Netscape 4, 7 and IE6

There’s the critical error.

40
jgraham says:
November 28, 05h

Just to emphasise that last point, it’s not that you shouldn’t try to acheieve identical cross browser designs on the web, it’s that you *can’t*. In 10 minutes of userr-stylesheet hacking, I can turn Dave’s sites to a Neilsen eqsue minimalist style : http://zeus.jesus.cam.ac.uk/~jg307/mozilla/Screenshot-dave.png Sure, most people won’t do that. But it’s an extreme example of a general point. If you want sites to be identical to all users, send pdf files not html files.

41
fd says:
November 28, 08h

The basic point is that the font on this website is really small, especially with those long blocks of text (such as the body of this post). Can you not increase it just a little bit? It’s not a life and death issue as your IE users can always paste into word or something, but still.

42
Dris says:
November 28, 11h

I offer no solution, just a short rant.

This is a problem with browsers. Fonts in px should scale in IE. They don’t. It sucks. However, we are the ones burdened with finding the fix. If IE wasn’t the most popular browser, I wouldn’t care.

As far as accessibility goes, this is just like having to specify default values for every field in a form (a requirement of the AAA). The reasoning there is that some decrepit, hardly used browsers won’t display the field if there isn’t a default value. Complying to this is an extreme pain when designing web applications, such that it isn’t even practical. In a complex web application, especially when editing data, specifying default values for fields that are empty presents more of an accessibility problem than a solution.

The above two paragraphs are somehow related. However, I can’t comprehend much right now, so you’ll have to make whatever connections yourself. I’m going to take some Robatussin. Wish I’d have gotten a flu shot…

43
I. G. says:
November 29, 06h

The real stinkers are the ‘trendy’ Flash sites with 5-6px pixel fonts, Flash menu (with zoom) disabled. Lemmings.

44
Bob Easton says:
November 30, 03h

Q. Why did the art director cross the road?

A. To get a smaller font.

45
jo says:
December 06, 09h

ALL I ASK is that people take out the LINE-HEIGHT in their stylesheets.
Then I can ALT t-o-e-z and the lines don’t run into each other.

I KNOW I can go Mozilla, but I don’t want to. And I feel I should not be driven there.

46
December 23, 02h

Correction:
Obviously the last rule needs to be applied to some block-level wrapper, no span! A div works fine for example.

47
December 23, 12h

My technical proposal: Take advantage of the fact that css size keywords won’t go below 9x and scale up from there. Needs a wrapper div or span that wraps the whole content.

Poor IE users are still able to scale and ‘power users’ are not forced to view unstyled html at 16px by default.

Example:

/* The basic elements:
** We take advantage of keyword scaling- browsers won’t go below 9px
** More at http://www.w3.org/2003/07/30-font-size
** http://style.cleverchimp.com/font_size_intervals/altintervals.html
*/

body {
/* first for IE 4/5.0 */
font-size: xx-small;
/* end for IE 4/5.0 */
voice-family: “"}"”; voice-family:inherit;
/* now the real one */
font-size:x-small;
}

/* protect opera */
html>body{
font-size:x-small;
}

/* scale back up to a sane default */
#some-wrapper-divorspan {
font-size:115%;
}


Cheers

Gabriel Wicke