The 100% Easy-2-Read Standard

Great article, as usual. Thank you very much for your work.

Hi oliver!

Congrats for your explanation. But, what do you think about that?

Tell me what you think about size text using ems.

Best regards!

What about the usage of certain font types, since they are rendered in quite different sizes (even at 100%) and have an deep impact on overall legibility? I know that choosing font types is not an integral part of typography in practice, but should definitely taken into account.

Point 6: “I am your only font (Helvetica/Arial), you shall have no other font before me.”

Hi Oliver I recently found your writings and now have you in my rss feeder.

I saw your article about 100%e2r and completely agree! I have a very hard time reading a lot of websites out there! Wish everyone would follow these simple rules.

I am going to spread the word…and have put the banner on my own website.

Terry

Thank you very much for the checklist I think our site is much more readable now.

I woke up this morning and had that Beatles tune in my head, the one with that really slick guitar riff, and asked myself: “Where does that come from?” and then I thought: “Man, what did I write yesterday in that midnight frenzy?” Jumped out of the bed and checked back to see if it made any sense and now I am singing: “I took me sooooo-oho-oh long to find out, and I found out…”

Why this tune? Why soooo long? What sooo long? - It took me almost 10 years to accept that the default standard size for text is the correct size. Eventhough it seems big at first. And now, let’s rock:

I am currently reworking all of my clients websites to be 100% E2R. You should be able to see a new 100% E2R Asoboo in a couple of days.

Humm… Let me see…

You’re saying about the default 16px size, right?? It’s true. Most webdesigners don’t use this size by default (i am one). It’s so cultural. But believe me, i’m changing this in my last project. Well, of a certain form, i agree with you. By the way, IMHO, the default font size is totally flexible (each project is a project). In the rest, i agree with you in all!

Best regards!

Ramon,

Thanks for bringing that up, Ramon. Actually I am not talking about PX at all. Px are scalable on a Mac but not on a PC. PX overwrites the default font size as defined by the user. That’s why I say “em” or “%”.

Excellent article. Not one of them should be difficult to implement into most sites. I’m quite a stickler about the first four myself. Number 5, I think can be dealt with by adding a good description in the ALT attribute.

As an aside, I would like to know if most “general population” users are aware that they can control/change the default size of their browser’s font? If so, would they? Or, are they viewing under the assumption that the designer has taken that into consideration?

Sorry. Writing out loud again…

Thanks Ryan,

Point 5 is an important one.

1. Say you want to write professor Tufte a letter. What do you do? You have to type his address. If it were in real text, you could copy and paste it. Alt text won’t change that. The ability to use text directly is key in our medium. That is one huge difference between books and web sites.

2. Actually naaice text-in-image fonts often make the standard font and the overall website look bad (especially on windows). Here again Tufte’s website exemplifies. Look at his website with a windows machine. (Current screenshot taken with a Mac).

3. Beginners should just use one type. Using different fonts requires a lot of typographical skills. It can be done, but usually mixing fonts leads to bad results (even the example I linked to looks bad on a PC). Here again, Tufte, master of printed information design makes a perfect bad example: Mixing serif and sans serif and text-in-images.

4. It’s really unfriendly towards old people or people that have a sight problem, as you cannot scale it. Small text is hard to read for us, but it’s impossible to read for old people.

5. Alt attribute works for blind people. They’re used to surfing the web without seeing. Old people don’t know about alt attributes.

Good post, but I think saying “100%” or “1em” should be your default text size doesn’t really say much since both are relative sizes. Are you referring to the user’s browser preferences? Or the browser defaults?

Also, one nitpick — only IE 6 doesn’t allows sizing of px font sizes. Firefox, Opera, IE 7, etc. all allow you to resize px font sizes.

Thanks for hooking in there. It’s a very important question:

1. 100% 1em means default font size. Don’t change it. I said that on purpose because the fonts size ought to be relative, so it adapts to the users preferences, also (but not only) with
2. IE 6 in mind. Six out of 10 people use IE6. Not only because actually the standard default (equal to the font size of 16 px) is just perfect.
3. Changing font sizes is not an option. No one wants to change font sizes, neither through a key combination, nor through the preferences nor through a CSS bigger button. We all just want to read away. And by keeping the size default, your readers sure will.

Lovely broadbast as always. I am a part of the XHTML/CSS Typography movement. It is no doubt “better”, but “better” doesn’t mean sucessfull. Users are used to lots of fancy, useless graphics… but they ARE used to it, and they hate change. Out of curiousity, do you think there’s an intermediary step between the world of busy design and the world of typography? The general opinion of users, IMHO, is that at first glance, the fancy graphics sell. First glance is pretty important on a short-attention-span medium like the web. Intermediary steps to lead the web to the promised land?

h1psurg3ry,

My friend Hawken, said that some clients ask him to make their website ugly on purpose. They believe that the customers would rather buy from cheap looking websites.

As always, Hawken makes a good point.

But I don’t really care for cheap tricks. I don’t believe in cheap tricks and I don’t want clients that use cheap tricks.

Design is important when it comes to the first impression. Cleanness is a good first impression and ONE nice pic is more than enough.

The best first impression you can get though is when the user automatically starts reading and is sucken into the page without asking himself: “Is this what I was looking for?”

Your article will be in my bookmarks for the next meeting of the new layout

It’s strange that the two of my most influential minds (in information design) have such, erm, not nice looking websites. Tufte’s navigation bar is tiny and haphazardly sorted. The Ask ET section could use also some sorting. With the layout and typography of his books extremely well thought out and implemented - his site doen’t follow suite very well.

As for useit.com, Nielsen is doing his message a disservice by knowingly overlooking the influence of good looking design. In fact, his message seems to be: If you want it to be usable, it has to look horrible.

That said, I’ve just stumbled across your site, and your writings and thoughts have made great impact on me. Your thoughts on 100E2R are well reasoned and right away I feel the urge to implement them.

Finally, I can’t agree with the suggestion that an ugly looking site (as Hawken pointed out) is a cheap trick. A huge part of designing is playing to the readers preconceptions. If a site selling something cheap looks too classy - I believe it would contradict itself in the readers mind. The result would be the reader feeling that something is not right about it.

However, a site selling something expensive should look expensive.

I redesigned by blog a while ago and and increased font-size a lot. I have received a lot of positive feedback on the increased readability.

I guess this will be even more important as the resolution of computer displays is increasing every day. The 7px typography from some of the dotcom web sites is almost impossible to read on a modern display.

Great article! I use the web mostly for reading (YES, I really do!) and can’t tell you how many web sites I’ve skipped because of this problem. I REALLY have to WANT to read a page to put up with this kind of stuff.

I use Firefox and have two important extensions: Zoomy: increase and decrease text size with buttons on the toolbar.

Read Easily: - which appears to be orphaned. It removes all styles from the page in order to combat stuff like dark text on a dark background.

Hey guys, your blockquotes are not 100%, too. It’s fine for the annotations on the left, but not within the text.

• [Don't use] silver colored text on a snow white background

I agree, why is this site using it for headers? Granted, the actual colours you are using aren’t HTML-defined as snow or silver, but I’m being sarcastic.

Thanks kindly, this is a great article and I’ve successfully argued these principles to various sites with more success than some “web designers” think they would have. Point #5 is my favorite, along with “avoid Flash unless it’s absolutely necessary”. Some companies are too caught up in applying their branding to electronic formats rather than hiring a decent firm to come up with standards for both electronic and other mediums.

I just feel sad to think that those who cause these problems will not heed the advice in this article, not until legislation starts opening their eyes.

How could I make my site better? It’s really become too jampacked.

I agree.

But I’d like to add something: Bright colors are completely unnecessary as backgrounds, even if the contrast is clear.

Hi Oliver,

I agree with some of your points.

But some of the links you provide to illustrate some of them are just examples of poor design skills.

The simplicity ones can achieve after mastering the complexity of a problem is very different (but sometimes quite not easy for an untrained eye/mind to perceive/understand) from the simplicity of a work done without knowledge and poor technical skills.

Your site is a good example of good E2R.

The site of the bA though, looks like a “too much corporate mabo-jambo powerpoint presentation slides that were turned into a bunch of webpages.”

Continuing….

But I have to say bA site is a good concept idea. To present the company as in a slide form presentation. Like pitching your company directly into some/any/one’s desktop. And if, I mean IF that was their initial intent… the problem might be in the content of the presentation, and not so much in the form.

thanks

1. … “Column widths that scale are nice”

I could not agree more. Perhaps you could scale the column widths of this page?

part III…

E2R, I agree with you. People are reading more and more directly from the screen. Why not make the texts more easy-to-read?

Very good minifesto and well-designed website.

I need to make one of this for my company one day.

Best regards,

Zeo from Brazil

I actually find 16pt harder to read. I experimented on my codist blog but it proved too clunky for the fairly long articles I have been writing. 14pt/140% is my current compromise. There is nothing worse than finding an article you want to read and having to increase the size several times before it becomes visible.

Nice article. Do you have any stats to back up your opinion?

There are a lot of excellent points in this article, but I would like to raise a few points/questions.

1) Your font size question is an apt one. I have a friend who insists that the small font size is very chic and will use nothing else. I personally enjoy the size used on this website.

2) White space. It does make text more readable - but I think white space can also make a page extremely boring. Adding color or design to the background can yield insight into the author/company’s character. I personally find that white complements other colors more than other colors complement white. Is the intention of this instruction to point out the value of ‘open space’ rather than just white space? Open space definitely makes the user feel comfortable within the page.

3) I wonder if you would tailor your advice more to different web designers (i.e. personal pages versus professional pages)? For many individuals, a personal webpage requires an element of personality and creativity and most do not want to look like every other page out there. The websites you list at the end of this article are functionally great and would serve very well as business pages, but on a personal level they all just “feel” the same. Could you offer advice on what elements of a webpage offer the best opportunity to individualize a page without interrupting readability/use?

1. I get tired of reading, as people are skillful at putting many words behind very few thoughts. Where do you see the role on text vs. non-text elements in a webpage?

Thanks!

On my recent redesign, which featured MUCH larger type than the previous iteration (and much more attention to typography in general) I ran into an interesting problem:

On article pages, users raved about the increased text size. On discussion/forum pages, users rebelled. Hated it. Demanded tiny, tiny type.

Never have quite grasped the psychology of that.

Great article, by the way, as usual.

Use FireFox. Simply hold down the control key and roll up with your mouse roller or press +/- to increase decrease fonts … hello boys … technology without having to re-write a bunch of cramped html/css

cheers!

Great article! Words that needed to be written! Thank you.

A couple of points.

Many typographers believe that a body-copy face with serifs (Times Roman, Garamond, New Century Schoolbook, etc) is easier on the eyes a sans-serif face for reading lots of text. Notice how few books and newspapers are set in sans-serif faces.

On PCs, Firefox and IE6 both will make the default text larger if you hold the control key and roll the mouse scroll-wheel towards you. This simple trick has made the web more accessible to many senior citizens I have showed it too. But, your right-sizing of text is a better answer.

So I was reading your post in Firefox and thinking, ok, but the type is normal sized, what’s he on about. So I switched to IE7. Ugh! the type is way too big, I can’t read it. Then I checked and I have my Firefox set to default font of Arial size 13.

I think IE (both 6 and 7) sets the default font to be too big. Which means that web site designers then use “small” or “x-small” for body text. If you then view the same site in another browser, the font ends up being too, too small. MSDN is a classic case of this. They have a large amount of text to display, set the font so it looks readable in IE, and it’s then tiny in everything else.

Because I dislike the large default font in IE, I routinely set View, Text size, Smaller. Which confuses all this again. And all this is viewed on a 1024*768 15″ laptop screen.

There’s a moral in here somewhere. And the moral is actually to follow exactly what you’re suggesting. Give up trying to get pixel-perfect graphic design. Don’t even bother trying to set font sizes, just use default for everything. And then let the user decide.

BULLSEYE!

Excellent stuff, I don’t know which of you guys wrote it, but it is excellent stuff. Well done.

Des

I’m convinced. I changed my blog to use 100% font-size and it immediately looks much nicer and is easier to read. The text looks huge compared to 99% of web-sites, including all the sites that I build that are professionally designed. I hope this catches on.

Isn’t there one further detail to consider? Different screens have different ems-per-inch displays–in general, higher-density displays have smaller default sizes. That is, if you have a 1024×768 display next to a 1600×1200 display, both showing the same web page on the same OS and browser, the length of a line measured with a ruler on the two screens will be different. (This is why users with higher resolution displays notice the teeny font problem more than users with older coarser displays–the same fonts are rendered smaller in real-world measure.)

This can be easily fixed by choosing a standard-density (say, 768 vertical pixels in 2006). Then whenever a page is loaded, find the vertical pixel count of the display and scale the whole page and all fonts by manipulating the “font size” percentage at a high node in the DOM tree so that coarser screens get a percentage less than 100% and finer screens get a percentage greater than 100%. This way, a line of type will measure six inches long and three-eights inch high with a ruler on any screen.

I’ve built large websites using this approach, and it makes no apparent delay. I can line up four ThinkPads with 800×600, 1024×768, 1400×1050, and 1600×1200 screens, and a line of type is the same real-world size on all of them–readable with the same glasses.

thank you very much for the advice on line-height, it’s a standard I will follow from here on.

Hello, I’m from Argentina and I discovered this article because a blogguer-fried want to read it, but he does not understand English so well.

I translated it to spanish and I’m totally agree with this article, so in the next design of my website I will apply all of what it said.

I saw this page this morning on my mac, and it looks great. Then this evening on my PC, and it doesn’t… 16px Arial is just too spidery.

This is a font rendering issue, and I think it’s behind a lot of the small type we see. The mac goes for smooth anti-aliasing. My PC has a CRT screen so there’s no anti-aliasing at reading size: the verticals are 1 pixel thick, and 1/16 is just too thin. On an LCD you get Cleartype, but this seems to be tuned to make reading-size text look as “sharp” as it is on CRTs, so it doesn’t help much.

When designing websites, I settled on 13px (Arial) as the biggest size that still looked meaty enough on the PC.

Interestingly, this will probably change with Vista. Georgia (1996?) and Cambria (2006?) are very similar at big sizes, but they are rendered by cleartype very differently: Georgia gets hardly any smoothing at all (sharp, pixelish, very light) while Cambria gets fully smoothed (and so appears much darker).

One more thing: palou could you post a link to the method you describe? (Scaling fonts to % of screen height.) Can you do it in CSS?

Great article, VERY readable.

One problem with changing font size on-the-fly is that if you’ve already done a bit of scrolling off the top (or bottom) you lose your ‘place’. Try the FF ctrl+/- to see what I mean.

So I agree about setting size to 100%/1em - OTOH I keep mine at 14px on a 1024 browser. To me, 16px is too big.

I too would like to know palou’s method for Scaling fonts to % of screen height.

I’ve increased the line spacing on my site and it does seem more readable.

On each webpage, link to your external file of javascript procedures in the or put the needed procedure there literally, and then just below the opening tag, put in a javascript call:

changeFontDefaultToScreenSize(); That’s the only change to each webpage. There’s no need to wait for any events. Here’s the text of the function loaded in the of each page: function changeFontDefaultToScreenSize() { // Try to make fonts and screen areas the same size on screens of different // dpi densities (screen size is the nearest available proxy for density); // the user’s standard text adjustment via browser menu remains available unchanged. // Use height rather than width, so as not to be misled by wide-aspect screens. // (The extra “.01%” is to force non-default sizes, to work around bugs in some browsers.) var resHeight = (window.screen.height)?window.screen.height:768 ; var locFontSize = // at 4:3 aspect-ratio: resHeight>=1536?150.01: // 2048 x 1536 = 150% (QXGA 2006 max) (resHeight>=1440?146.01: // 1920 x 1440 = 146% (resHeight>=1200?138.01: // 1600 x 1200 = 138% (UXGA) (resHeight>=1050?129.01: // 1400 x 1050 = 129% (SXGA+) (resHeight>= 960?123.01: // 1280 x 960 = 123% (resHeight>= 864?117.01: // 1152 x 864 = 117% (resHeight>= 768?111.01: // 1024 x 768 = 111% (XGA 2006 default) (resHeight>= 600?100.01: // 800 x 600 = 100% (SVGA 2006 lowest) (resHeight>= 540? 90.01: // 720 x 540 = 90% (resHeight>= 480? 80.01:111.01))))))))); // 640 x 480 = 80% (VGA) if(document.body) { document.body.style.fontSize = “” + locFontSize + “%” ; return true; } else { return false; } }

In your CSS, you set the body font-size to 100.01%. The code above rewrites that as each page loads. All other font sizes in the CSS are set in ems, with 1.0em as the standard size. Be sure to follow all the other recommendations in your CSS.

For best results, be sure that all lengths and containers (divs, tables, margins and paddings, et al.) are also sized in ems. Then the code above will cause all the containers and all the fonts to scale to the screen density together.

Nice! I have always told our art designer “larger font and larger line space.” She told me coldly, “This is the standard. And this is the beautiful one.” Don’t know how to communicate with them. They don’t know web pages design. And they don’t know design either.

I surf with Firefox and set minimum text size 16px and verdana or sometimes my own style sheet with stylish addon. It works most of the time but even big companies that should know better persist in using absolute pixel positioning and sizing of elements. So my slight increases in text size for their sites cause overlaps, text hidden by pictures, and inaccessible links. And when I send a polite message they say its too much trouble.

Widely agree. Your design preferences are mine too. I love it. My house is full of empty space. Please keep that in mind when proceeding to the following sentences.

My advise is to first think of what the function of the specific page will be. Is it a page to be read?

I often have to work with pages or with a page and one or two applications in parallel. Comparing stuff, copying and pasting, and so on. Thats not nice on a 1024 screen with a page like this one, always forcing to heavily scroll, and never get an overview. For this one usage the worst is a lot of white space on the left forcing horizontal scrolling to let it just fit on the minimal pane you want to offer. And after having done a word search you need to re-adjust the horizontal scrolling. A lot of pages’ purpose is not to be read. It is to be overlooked at a glance. Linearly reading text was the media consumption model for centuries. Also the last centuries media inventions radio, film, TV did not change the consecutive consumption model. But the computers and the Web do. Reading now is just one way. And people will more and more not follow the text writers anymore and scroll and read patiently til the end.

However, if being read is the purpose then obviously this rules are fully valid.

I love it! I’m going to root through my CSS this weekend! You blow my mind like Zeldman.

Oliver, interesting article, but I do have a couple of questions/remarks.

The argument that we should use 100% size just because that’s the default is very weak. I could list hundreds of default “things” on my windows pc which could be improved immensely. The default setting isn’t the best. To the contrary, I may say. If you would take that argument a bit further: why would you want to change the default line-height, line-length, color, font, etc? Isn’t the default optimized already? The answer is, of course, no.

Next, I know there has been a lot of research on the influence of different settings (font, size, contrast, etc) on reading (speed, accuracy and comfort. Do you base your ideas on specific reports? Or do you have links to some results?

I’m not trying to dismiss your point. Maybe 100% is the most optimal text-size (in general or in specific cases). But I do try to take a critical viewpoint in this case and I would like to dig some further before I’m confident enough to agree.

Well, you are right of course that browser makers are not idiots. But we do not know the reasoning behind the defaults. I’ll search useit for some research results.

And I think you deserve some more credit for your writings Oliver: it isn’t just the increase in font-size which made your site a success!

I wish it would be that easy (then I’d had 60px font-size on my site..)

Without knowing the Information Architects, we have implemented all off the above rules to our site a while ago. Therefore we absolutely agree with the rules!

Is the size so important?

Let them be. I mean is the user free to change the size and are the browsers and de OS the responsables for the lack of accesibility in 99%.

I try hard as a designer but there are too many parameters to make happy to everyone (the client, the final user, people with eyes problems.

Anyway, it’s a great issue for discussion.

Thanks to Francisco Morales> who gave me the origin of the issue.

Pst in Blog ceslava.com

Hi, yes its true that most of the serious readers like normal fonts not too small or too big! but it also depends the format/theme of the website/page. At least the article sections should be properly formatted with paragraph breaks, line spacing and stuff like this which are the basis f proper documentation. any ways a good article, keep writting more like this. best of luck!

You oversimplify the subject of line-height. Appropriate line-height depends on several things, not the least of which are text size and line length. I find line-height: normal just right when the text is my size and the line length is optimized. Other than that, we need more of use spreading the gospel of respect for user settings.

This is a case of Altruistic Design vs. Narcissistic Design, or philanthropy vs. misanthropy. Design for users, not for The Sake of the Design Itself.

Web sites are not art to hang on your wall. They are information or functional tools.

Great work. Thanks for posting these principles. Fire your designer if he or she disagrees.

I applied it to my blog, to try it out. I myself like it, but don’t think that you have to treat it as a dogma (not saying you do, but other people maybe will). Take for example the website http://www.alistapart.com, smaller type, but yet, still not hard to read.

I think they manage to do so by paying much attention to typographical principles.

I like to add that your notebook in general is a big inspiration, keep it up.

“Web sites are not art to hang on your wall. They are information or functional tools… Fire your designer if he or she disagrees”

Yeah, but you have to admit that without aestetic or visual appeal a website has no audience. People look before they read, unless you are visually impared, and will make a quality judgement based on what they see. This often determines whether or not a reader is going to bother engaging with your web standards compliant, intricately constructed web site, or is just going to let you continue on only communicating with a minorly group of like-minded people (who like the way you’re site looks because you’ve made the aestetic decision to keep it ‘un-designed’).

100E2R is not about designer bashing and don’t you think that’s getting a little tired anyway.

Hi Oliver

Thanks for responding. I hope you don’t think I was critising 100E2R or your site. I’ll freely admit that I don’t know nearly enough about constructing web sites to be able to do that. I think, as far as web standards go, this is the most visually pleasing solution anyone has come up with that I have seen, and obviously contains a lot of deliberation over how a site should ‘look’.

I was replying to an earlier post that seemed to be leaning towards this slightly weird sort of ‘anti-designer’ sentiment that pops up now and then when people start talking ‘web standards’.

Hello, I had a problem with small fonts, and when I increased my fonts the text overlapped with other parts of the page. You’re right in saying that many websites are bad designed.

But I wanted a solution to this. The design mistakes won’t be corrected now. I found a solution : The Opera web browser has a “page zoom” feature that zooms the web page. With this there isn’t the nasty overlapping problem.

Of course, as this feature increases the size of the images, there is a pixelization problem.

This feature is implemented in IE7 too, and “is scheduled to be implemented in Firefox 3″.

Oliver: I considered sending this feedback by e-mail since I’m not commenting on this post specifically, but thought others would benefit from it while they read about the importance of typography on this site.

You make me think every time I look at the date stamps on this site! Sometimes, this doesn’t amount to much thinking if the text is something like, “Published on 31/12/06″, because I know there are no more than 12 months, and I’m pretty sure the article was published after 1931. But when I come across text like “Published on 11/12/06″, I have to find another date stamp on the site like the former so that I can determine the format of this date.

An unambiguous date format like “11 Dec 2006″ or “December 11, 2006″ would be appreciated by me and others I suspect, who consider the date stamp a vital piece of information.

Just wondering: would a bold 32-point sans-serif text inside an image be inappropriate? It’s a sub-section header (not for body text) and degrades into plain text when images are disabled.

This article was written a while ago, but people are still commenting so maybe this will be seen. Personally, I hate your ideas on points 1 and 2, and have minor issues with your ideas on points 3 and 4.

-. Don’t tell us to adjust the font size: Why then do you force me to adjust my font size?

-. Don’t tell us scrolling is bad: Scrolling IS bad. So is flipping pages in a book. Reading a story in linear format is not as bad, so articles and novels don’t suffer so much, but it’s still annoying. When reading technical information or instructions that you might read back and forth it is terribly important to fit as much on screen/page as possible.

1. Font Size The default size is so big it hurts my head–unless I back up about 4 feet. If I were on a much higher resolution screen it might look ok, but I shudder to think of the pain if I were running 1024×768 or even smaller. I reduced the text size from “medium” to “smaller” and the article looks good. Some other text is a bit too small, but that’s much better than the default look.

2. White Space Some white space is good, yes. But you’re wasting half my screen with whitespace. I don’t know how many times I’ve copied an entire web page into notepad or something just to get rid of the stupid amounts of whitespace. Furthermore, if I were trying to cross-reference with other articles or this was a set of instructions while I did something in another program, I would have to do a lot of work to make it sorta work.

3. Line Height I’ve never had a problem with the default line heights, so I’d call it a non-issue. If this site uses the 140% you like, I don’t have a problem with that either. So whatever floats your boat, I guess.

4. Color Contrast I agree with contrasting colors. However, I highly dislike a pure white background. A light grey is much better, just because white is so terribly bright. It’s not as bad in my office with lots of ambient lighting, but at home, where the monitor is often the only major light in the room, white is killer.

5. Text in Images I agree text should be text as much as possible, but there are a few places where image text is appropriate: symbols that might not display correctly on all systems (wikipedia’s math articles do this a lot), site or corporate logos (like the iA logo on this page), or information that needs to be human readable but not computer readable (particularly to avoid spam and bots).

In response to the previous commenter, I would not make a section header into an image, because then it’s not searchable and creates problems for something like copy/paste.

@MichaelS

Scrolling is bad? Flipping pages is bad? You are quite a smart ass, are you…

@ Philippe Kreuzer

Umm. A “smartass” usually refers to someone making a comment that’s technically true, but useless or irrelevant to the current topic, usually to be demeaning or make fun. It could also refer to making comments that obviously aren’t true in a sarcastic, witty manner for the same purposes.

When I said “scrolling IS bad”, I was stating that the OP’s assertion is wrong–a far cry from being a smartass.

Ever do electrical wiring in a car? It’s a lot easier when all the diagrams and descriptions for the system you’re working on are on a single page. Even if they come on 5 pages, I generally make copies and tape everything together so I can see it all without flipping back and forth (especially for the diagrams, but also for the legends and descriptions). Same thing for torque specs and clearances on the engine. If all the related information is on one page, it’s much easier than having to flip back and forth.

Likewise, if you have instructions for writing some code in one window, and you’re writing the code in another window, it’s much easier if you don’t have to constantly switch windows, scroll down a little, switch back, write a little code, etc. Or maybe you’re reviewing or critiquing an article someone wrote, and you have it open in another window.

But even when I’m just reading, scrolling or flipping pages is annoying and distracting. Attention must be taken off the page, the act of scrolling/flipping completed, then the eyes must figure out where they need to resume reading from. Am I really so challenged by something everybody has to do? No, of course not. But the less it’s required, the better.

Scrolling is bad, and should be minimized as much as possible. Obviously, there are limits–I don’t want to take a 900-page novel and cram it onto a front-and-back sheet of paper. But neither do I want to scroll down every 2 seconds of reading.

One of my pet peeves in this regard are the stupid-sized comment boxes. The comment box for this page is 402 x 164 pixels. By contrast, my maximized notepad window is 1260 x 982 pixels. That’s 5.3% of notepad’s surface area for the comment box, or 1877% of the comment box’s area for notepad. The smaller box has a somewhat better whitespace-to-text ratio, so the difference is probably closer to 12 times more usable area. Still, that’s enormous; at this point in writing, this text takes a bit under half of the notepad window, and a little over 5.5 full comment windows. Not so bad for something short like this, but it’s killer if I’m writing something long.

Thank you for your clear and informative article. News websites might want to take a look at it; they always seem to cram everything together. Also, it is great to know that scrolling is not a problem. “And that’s the way the cookie crumbles.”

I am seriously not being a smartass. Maybe a bit smart, and probably a bit of an ass, but not a smartass.

The point being made in the article is reading regular text, as you say. I made the point that it’s especially true for the diagrams, which doesn’t pertain to this, as you say. I also immediately made the point that it’s true for legends and descriptions: regular text. Torque specs: regular text. Instructions for putting the engine together: regular text. Programmer working with two windows: regular text (well, sometimes not, but in my example it is). Writer working with two windows: regular text.

What if I just want to read from the other side of the room so your 10-foot letters don’t hurt my eyes? Then I have to come all the way to the computer to scroll down again. Lowering the font size fixes both problems; how convenient. (Ok, so that’s a smartass comment.)

I won’t argue with you about the history of column widths as I really have no knowledge there. However, your extremely thin columns (that don’t resize with text size, by the way) annoy me a lot, as it’s significantly harder to read, and it’s not like you’re limited by the physical size of the page. Also, if column widths are so standardized, why don’t all column widths look the same?

One more question: have you ever read a real book? A printed letter? Official reports? (Those are rhetorical questions meant to make you think about, but not answer–I’m still not being a smartass, because I seriously want you to think about it.) Maybe you are running 4000 x 3000 pixel resolutions on a 5 inch monitor, but if I put a printed paper next to your site at default text size on any of my monitors at normal resolutions, the printed characters are tiny compared to what’s on my screen (all the way from 15″ to 21″ monitors). They’re slightly smaller than your characters when I resize the text one step smaller, which puts them about the same angular size since I read papers a little closer to me. The small comment text, at the smaller font size, is slightly larger than the text in any of my 4″ x 7″ novels, and slightly smaller than the text in my 6″ x 9″ novels.

Simply put, your text is large by any standard I can find. That throws a bit of a kink in your “thousands of years” logic (I know, I know–you said that about columns widths–but you seem to think that way about everything here, as though there’s some standard that everyone uses but nobody knows about).

Scrolling is a part of the medium because it’s necessary, not because it’s desired. And sorry if my points take a little more than 2 characters–I like to elaborate a little so my thoughts are a little more specific than “you dumb, me bash!” (I’m exaggerating here, but I, again, mean it quite seriously.)

Michael,

1. Text size: Do you read with stretched out arms?
2. Comparing text online and offline: You should check out the difference in DPI, smartass
3. That you personally dislike big fonts is not an argument

Oliver’s text is not large by any web standard. Check http://www.useit.com/ or http://www.nytimes.com (check font size on articles)

Philippe:

1. I read a book about 25% closer than I read my monitor. The monitor is a little under 2 feet away, and I typically read a book around 1.5 feet, maybe a little closer. Since the book’s print is slightly smaller, it’s about the same angular size.

2. Ok, so the printed text is a bit smoother, especially compared to an LCD. I don’t see that as a problem. The lines are about the same width either way, and the distinction between text and background is about the same. PPI doesn’t really do anything for you except look a bit prettier.

3. That you personally dislike small fonts is no more of an argument about which is better. That I consider the big fonts hard to read defeats the premise of “100% easy to read”. If it were just me, then it would be a smartass argument (because it’s technically correct but not important), but it’s not just me.

4. Umm. Check out foxnews.com, cnn.com, http://www.nasa.gov, google.com, harrypotter.warnerbros.com, yahoo.com, hotmail.com, usabletype.com, microsoft.com, apple.com, msnbc.com, about a zillion web forums out there like mr2oc.com and iidb.org, most blogs I’ve seen, etc. Do you honestly think that not one of those sites thought about larger fonts? Come on.

Mr. Reichenstein (Oliver is a male name, no?):

You say “The font size you are reading right now is not big. It’s the textsize browsers display by default.” I tested this in IE 6.0.2800.1106 on Win2K SP4 and WinXP SP1 and Firefox 2.0.0.3 (that I just downloaded) on Win2K SP4. The default font on all browsers and systems is Times New Roman, which displays at the size I like. Switch to Verdana or Arial (don’t have Helvetica installed on this machine apparently), and it displays at the size you like. By default (the ones that installed with the program), fonts are NOT as you like them, but as I like them. How’s that for “the defaults are perfect–thou shalt not dare to use anything else”?

And a point matthijs made that you hand-waved away: why is this supposed default font size so damned important, but no other defaults? Browser designers aren’t idiots, so why wouldn’t they look into line spacing? What’s wrong with default there? Aren’t they experts at this? And what about other things? Are OS designers idiots because many people change all kinds of defaults?

Another note is that by having the huge font, I have to change my font size everytime I enter your site, and every time I leave. If you went with the standard font most everybody else uses, I wouldn’t have to do that. Furthermore, if I happened to like your large font size, I’d have my default set to larger, then your large font would get up-sized again, making it even bigger, so I’d still have to resize every time I viewed your page.

1. I am 23, and I do read my monitor leaning back in my chair. I also pulled out a tape measure and measured the distances to confirm my guesstimate. Turns out my guess exaggerated the distance difference slightly, but not much.

2. My screen runs about 90 dpi at work and about 85 dpi at home. I’ve printed things at 72, 90 and 100 dpi, and had no problem reading them. They look odd, but so does 600 dpi after reading 90 dpi for a while. Once you start getting into smaller text (4-6 px), dpi makes a huge difference, but the font size I like onscreen (10-12 px) isn’t small enough to hinder reading at 72-90 dpi. And I’ve read several entire books at that printed dpi.

3. Philippe noted that my personal preferences do not an argument make. I was merely noting that his and your personal preferences aren’t any more of an argument.

4. I agree not all of the sites I listed would have put the same money and effort into design. But to say not one of those sites hired a professional team of design experts seems a lot like hand-waving to me. Usabletype.com is a site about web design, so it’s a perfect counter-example. Foxnews, CNN, MSNBC, Microsoft, Apple, etc. surely paid a good bit of attention to design. And I can’t say for sure, but apple.com doesn’t look 7 years old. I can say for sure that my friends and I were running 90ish dpi resolutions 7 years ago, even while playing games. I listed the Harry Potter site just as a random example of an “other” site. Message boards are all about reading, so I listed a couple. I don’t recall having called 16pt fonts “random”, but if I did it was an exaggeration. I realize that there’s a web standard out there, but I also realize many people are intentionally ignoring it.

Earlier you said people don’t read books online. Just FYI, I’ve read several books online. The biggest problem with reading books online is when the site uses a white background, instead of a light grey or something. Real paper is “white”, but it’s never as bright as a computer monitor’s “white”. I have my Windows colors set so my font is black and my background (in notepad, etc.) is 192,192,192 RGB. It’s so much easier on the eyes, as long as you don’t go too dark (less than 180 or so for me on my monitor).

MichaelS, You really need to look into who uses what sorts of DPI, you are sounding like a bit of a fool on both the web design and graphic design fronts if you start talking about reading printed matter at 96dpi or 600pdi. When creating materials for print a DPI (dots per inch, it’s a ye olde ancient printer’s rule of thumb) of around 200 to 300 is generally used as a benchmark resolution. You really don’t get printed material produced any lower (or much higher).

MichaelS,

enough with the bullshit. Do your homework first, boy. Write less, think more.

Glad I found this article, I can refer my clients here whenever they whine about scrolling

Michael,

Thanks a lot for this wonderful article.

I’ve already changed the font size of my blog, and indeed it was a lot easier to read that it was with its previous 80% setting.

Everything’s not finished though, since I have to make a few more adjustments with the layout.

Will be encouraging friends to do the same with their website.

Cheers!

Oliver,

Sorry for referring to someone else.

Thanks again for this article. Working overnight and going over the long list of comments may have taken its toll on me as I was writing the previous comment.

My apologies again.

Your article on 95% typography was actually the inspiration behind using the 100% font-size on the design for Crucial Web Hosting:

http://www.crucialwebhost.com

Such a joy to read things too, it’s nice to sit back in the chair and read, instead of hunching over about 5 inches from the screen, straining to read something and then leaving because of the stress.

You have some great articles here too, been a reader for a while. Keep it up

Thanks, you’ve helped me a lot. In most cases I agree 100%. your article works fine as a checklist.

cheers wolfgang

Is Wordpress rebelling against the site? The sites listed have a bit of a broken HTML (missing a few quotation marks), and automatically includes rel=”external nofollow” … just thought I’d point that out.

Interesting article. I’ve just finished spending some time doing an informal survey of the use of font sizes on the web and various approaches to setting font sizes. I don’t think I will follow your list of rules, though I can see that they will produce some usable, larger font sites.

The reason I’m posting, however, is that I was looking for examples of sites that leave the default font sizes alone and I was disappointed to discover that a number of the ones you list as 100E2R members do not follow this first, seemingly crucial, rule.

Before getting to that list, however, I would note that the New York Times is referenced in the comments above, but they use a reduced font size: body {font: small;} and html>body {font: 84.5%}.

Also, the Comments section of this site has a font size that is considerably smaller than the default setting for the page. I am not clear on the logic that would make the comments smaller than the core page paragraph text. It doesn’t seem to be setting a very good example.

Then to the list of members:

James Starkie (#3) http://james-starkie.co.uk/ body {font-size: 62.5%;}

SynApps (#4) http://www.synapps.de/driki/ body {font-size: 14px;}

PiqNiq (#5) http://www.piqniq.jp/ body {font-size: 12px;}

Katzenbach (#7) http://katzenbach.info/ body {font-size: 0.9em;}

Glorum (#9) http://www.glorum.com/ inline code:

EngTech (#10) http://internetducttape.com/ body {font-size:1em;} and body {font:95%/120%}

So 6 of the first 10 sites you list as signatories don’t follow Rule #1 by my reckoning. I stopped checking after that.

Maybe a review of the list of supporter sites is in order.

Phil.

1em or 100%, both are okay

OK. I didn’t realize you intended that level of flexibility.

But by allowing such flexibility, don’t you run a bit of a risk of the standard becoming a judgement call, based on how a site looks on a few particular software/hardware configurations, rather than on how the site is actually coded?

For instance, it is my understanding that different browsers interact differently with the default font size settings in relation to percentage body font sizes set in CSS. And some users change their browser’s default font size so that ALL sites appear in larger (or smaller) fonts. For some of those users, then, setting the body font size to 62.5% will mess up their modified font sizes, even if those fonts are later sized back up again in the rest of the CSS declarations. These resizing issues don’t crop up if you leave body font sizes at their default levels.

So while I personally think that a flexible, judge-each-case-on-its-own-merits, may be a good approach, I’m not sure it is the best approach if you want to promote something as a “standard”, like the 100% Easy-2-Read standard.

One way to resolve this would be to require that all 100E2R compliant sites must: 1. Leave the body font size setting at its default or set it to 100%. 2. Leave the default p size at its default or set it to 1.0em or 100%. 3. Ensure that all other font sizes used in the body or CSS files be set in relative measurements.

Even though I have misgivings about this “standard”, I like the idea of it existing and of being able to refer people to your page here if they are interested in it. Ideally, then, I think this page should contain a clear rationale along with unambiguous guidelines and a good list of ideal “best practices” site examples.

Phil.

Thanks for this insights. Arriving to a website, I just want to read the informations, without scaling the font size.

Lots websites are crammed with small text that is a pain to read. I ignore them and switch to the next website.

Think about the fact, that ca. 50% of the people need glasses to read.

So what do you think, how can you attract them to stay and come back to your website?

Using large or small fonts?

regards, Markus

Nice article. Great for anyone who writes for the web.

You are saying about long scrollings. And what we see on this page? Endless scroll bar (37 pages). Why don’t to start follow these steps from yourself?

Here’s a note about text:

Your text uses imperitives (’do,’ don’t'), but doesn’t say to whom they are addressed, or by whom, i.e. from what point of view.

Please make it clear BEFORE the body text begins who the text represents (who’s speaking) and who the target audience is (who it is addressing itself to).

I think your piece makes some interesting points, but I am unable to put them into a context.

ta

This is already too much scrolling, to my tastes.

Anyway, current browsers already allow me to change font size very easily, so it’s not much of a problem these days.

While I like all the points you raised one thing that did strike me was the lack of centering. I’m viewing your page on a 30 inch monitor and it looks annoyingly lop sided as everything left centered. While I think you can get away with that on lower resolutions, on higher, especially wide screen resolutions, it just impairs reading. You should therefore consider not only centering this page but putting something into your standard about that.

I don’t quite agree with point 2 and I perceive your text as quite tediuous to read. Especially since its left-aligned and not justified! Interestingly, resizing the window to match the text width immediately makes it readable. But (unfortunately?) the computer screen/browser window is wider than tall and the white space you use just can’t flip that ratio.

About scrolling… Well, the best scrolling device are the eyes, not the mouse.

What do you have to say about text justification? Should it always be left-aligned, or is justified okay?

Hi, very good. So good that I’ve translate it on the run in french! I plan to publish it on my blog. tell me if the work have been done before. Thanks.

Well, simply thank you!

Not 100% with you on some of it (standard text-size is huge at 800 res… and tiny on some of the stupid high res’s available on some laptops)…

…but all in all, “bang on”.

You are definitely correct about whitespace and text size, and their contributions to readability and usability. However, from the look of your own font choices, it appears that you prefer fonts with serifs. It’s been a long while since I’ve studied any of the literature about fonts and readability, but I seem to remember that serif-based fonts are designed for printing, not for on-screen viewing. As a general rule of thumb, sans-serif fonts are more readable on screen.

Perhaps by choosing the default font size, you get a little more breathing room for serifs (a little larger than is typical with print…12 point on screen is supposed to match 10 point on paper, which is a fairly standard size for text…16 point gives you a little more room for stuff like serifs). Opinions?

This is a really neat article. I enjoyed reading it and learned a few things I didn’t know before. Thank you!

I disagree with the assumption that we can somehow determine which browser settings were intended (and should be left alone) and which ones we need to fix.

Furthermore, referring to text objectively as large or small is generally irrelevant because size depends largely on individual resolution and font availability.

So it is wrong to assume that any give size is necessarily better for everyone, because you will never know who everyone is. What is appropriate is that we give each user the ability to change the type size on their own.

Here’s my question: Why is there funky extra whitespace after “2. Active white space” ?

I’ve really enjoyed browsing through your site over the last few days. Reducing readable design to five golden rules is a fabulous idea: there’s so much to think about without this summary.

However, I agree that column widths that scale are nice. Yours don’t (I use an 800X600 monitor at home). Scrolling horizontally is a bad thing, no? Why not set the left and right margins of your content to auto in relation to the body, so those with higher resolutions benefit from the additional white space, while those at 800px width don’t have to scroll the page in order to use the search box?

PS - I’ve fallen in love with 100% Georgia again!

Very usefull article - your article will be in my bookmarks! Many webdesigners often forget about typography basics - so it’s really important to spread a word about it…