deliciously simple web design & creatively technical writing

• Home
• About
• Gallery
• Archive

Text Size Philosophy

It bothers me when I go onto certain sites and they offer a widget for resizing their stupidly tiny main-content text.

CNN’s website is just one such example, with a standard and slightly larger text size selectable through a gray selector.

Here is the standard CNN text.

This is the larger version.

I consider this sort of thing to be a monumental failure in design.

Duplicating standard operating system or browser functionality directly on your website is almost always a bad idea. Whether it’s putting a clock or calendar on your homepage or putting a text-resize widget on an article page, forcing redundant functionality onto a site makes things more complex for no real reason.

Isn’t this considerate to near-blind folks?

I have less than perfect vision myself (near-sighted) and am naturally sympathetic to trying making sites easy to read.

No, of course not!

Considerate would be rolling out legible text in the first place using the standard 1em text size (16 pixel) browser defaults.

It is asinine to force somebody to make an extra click to access legible text.

If your content won’t fit you must acquit

One possible objection to using standard size text is that it’s impossible to fit all your content onto the screen. If that’s your reason though, you’re organizing things wrong. You’re probably trying to fit too much unnecessary content onto the screen.

Part of the problem with larger organizations is that they have non-designers (maybe people from marketing or other divisions) demanding that their precious content makes it onto the website. It’s an ego and politics thing.

Excuse me, Sir. This is the Internet.

A newspaper making their text larger would necessarily increase ink and paper costs. When you’re talking about runs involving tens of thousands of newspapers per day, a difference in text size could be a real financial challenge.

But it’s not as if making the text larger on the internet leads to increased printing costs. There is no excuse for not using legible text size by default.

None.

Text Color

Shaun Inman is a designer/developer that makes kick-ass products.

Depending on the day of the year an article was published, the page color is slightly different

I dig the seasonal change in colors idea he’s got going on. One problem that this presents is that the color combinations that are produced might be hard to read for some people. His solution to this is to offer a higher contrast white text with a dark background version that is toggled through this button.

For a personal site, that’s ok. For a business site though, I’d never want to have a situation where the text wouldn’t be easy to read by default.

Typeface selection

The clagnut website is another example of a site that has an interesting text choice.

Rather than just pick some default typeface for the headings and sidebar, there is a little widget to change the typeface itself.

While moderately neat as an exercise in programming technique, it seems pointless for the user. The space occupied could be used better. Just pick a sensible default typeface and run with it.

Conclusion

Design stuff with legibility in mind and don’t make users have to choose between various text-sizes, colors, or typefaces to try and read your stuff. It’s your job as the designer to choose proper defaults so that your content is legible from the beginning.

Further Reading: The 100% Easy-2-Read Standard

More exciting stuff coming very soon! Don’t miss it.

Posted on April 22nd, 2008 by Chris Papadopoulos.

Subscribe to the RSS feed, Trackback, or contact me privately.

Comments

1. Richard (1 comments.) @ Apr 23

   I do totally agree with this article despite not having yet created a site with text as large as what you suggest. I am however, considering doing just that for my next project.

2. Ryan(new comment) @ May 26

   On the CNN example I’d rather have the smaller text size, it’s easier to read. I also shrink the text down on your own site (here) because the large text is fuggly… but what if other visitors don’t know how to do it through the browser yet want to change the size for better reading?

   I agree with your overall point that the design should be considered from the start, but I don’t think it’s as black and white as your post makes out.

3. Chris Papadopoulos(new comment) @ May 26

   Thanks for the comment, Ryan.

   Browser makers set 1em as the default text size for a reason. What is on this site isn’t the norm around the internet, but is actually supposed to be the standard.

   It’s much easier to fit more content on the screen when the text is tiny, so I think that the trend around making text tiny started out of laziness. Lazy design involves throwing as much content on the screen as possible because you don’t want to have to make a choice about what items are really important. Good web design involves picking and choosing what is really important and presenting it in the best way possible.

   I think making the text standard size is the best possible solution in most cases.

   Ryan, if you personally prefer a small text size, that’s your choice, and I’m sure you know your browser shortcuts to quickly make a change.

4. Chris Papadopoulos(new comment) @ May 26

   Hi Richard, sorry for not responding sooner I must have missed your comment. I checked out your site and like your film stuff. I’d love to be able to do more visual story-telling like that in the future, so kudos for working on neat stuff. I might post some of the movies I made when I was younger for giggles one day.

   One thing I’d take a look at with your site with regards to the text is the line-height. It seems to be the same for the small text on the left and the large text on the right. Particularly for the larger text, that small line-height feels a bit cramped. Just my opinion.

Agree or Disagree?

Your Name (required)


Your E-mail (required)


Your Website (optional)


Your Comment

Notify me of followup comments via e-mail