This is an important issue to consider, but talking about "pixels" alone doesn't get us far in this context.<p>For one thing, different fonts have different design characteristics. In particular, the x-height of one sensible body font at a nominal 16px could easily be 50% more than the x-height of another. Sadly, while CSS lets us specify a stack of fonts to try, it doesn't yet let us specify a different size to go with each one so we can achieve a similar optical result. (CSS3's font-size-adjust might be intended to help here, but seems overcomplicated and underpowered to me.)<p>For another thing, these days pixel densities can vary by at least a factor of 3 between devices. The latest iThings sometimes do better than the 300dpi that used to the be benchmark for a laser printer. For a classic CRT or cheap and cheerful TFT, something more like 96dpi is common. At least you can detect this to some extent in CSS, because the new devices with very high densities also tend to support media queries so you can present larger text (in pixel terms) and higher resolution graphics accordingly.<p>If we're going to improve the way we present text (and graphics) on the web for people whose vision isn't perfect, it's going to take a much more flexible styling system for the web and probably a lot more real world experience of what works and what doesn't as well. As much as I respect people taking a stand on behalf of those who can't see as well as some, I'm not sure advocating a fairly arbitrary 16px guideline is helping.
I agree completely with this article. As I've gotten older (now 43) I have had more and more trouble reading web sites. In fact, I've noticed lately that I don't even try on some sites that have "small" fonts, I just close the tab. There are some sites that I really like and I generally depend on my browser to help me out. Chrome has a good habit of remembering my page zoom on a particular site so I don't even notice the font problem on subsequent visits.
On the surface the statements seems to make sense and the arguments are well put across, but unless someone actually A/B tests it and proves that it makes a difference to readership, or conversions (or whatever your goal is) then it's currently just unsubstantiated theory.
I find myself zooming nearly 80% of the sites I visit now, including Google Docs. And I'm always a little bummed that Google's Spreadsheets give me this warning:<p>"Your browser's current zoom setting is not fully supported. Please reset to default zoom."
Working closely with designers and observing client requests over the past decade or so, I've seen another pattern that also leads to the "small type" problem: Client requests to get as much above the fold as possible. Granted, the majority of the projects I've worked on in the past four or five years have been very large organizations. When client committees make decisions, it's much harder to teach them or even steer them in the right direction.<p>I'm seeing a growing number of comments here that read like "I can..." or "I prefer..." The article clearly states this is a decision arrived at by considering the end-user. It's all relative; all sites don't need to be that way. You should be user-testing every project with your target market anyways, and if you were and it was a problem you'd hear about it. I know I have, many times.<p>Another great article on this subject is one "Relative Readability" by Wilson Miner:<p><a href="http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/" rel="nofollow">http://www.wilsonminer.com/posts/2008/oct/20/relative-readab...</a>
I'm 37 and I zoom almost every website I use - I also like to be distant enough from the screen. I also very often use ctrl+A to have white text on blue background (I know, most designers will hate me at this point - but keep in mind that I usually sit in front of a screen 12 hours a day, 10 hours a day on weekends...).<p>Last thing, I just <i>hate</i> sites that use facebook comments - eg techcrunch - because fonts don't scale there. As a matter of fact, I never read comments on those websites.
I'm all for it. I zoom 70% of websites I visit, and I'm only 20 and don't have particularly bad sight -- I'm able to read unzoomed websites, but it's too wearisome.
Most web sites break down when fonts are upscaled. Sad but true. I configured my mother's firefox to do that, it works, but most of the web doesn't look good.<p>Which is sad. My eyes aren't very good too and they prefer bigger fonts. In fact, most people have vision problems those days.
"At age 40, only half the light gets through to the retina as it did at age 20."<p>Well, at least now I know why I'm constantly having to turn the fucking lights on when reading something on paper - that seemed like a new development. I'm 42.
Interestingly the browser defaults have changed over time.<p>When we used to use 640x480 and 800x600 monitors, the browser defaults - for something like a h1 took up most of the screen. That's half the reason designers (before the advent of CSS) didn't use semantic markup. They'd just use bold to mark up a heading at the body text size. We had pixel images used for text in navigation at 10px. With something like 12px for body text (and tables for layouts.)<p>There were also radical inconsistencies between the browsers, with their text size rendering defaults.<p>I'm also pretty sure that the 16px default font size was a late edition. Either way a bit of history would help the article.<p>Plus, as many have pointed out, the fact that 16px appears differently depending on screen resolution, distance from the display is an important point that should have been stated.<p>The article may have been better arguing that making a website more readable is better for users and sustained readership.
I think I need to put together a form email, or possibly a webpage to link to, to send to web designers who pontificate about web design and reaching your audience---on a webpage that <i>doesn't fit</i> in my window AND has <i>disabled my scrollbar</i>. Meaning I literally cannot read it without sending it off to Readability or otherwise adjusting my browsing setup.<p>This fault is honestly an order of magnitude more common among webpages that are specifically discussing user-oriented design. Argh.
Am I missing something? The physical size of a 16px font will surely vary based on resolution and screen size.<p>So claims such as '16px is the same as most books' are clearly nonsense.
I generally agree with his argument, but I don't appreciate the way some of the examples were framed. They were a bit misleading.<p>Specifically the paragraph where he inserts smaller fonts into the middle of his paragraph, hoping to shock you with the difference in size.<p>Here is a screenshot of that paragraph with the body text actually set to 16px: <a href="http://i.imgur.com/mcdNI.png" rel="nofollow">http://i.imgur.com/mcdNI.png</a><p>10px is still tiny, but 14px doesn't appear nearly so 'weaksauce' any more.<p>As I said, I DO like larger font sizes and think he has a good point. But misleading comparisons like this bug me and I felt I had to set it straight.
If you ask a variety of people how readable they find a typical web site, you'll receive almost uniform responses that many (or most) pages are difficult to read. Font size is a factor but there are many more factors, which I outline here:<p><a href="http://www.filterjoe.com/2009/03/25/filters-for-reading-on-the-web/" rel="nofollow">http://www.filterjoe.com/2009/03/25/filters-for-reading-on-t...</a><p>and suggest solutions for web design here:<p><a href="http://www.filterjoe.com/2009/03/23/site-design-for-reading/" rel="nofollow">http://www.filterjoe.com/2009/03/23/site-design-for-reading/</a><p>A main theme of my site is how to read without distraction on the web. As has come up a number of times on Hacker News, the tools readable and readability are a terrific way to reformat web pages in order to make them more readable:<p><a href="http://www.filterjoe.com/2011/04/11/web-page-reformatting-services-readable-and-readability/" rel="nofollow">http://www.filterjoe.com/2011/04/11/web-page-reformatting-se...</a><p>One last trick is to arrange a high pixel density monitor vertically and place it far away from your eyes. You can calculate the distance needed to attain the equivalent of a retina display:<p><a href="http://www.filterjoe.com/2011/02/26/the-best-monitor-setup-to-reduce-eye-fatigue-and-distraction/" rel="nofollow">http://www.filterjoe.com/2011/02/26/the-best-monitor-setup-t...</a><p>Whether this makes a difference in terms of readership, conversions, etc. I have no idea. But the proliferation of tools in the past few years to help people read web content suggests that a lot of web users are struggling with reading web pages.
The biggest failing I see this is argument is hierarchy. Sure, 16 point Georgia looks sexy as hell. If you have a text heavy website with little navigation, I'd definately recommend it. But in real world design situations, it's a mess. Even the Information Architects site looks flat. There's no easy way to guide the eyes because everything is ultra readable. There's no structure. It's an idealistic shortcut to readability.<p>For me, the most pleasurable reading experience I can think of is Instapaper on an iPad. What's the default size on that? I could be wrong, but I doubt it's anything larger than 14-16.<p>Besides, is it really a "costly mistake"? Is Facebook is failure because the text is small? Is Apple's website is design disaster? Both sites (and many more) feature a mix of large and small text with modest sized body. They're navigation is thought out and structured.<p>The 16 pixels argument encourages the opposite of that.
I installed the <a href="https://addons.mozilla.org/en-US/firefox/addon/stylish/" rel="nofollow">https://addons.mozilla.org/en-US/firefox/addon/stylish/</a> addon for firefox and have set news.yc to use the following stylesheet:<p>@namespace url(<a href="http://www.w3.org/1999/xhtml" rel="nofollow">http://www.w3.org/1999/xhtml</a>);<p>@-moz-document domain("news.ycombinator.com") {<p><pre><code> .title{
font-size: 16px !important;
padding: 0.5em !important;
}
.subtext{
font-size: .8em !important;
padding-left: 0.5em !important;
}
.comment {
font-size: 16px !important;
}
.comhead{
font-size: 1em !important;
}
.pagetop{
font-size: 16px !important;
}
</code></pre>
}<p>I mixed px and em as I tried different settings, but just stopped when I found something I liked.
Interesting, but at that size of font used on that webpage I read at half speed and I'm 37. For the hacker news site I can read a full line in 3 focus movements. It's much easier to switch focus to the right than to find the next row in text. Not convinced but YMMV.
I have been reading HN zoomed for quite a while now. I also code with larger than the default fonts because it's less wear on my eyes and I'm not 40 yet. I agree with what's being said but it would be helpful to show some study or research or A/B testing.
Some interesting facts in the article, however, saying a font is hard to read because it's too small is a bit of a loose statement. Font family, color, line-height and width (anything over 500px wide is a strain) all contribute to the readability of text. So a pink font at 16px stretching the full width of the screen (let's say 1400px) with default line-height might be easier to read if it were 13px, dark grey, 450px wide with 20px line-height.<p>The article doesn't target a specific type of site. Article sites or news sites rely on readability far more than startups. The article seems to suggest that you NEED copy to guide users. This statement is incorrect. You can guide users with whitespace, color, images, buttons, hover states etc.<p>If you have a startup landing page with lots of copy on it, regardless of font-size...you've already failed.
Maybe I'm just different, but I like smaller font sizes. It makes it easier to take in more text quicker and do it with less scrolling. I am 26 though. I'll probably change that opinion when I'm 40. I think having the browser zoomed out one level looks best to me on some sites.
He gives some interesting data points, but ultimately fails to prove the headline that "anything less is a costly mistake". In order to do that, he'd have to take a sample of websites and show a correlation between copy size and profitability.
Personally I'm a fan of bigger font sizes. Interesting though that Facebook actually reduced their body copy down to 11px, and apparently they are doing pretty well ;)
I thought the article was impossible to read at 16 px - just not enough density - too few words per line and too few lines per screen to read comfortably. I'm 46.
I agree! Have been doing this on my sites for a while now. Another thing to note is that when the font size is small, the number of words that fit into one line increases. It's easier to read lines with less words (which is why newspapers use columns of short width) and using larger fonts in the same horizontal space achieves that.
I zoom most of the sites I read mostly due to the number of characters per line. When it is greater than 120-140, I can't focus on the line I'm reading.<p>And that is by the way another reason I love fixed size layouts: you can zoom them however you like.
It's just as easy to hit [ CTRL + ] as it is to hit backspace. If you are worried about your users' ability or knowledge, then you can simply include a link that says "adjust text size up / down" and let them click that to get the desired effect. Browsers allow users to customize the font for a reason. It's impossible to claim a default size that everyone is going to like.