Recent posts

  • Relative readability Why go so big on type? There’s a short answer and a long answer.
  • Excuses, excuses Some people might suggest it’s not worth redesigning a site I only post to twice a year. They’re missing the point.
  • The Optimizer Every designer is wired differently. Some people are idea people, some people are artists. I’m an optimizer.
  • Indistinguishable from magic I love video games. I’m terrible at most of them. But I’m a sucker for a game with a good story.
  • Airport express Recently I learned two things about interaction design and user experience from waiting in lines at the airport.
  • Shouts and echoes There have been some situations lately that have got me thinking a lot about the Internet as a megaphone for personal communication.

Archives

20 October 2008

Relative readability

Why go so big on type? There's a short answer and a long answer.

Greg asked a good question about the redesign in the comments on the last post.

Why go so big on type? Could not the same effect be achieved with smaller sizes?

My answer got long, so I figured I’d use it as an excuse to post again (twice in the same month, I know, shocking).

The short answer is “so the body text could be big.”

After years of wondering why browsers defaulted to 16pt text sizes I’m starting to be convinced that long text really is significantly more readable on screen at precisely that size.

So I started with 16px for the post text and worked out from there. The problem is that whenever I’ve tried that in a normal layout, it looks clown-sized, like those remote controls for old people. So I started pushing the scale up all around — width, headers, white space, images.

With the previous design I increased the width to 1000px, which was great for the homepage. But the post pages were just these huge wide blocks of text. It was too much space for the content. I didn’t want to load up the layout with gratuitous sidebars and extras, so this time I tried scaling the content up to fit the space, instead of adding content to fit the space.

There’s a great article by Oliver Reichenstein of Information Architects Japan that makes a really great case for why larger type and lower content density is good for readability on the Web. He calls it The 100% Easy-2-Read Standard (or 100E2R for short).

When I first linked to that article about a year ago, I was intrigued, but skeptical: “I agree it’s easier to read, but damn it’s big.” Oliver emailed me in response and made a point that really surprised me.

Actually it’s not that big, once you use it you start thinking “Damn. Everything else is small”. Physically 16pt is as big as 11pt in print. Huh? Yes, the screen is usually further away, which at such small distances, has a huge impact.

He included a picture of a magazine held at reading distance in front of a monitor at browsing distance. I’ve recreated it here to illustrate his point. On the left, a post on this site with 16px body text. On the right, an article from a recent issue of Dwell, with what looks like 11pt body text.

Oliver explained…

If you think that’s flawed, you’re invited to repeat the experiment. It’s stupefying. 16pt only looks big because we’re used to small fonts and because the threshold (browser window) makes it look big.

Oliver’s whole article makes a much more comprehensive case, including white space, line-length and height and contrast, but it’s still that visual comparison that stuck with me.

So that’s how everything got so big. That and I was looking for an excuse to use obscenely big Helvetica Bold headers.

Comments

  1. 20 October 2008

    Dan Rubin

    Awesome. This has been holding my redesign efforts up for a while, wanting to go big with type but not being able to reconcile the design/layout changes (re: scale) necessary to do so. Nice to have such a perfect demonstration to kick my brain into gear.

    On my mum’s blog (http://malipunations.com/) which I designed last year as an x-mas present, my goal was to make the body text feel like you were reading a book, since her writing style isn’t really blog-like, and her audience aren’t internet folk. The reviews she’s had from friends and random visitors prove that this is the right way to go.

  2. 20 October 2008

    Stephen Caver

    Seeing that photo is like pulling the blinders back. I do have one concern, however. How does the state of people’s monitors factor into this? Wouldn’t someone browsing on a computer with a monitor set to 1024 have text that looks even bigger?

    Otherwise, you’re right. And I’m ashamed that the text on my albeit-temporary tumblr blog is set to 10px. I’ll be remedying that in my upcoming redesign.

  3. 20 October 2008

    Michal Migurski

    This feels like a fairly natural step in the evolution towards resolution-independent graphics. Typical monitors are getting larger, anti-aliasing algorithms are being improved, and as a result I’ve been increasing my day-to-day eye/screen distance. I find myself bumping up text sizes on a lot more websites now than I used to, and I’m happy that Safari takes the resulting layout changes in stride.

    The one place where it looks wrong is where designers have created GIF text and graphical UI elements in unresizeable text. I have a feeling this is going to change over the coming years as well, towards a de facto standard much closer in spirit to your beautiful new site design.

  4. 20 October 2008

    Paul D. Waite

    I’m totally with you. For about 3 years I’ve been bumping up the text size in my browser on pretty much every web site I visit, every time*. It feels easier on my eyes.

    * I really should switch from Camino to Firefox and install the extension that remembers what font size you switched to for each web site. Or learn to write Objective-C, and make a little fork of Camino.

  5. 20 October 2008

    Paul D. Waite

    Ooh, okay, just thought of a pithy phrase: “Text is there to be read, not looked at.”

    Maybe? Maybe.

  6. 20 October 2008

    Jason Robb

    Thanks for sharing. I hadn’t seen that article by Oliver, yet.

    The book to screen text test was surprising! Cool. Thanks!

  7. 20 October 2008

    Naz

    Nice entry Wilson. I’ve been upping sizes on text for a while now — not by much but heading into 13, 14 and 15px-land. I’m personally much more fond of reading larger text and not having to strain my eyes.

    I’ve also long been a fan of slim content columns — 10-12 words or so for fast scanning and readability. Paired with the large text size, it’s a win-win for me.

    There will still be those that want to cram as much into a screen as possible — more “above the fold” — a quick look at most major news websites reveals as much despite a tendency to have long homepages anyway.

  8. 20 October 2008

    Jose Espinoza

    Interesting post. I’m going to fire up a redesign!

  9. 20 October 2008

    Joshua Clanton

    That’s an excellent point. I’ve been tending toward larger text for a while now (15-16px) for a while now, but it’s good to have some external validation of my instincts.

  10. 20 October 2008

    Tom Dolan

    Great post. Big (normal) type is the new black. Small type blows, an it’s a crutch for all those who don’t have the discipline to organize their page content with care. Rock on.

  11. 20 October 2008

    Jeff Croft

    I’ve also been tending towards larger fonts of late, although not as large as you’ve gone here (more like 13-14px).

    Although I love your recent redesign, I’m not completely convinced that a base size of 16px would work in all contexts. I think it works here in large part because your design feels very much like a poster, and posters are big. Not all designs are going to be so posterlicious. Also, you’re a minimalist, and on this site you’re able to exercise that preference, which is awesome. But, you having worked in journalism, you know that there are other situations where it is simply unavoidable that you have to cram a lot more info onto the screen — and I’m not sure you can do that very well if you’re basing stuff on a body type size this large.

    But, it works great here. Love it. Keep up the great work, my friend!

  12. 20 October 2008

    Jeff Croft

    Also: is this one of those situation where someone makes a point and then you come along, restating their point in a more eloquent and persuasive way, and then everyone only remembers that you said it, not the original guy?

    Because I hate that. :)

    (Teasing you, of course.)

  13. 20 October 2008

    Germán

    You convinced me, that photo of the screen text and the magazine speaks by itself.

    I’ll change my default text size from 14px to 16px.

    Thanks!

  14. 20 October 2008

    Wilson Miner

    Although I love your recent redesign, I’m not completely convinced that a base size of 16px would work in all contexts.

    Absolutely. That’s why I’ve only been able to pull it off here. :)

    To be clear, though I’m really talking about long chunks of text. In practice, I think if you can get long text up to 13-14px, keep the line-length short, and open up the line-length, it’s still a big win.

    I think the NYTimes.com story pages are a good example of the tradeoffs. Obviously they’re not going to make everything huge on their homepage and section fronts, but those are small scannable chunks of text. When it comes to actually reading in long stretches on the story pages, they do a good job of sizing for readability.

    Also: is this one of those situation where someone makes a point and then you come along, restating their point in a more eloquent and persuasive way, and then everyone only remembers that you said it, not the original guy?

    I only do that to you, Jeff. This time I’m pretty sure Oliver said it much better than I did. :)

  15. 21 October 2008

    Dave S.

    Sounds like larger type is a trend, I’ve been finding myself going that way too. (13px-ish) Holding the magazine page up to the monitor really cements the reasoning, it just feels like the right way to go.

    The thing that nags at me about this, though: the printed page doesn’t need UI chrome, navigation, instructions, or richer metadata like tags, comment counts, etc. So if bumping up the body copy results in larger text across the site, the decreased information density on any single screen of a site (screen in the sense of scroll area) is an interesting issue we’re going to have to struggle with. Don’t even get me started on client “above the fold” thinking.

    Maybe that’s a problem, maybe it’s for the better; increased simplicity etc. No real solutions here, just some thinking out loud.

  16. 21 October 2008

    Scott Johnson

    I’m definitely liking the large body text here. But why did you choose to go sans serif for the comments?

    I have been zooming in on some sites to improve readability lately almost without even thinking about it. I’m definitely going to try some larger text in my next design.

  17. 23 October 2008

    Christoph

    On most sites I have to zoom the pages to get a good legibility. I never unterstood why many designers chose font-size 10px or 11px. I think many of them look at a webpage the same way as they look at a sheet op paper. I for myself like a font-size of 15px, but 16px is ok, it is far better then everything beneath 14px.

    By the way, your logo is great!!

  18. 24 October 2008

    Dilip P

    I tried implementing a larger type in my blog but got around to implement it only in certain parts. Nice article to make me think about a redesign.

  19. 26 October 2008

    Alex

    I zoomed out to be able to read this blog.

  20. 30 October 2008

    Karl Fundenberger

    You have inspired my redesign! I hope it’s more flattery than copycat.

  21. 30 October 2008

    Patrick Haney

    That’s a really good point that I’m surprised hasn’t been made before now. Personally, I think your 16px type for body text looks great, and I’m not adverse to larger type on a website as long as everything else seems to scale well with it. Of course, size differs depending on the situation, so this isn’t a good solution for everyone.

  22. 3 November 2008

    Oliver Reichenstein

    @Patrick: I wrote that article about two years ago and I took a lot of beating for it back then. Mainly because of my insolence to use the unspeakable irony to say “standard” to describe it, but also because most people thought that it’s not much more than a pompous assumption (unfortunately, as soon as they focus on a browser window, most people lose their humor).

    @Wilson: Don’t forget to mention that you get in devil’s kitchen if you stick to the 100%/16px/1em body text rule: Body text defines column width and line height and, in consequence, most of the article grid. Given that the article page is usually where you (supposedly: should) begin your designs, the body text size structures half of the entire site. If you design newspapers with a skyscraper (or even worse: nasty German hockey stick) ads—you’re in trouble.

    @all: I am not quite sure, but for some weird stereometric/perspective reasons, screen text allows us to use wider columns than screen text—or if it’s just the slightly higher line height that can make (or should I say: forces?) us to go a little bit wider than on paper.

  23. 8 November 2008

    Radoslav Kostadinov

    Font size of 16px seems to be very big, especially for content rich websites. 16px Georgia is actually smaller than 16px Verdana. A longer article will be scrolled much more, unless you are having a monitor supporting a resolution of 1920x1440. You can’t assume, all of your readers have one. At 800x600, I can only read one mid-length comment of your page at a time.

  24. 12 November 2008

    plrang

    From some time my H fonts are growing too, at selected sites i create. My own site always stayed abandoned but at least i started to do something on and.. ofcourse just with big fonts and fonts only as an experiment.. It’s not anything special, but the trend got me.

  25. 13 November 2008

    Rob Morris

    Great article, Wilson. I’m slowly leaning towards this way of thinking myself having recently set a P.B with 14px on my own redesign. I think with growing screen resolutions (and screens for that matter), there’s just more horizontal room to play with than in the past. So from a design perspective, the text naturally will grow a little too to accommodate better fitting column widths etc.

    I should also say, speaking from personal experience, you never need an excuse to use massive bold Helvetica titles for your blog. ;)

  26. 30 November 2008

    Burak

    Really nice article.

  27. 2 December 2008

    Christian Dalsvaag

    I really enjoyed this post, and I also enjoyed reading the comments.

    There are a lot of great points here, and to be honest - I want to do a re-design aswell, with large typefaces.

    I think everything looks a lot more “simple” and thereby more beautiful.

    Thanks for a great post! And I’ll check out your reference to 100E2R - seems like an interesting read.

  28. 4 December 2008

    Nick

    I love this post, and the textbook comparison.

    I figured out the joy of large text about a year ago, but up until now haven’t been able to successfully execute it without looking silly.

    My new design will be up in a few days and pretty much shows how text should be used (in terms of size).

  29. 4 December 2008

    Tau

    I just love the big fonts! :D :O)

  30. 5 December 2008

    Wardell

    Great food for thought! One thing I noticed in your quote of Oliver it was stated that “16pt is as big as 11pt in print” but in your experiment you stated you used a 16px screen size vs 11pt print size, I think it’s important to note pt and px are not the same.

  31. 5 December 2008

    joshua

    Great post. And hadn’t seen Oliver’s article until now. Very good stuff.

  32. 8 December 2008

    Farid Hadi

    Nice post and great way of illustrating the point with the magazine/monitor image.

    I once read an article about web design and it was written that using a 14px or even 12px font size was for amateurs and that good designers would use 10px to 11px. I found that a bit weird as I would say it all depends on the project itself and the target audience.

    I personally use 14px on my blog, which now is being redesigned and I’ll surely consider using 16px.

  33. 10 December 2008

    devolute

    I totally agree with you. Certainly in this case. Everything looks so clean! I think it’s harder to make everything look good when you’re using a larger font, so nice work.

    However, sometimes big-text just seems like an afterthought and looks a bit, ugh horrible. Take the latest gizmodo.com ‘redesign’ for example. They just knocked the body text size up a bit and now it looks awful.

  34. 11 December 2008

    Ben Reid

    I think having a larger text size seems to be coming a trend. A lot of blogs, such as this one are now using larger type.

    I’m all for it! Though only using 11px myself.

  35. 12 December 2008

    Ishrath

    This makes a lot of sense and I am seriously thinking of designing my blog on these lines. Readability is crucial, especially when I have so many senior friends. Thanks for sharing/reiterating this oft-ignored aspect of web-reading. God Bless You!

  36. 15 December 2008

    Bart van der Griendt

    Ah, my typographical heart warms at your site, Wilson. Things should be as simple as possible, and not simpler. Everywhere I browse I feel the underlying grid, the thorough way in which the information is composed, your meticulous attention to detail. My sincerest compliments.

    But - isn’t there always a but? - I cannot say that I like the tight spacing of Helvetica. I see it a lot these days. Of course, it has it’s esthetic appeal. But on a website that goes out of it’s way to optimize readability, I find it a bad choice. Especially since research shows that ample letterspace is such a defining factor in readability. (see for example: http://fontfeed.com/archives/nyu-researchers-discover-def… )

    Constructive criticism - the overall effort is one I’ll use as an example for time to come.

    Bart

  37. 16 December 2008

    Leon Paternoster

    The 100e2r standard was hugely influential for me as well, so much so that all but one of the sites I’ve designed since reading iA’s article has had 100%/1em body copy.

    It really is a case of getting used to it. Once you do, traditionally scaled sites become irksome, and you end up hitting ctrl+ all the time.

    Having said that, I’ve had a few comments about the readability of sites with 16px body copy—some beyond “it looks clunky” (which is, in itself, a response that has to be taken into account). It’s about how font family, measure, leading and paragraph length all relate to each other. I’m finding that sites with lots of text work best at 14px font size, 20px leading (or 0.875em/1.4em if you’re using relative units) and a measure of around 20 words, rather than the 10-15 iA recommend.

    Georgia at 16px gets a far more positive response than helvetica/arial. Maybe that’s why iA switched a couple of years back.

    With you on bold helvetica headings: not to be argued with!

  38. 18 December 2008

    Ronan

    I’m not sure about the theory. On the one hand your layouts are beautiful and legible. On the other hand when you compare it to print sizes you fail to take into account the fact that most magazines are a much smaller size - usually 9 or 10 pt. Also, type sizing by pixels is extra tricky with Microsoft using significantly different pixel dimensions to Mac as PCs tend to have a lower actual ppi number.

  39. 18 December 2008

    Matt Balara

    I read Oliver’s article back when it came out, and it changed the way I think about screen type. As Jeff said, there are places where the 100%E2R idea works better than others, but no matter where it pops up, whenever I run into 16px copy I always feels like I can suddenly breathe more freely.

    Beautiful relaunch.

  40. 19 December 2008

    Jason Newlin

    Everything makes sense now. I have struggled with the 16pt browser thing for so long, kept asking, why so big? And you have brought it all together. Really good explanation, the photo of the book next to the monitor was what did it for me - genius. I want to go show that pic to everyone I know. I wish I would have read this article 2 months ago when you wrote it. Thanks for the great info.

  41. 19 December 2008

    Irene Hammond

    As a person reaching the age of reading glasses, the larger font is easier to read for me. If a font is too small, or to frilly and harder to read, I don’t.

  42. 19 December 2008

    Charles Adler

    Wilson. Totally brilliant. Brilliantly simple perhaps? I think it’s hard for many of us to take a step back and question the norms we’ve all either participated in creating, or have accepted as “the standard of good design”.

    With that said, the articles are FAR easier to read, and will influence future design work on my end.

    And lastly, I think your point about using larger type when appropriate, is well, appropriate. Not always.

    Thanks for sharing your insights!

  43. 1 January 2009

    vinay

    nice redesign ! I totally agree with you.

  44. 2 January 2009

    Jesse Andrews

    The only bad thing about your post is that I now get angry when I visit a site that uses small fonts! Which is even worse when the site is one you built…

  45. 4 January 2009

    Eric Anderson

    This combination of font sizes produces one of the most readable I have seen. The approach seems so obvious - thanks for the write up. Bravo, Props, Kudos - can I get a what-what!

  46. 5 January 2009

    Vladimir Carrer

    We are all in the constant search of better readability: We play around with color, line height, letter and word spacing but we always use 12px. It was so simple, increase the size! Thanks, great article.

  47. 14 January 2009

    Michael Plant

    Great Story! I am totally with both of you… the hard part is convincing the client.

    Then when I thought about it, I realized, usually they are the one’s who never provide enough; well-written content. So that will be the answer, “Then I need more content!”

    Good call guys, I am totally going that route on my redo of my new “personal image” site. I especially like the bit about “this time I tried scaling the content up to fit the space, instead of adding content to fit the space”

    Thanks for the article, keep it up!

  48. 28 January 2009

    Bill

    After years of wondering why browsers defaulted to 16pt text sizes I’m starting to be convinced that long text really is significantly more readable on screen at precisely that size.

    This should be 16px, no?

  49. 5 February 2009

    Michael S. Apeles

    haha. i’m also taking on redesigning my site so it would have bigger font sizes.

    just now, i’m getting negative feedback that they’re not used to big font sizes and, get this, they’re even squinting to see the big text clearly. hahaha. should it be the other way around? hehe.

    it just goes to show most people where i live are used to seeing small fonts, that they tend to reject it when i use big ones. haha.

    to think that people are used to me developing sites with ridiculous small fonts in them that old people would like to make me increase them. now that i increased it to big proportions, still they complain that they’re finding a hard time looking.

  50. 14 February 2009

    Jos

    It’s all about balance I suppose. Big column head fonts align with relatively big body text appearance. In more general terms: Use of big fonts allows for a good clean information hierarchy.

  51. 17 March 2009

    Brian Kalwat

    Umm. This is STUNNING! Beautiful layout you’ve got here, and you’re spot on - it’s SO much easier to read. Notes taken! Thanks!

  52. 31 March 2009

    Edward Margallo

    I love the layout, and the type size and weight looks awesome. The grid is working very nice too.

  53. 15 April 2009

    D. Moore

    I must admit, I’ve fallen a bit to much for larger fonts.