16 Pixels: For Body Copy. Anything Less Is A Costly Mistake

Advertisement

Please note that this article has another layout1 that cannot be displayed here. – Ed.

I know what you’re thinking. “Did he just say 16 pixels? For body copy? Obnoxiously big! 12 pixels is ideal for most websites.”

I’d like to persuade you otherwise.

As usability expert Oliver Reichenstein says in “The 100% Easy-2-Read Standard2”:

[16 pixels] is not big. It’s the text size browsers display by default. It’s the text size browsers were intended to display… It looks big at first, but once you use it you quickly realize why all browser makers chose this as the default text size.

In this article, I’ll explain why 16 pixels should generally be the minimum size for body copy in modern Web design. If I don’t change your mind, perhaps you could chip in at the end and let me know why.

You see, in most cases, if you’re building websites with the font size set between 10 and 15 pixels, you are costing your clients money. And I aim to prove it.

Readership = Revenue

If you’re building a website for someone — even yourself — chances are its purpose is to make money.

Perhaps it’s to sell a product directly, or to offer a service, or just to generate leads. Whatever the case, it’s a business asset, and ultimately it has to generate a return on investment. It has to fulfill a revenue goal.

So, every element should be designed to achieve that goal. Including the copy. Especially the copy — because the copy is what convinces visitors to do whatever it is you want them to do on the website.

Think about it. If you don’t explain what people should do, or why they should do it, then they certainly won’t. And the only way to tell them is with text. And text means reading.

Important Facts About Reading

There are some particular findings that are pivotal to issues such as readership and readability and comprehension, which is really what body copy is all about. If people won’t read it, or if they can’t read it or understand it, then what’s the point of having it?

  1. At age 40, only half the light3 gets through to the retina as it did at age 20. For 60-year-olds, it’s just 20%.
  2. Nearly 9%4 of Americans are visually impaired, meaning their vision cannot be completely corrected with lenses.
  3. The distance at which we can read letters is a common measure5 of both legibility and reading speed. The greater the distance, the higher the overall legibility and comprehension are considered to be. The biggest factor that determines how far this distance can increase is font size. Seen any billboards lately?
  4. Most people, when sitting comfortably, are about 20 to 23 inches6 from their computer screens. In fact, 28 inches is the recommended distance, because this is where vergence7 is sufficiently low to avoid eye strain. This is much further than the distance at which we read printed text — most people do not hold magazines at arm’s length!
  5. 16-pixel text on a screen is about the same size8 as text printed in a book or magazine; this is accounting for reading distance. Because we read books pretty close — often only a few inches away — they are typically set at about 10 points. If you were to read them at arm’s length, you’d want at least 12 points, which is about the same size as 16 pixels on most screens:
    16-pixel text displayed on a 24-inch screen, next to 12-point text printed on paper.9
    16-pixel text displayed on a 24-inch screen, next to 12-point text printed on paper. (Large preview10)

    16-pixel text displayed on a 15.4-inch screen, next to 12-point text printed on paper.11
    16-pixel text displayed on a 15.4-inch screen, next to 12-point text printed on paper. (Large preview12)
  6. In a 2005 survey of Web design problems, bad fonts got nearly twice as many votes13 as the next contender, with two-thirds of voters complaining about small font sizes. If you think the situation has improved since then, think again. I randomly sampled some new blog designs on SiteInspire14 and found that the average font size for body copy was a measly 12 pixels. Some designs even used a minuscule 10 pixels. And none were over a weaksauce 14 pixels. Similarly, if you randomly sampled offerings on the popular Elegant Themes15 and ThemeForest16, you’d find that every single theme sets the main content at just 12 or 13 pixels.

Fact: Most Web Users Hate The “Normal” Font Size

With this research in mind, let me ask: how many of your client’s readers are around 40? Because they have to work twice as hard to read as 20-year-olds. If they’re closer to 60, they have to work four times as hard.

Almost 1 in 10 of your readers also has trouble with their eyes. Of the rest who don’t, most will still have to strain to read text smaller than 16 pixels, even if they don’t notice that they’re doing it. (How often do you find yourself hunching over the screen?) And that’s if they’re leaning close, which they would likely find awkward and unergonomic. Their natural sitting position will be at least an arm’s length from the screen!

In short, for the average Web user, reading most websites is not unlike taking an eye exam.

The harder your text is to read, the less of it will get read — and the less of what is read will be understood. 10 pixels is essentially pointless. 12 pixels is still much too small for most readers. Even 15 pixels will turn off visitors who might have otherwise converted.

Thus, we can conclude that if you want the maximum number of people to read, understand and act on your text, then you need to set it at a minimum size of 16 pixels.

“But Users Can Zoom”

If you code it right, people with vision issues can always use the Option and + keys to enlarge the text.

Thus spake one Web designer in a discussion I had on this very issue.

Not so. The users who will most need to adjust their settings usually don’t know how17. And the users who do… well, they’ll probably just take the easier path by hitting the “Back” button. It goes without saying that we shouldn’t take our clients’ money and then design websites for them that will make their visitors uncomfortable. Our personal tastes are not more important than best practices in usability.

Web design is not about what designers like. It is about what users want and what will best achieve our client’s goals.

If the objective of a client’s website is to achieve some revenue goal, then our role as designers is to come up with something to achieve that goal as effectively as possible. Picking a font size that we know most users will struggle to read, a font size that will reduce readership, a font size that will ultimately cost conversions, is not good choice.

In print, type as small as 8 points is an ideal compromise between readability and cost, because you have to pay for every millimeter you use. On the Web, you pay nothing for using more space — provided that readers find your copy compelling, of course. What you do pay for is readers finding your compelling copy so hard to read that they click away instead of converting.

So, the question is, are you prepared to cost your clients money for the sake of what looks good to you?

16 Pixels Is Not Big

Our tastes and aesthetic preferences as designers are a lot more malleable than we think. What “looks good” to us is largely the result of what we’ve seen other designers doing and what we’ve come to expect.

Unfortunately, most of the websites we’ve seen are packed with tiny copy, because once upon a time screens were tiny, and so designers matched them with tiny text — but no one got out of the habit.

This article is set in TeX Gyre Schola at 19 pixels. I picked this size because 16 to 18 pixels looked too small to me: as I sat back comfortably in my chair, 28 inches from the screen, I found myself squinting to see it. If I’d used Georgia or Verdana, 16 pixels probably would have been fine: they were designed with a larger x-height and so display better on screen.

Now, check out the footer just below and see whether you don’t hunch forward automatically, screw up your eyes and furrow your brow. That’s 12 pixels for ya. And if you still disagree after that, tell me why in the comments.

Footnotes

  1. 1 http://web.archive.org/web/20130104231015/http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake
  2. 2 http://www.informationarchitects.jp/en/100e2r/
  3. 3 http://www.whatmakesthemclick.net/2011/06/03/first-podcast-kevin-larson-2/
  4. 4 http://www.who.int/blindness/table/en/index.html
  5. 5 http://www.whatmakesthemclick.net/2011/06/03/first-podcast-kevin-larson-2/
  6. 6 http://www.eyefatigue.com/cvs-computer-glasses.asp
  7. 7 http://en.wikipedia.org/wiki/Vergence
  8. 8 http://www.informationarchitects.jp/en/100e2r/
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2011/10/print-v-screen-cropped.jpg
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2011/10/print-v-screen-cropped.jpg
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2011/10/print-v-laptop-cropped.jpg
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2011/10/print-v-laptop-cropped.jpg
  13. 13 http://www.useit.com/alertbox/designmistakes.html
  14. 14 http://siteinspire.com/showcase/category/type/blog
  15. 15 http://elegantthemes.com/
  16. 16 http://themeforest.net/
  17. 17 http://www.useit.com/alertbox/guesses-data.html

↑ Back to top Tweet itShare on Facebook

Bnonn is the author of a free video course on the secrets of creating websites that capture readers and turn them into customers. Known in the boroughs as the Information Highwayman, he helps small businesses sell more online by improving both their copy and design. When he’s not knee-deep in the guts of someone’s homepage, he is teaching his kids about steampunk, Nathan Fillion, and how to grapple a zombie without getting bit. (Also you can follow him on Twitter.)

Advertising
  1. 1

    These drop shadows are killing me.

    1
  2. 102

    Looks like you hit a nerve on designers! The “funny” looking titles were not necessary nice but it was nice having something visually different for once..
    and yes copy should be very readable.. clients actually ask for it!

    1
  3. 203

    Interesting.

    However, I think you are leaving out a lot of factors that make this suggestion questionable.

    (too many to go into)

    So it goes…

    -dp

    1
  4. 304

    John Surdakowski

    October 7, 2011 9:30 am

    We should NOT have a set font size to use. Different projects call for different font sizes. Maybe on a blog, 16px will always work. But certain web sites may require smaller fonts. But I do agree with you that 16px are easier to read. And I will try to keep that into consideration moving forward.

    1
  5. 405

    Reading this article was a strain on my eyes, I’m on a 21.5″ monitor and I had to zoom out to be able to finish the article. Doubt I’ll be making the switch

    2
  6. 506

    “#5) 16-pixel text on a screen is about the same size as text printed in a book or magazine;”

    Wrong, wrong, wrong!!! Screen text size compared to print has absolutely nothing to do with the specified font-size in pixels, and everything to do with the size and resolution of your monitor. That 16px is going to compare very differently to the book if I hold it up next to an iPhone, a netbook, or my HDTV.

    3
  7. 607

    I’m no fan of small fonts, but this article is merely the author’s opinion that less than 16px is costing you money. There is no data to back this up. There is some ancillary data, suggesting that users don’t like small fonts, but that doesn’t correlate into lost revenue. Unless the author can cite a specific A/B test that shows decreased revenue, this article is not very accurate.

    Again, I agree that small fonts are often bad. I just don’t think it’s as cut and dry as the author states. There’s more to readability than font-size. One must consider the face, line spacing, use of ligatures, etc. Size is merely one tool in the typographer’s toolbox.

    7
    • 708

      D Bnonn Tennant, Information Highwayman

      October 7, 2011 2:23 pm

      Howdy Justin, that’s a fair comment as far as it goes. Unfortunately, I don’t know of any A/B studies which have tested for font size specifically, and I haven’t had the opportunity to run any of my own.

      However, if it can be shown that reduced font size = reduced readability, and reduced readability = reduced readership, then logically reduced font size = reduced readership.

      Since readership is a necessary condition for conversion, in what sense have I not proved my point?

      I may not have employed the kind of proof you’d prefer, but the logic is still sound.

      0
  8. 809

    font-size should be based on screen-resolution and devices (such as laptops vs. mobiles). I can agree that a larger font is better to read, another thing they could do for instance is adjusting the scrollbar/mousewheel speed based upon the line-height that was declared in the css. So overall a nice statement that lacks at a few points….next topic should be “clean css w3c-coding” and hopefully this page wouldn’t show 557 css errors. ;-P

    And why if 16px for body text should be the golden standard is SM’s navigation only a mere “horrible” 13px?

    2
  9. 910

    good points – although think the argument is flawed by the fact that most people do sit with their face squashed against the screen. 28 inches from the computer is straight through my back wall….

    0
  10. 1011

    This article changed my life. Definitely taking your advice! Thanks!

    -2
  11. 1112

    You make some excellent points. But doesn’t a larger font-size discourage users on lengthy articles?

    1
    • 1213

      D Bnonn Tennant, Information Highwayman

      October 7, 2011 2:24 pm

      Hey Spyros—not as far as I know :) Why do you think it would?

      0
      • 1314

        I’m 48 and the 19px you used discouraged me! It made the text “blacker”, the lines shorter in word length and the article feel longer.

        Ironically, I found it much more readable at 16px. :)

        1
  12. 1415

    Some users can zoom. Some cannot. But none of them can change a low-contrast font to black. (Or is there a way I don’t know about?) I find the low-contrast trend to be most annoying of all. Want something different? Fine. But use a color we can read.

    0
    • 1516

      Well, you can change it if you really want. You can have a user stylesheet to override the page styles. You can even edit the css in something like FireBug. But generally you are right. Changing text color is a pain, and no one will do it.

      0
    • 1617

      D Bnonn Tennant, Information Highwayman

      October 7, 2011 2:26 pm

      Hey Celeste, are you referring to the font color I used here? I had thought #444 was generally accepted as the happy medium between too much contrast for long pieces (#000; hard on the eyes), and too little.

      Admittedly I have no research to back this up!

      Do you find #444 to be insufficient contrast?

      0
      • 1718

        Actually, yes, I found it very difficult. However, I think YMMV depending on the monitor. Yesterday I was reading this at work and found it difficult to read, but my home laptop renders it better.

        0
  13. 1819

    I have to say I find myself agreeing with you. If you’d asked me before reading this, what is the minimum font size you should use, I would have said 14px – but my reasoning for that would be identical to what you’ve written.

    I am frequently coming up against people who insist they don’t want the text on their site any larger than 12px as it means most people have to scroll. I’ve never met anyone with an aversion to scrolling.

    Great article, thanks.

    0
  14. 1920

    I still completely disagree with this whole article. I’m 41 years old and yes I do wear contacts but I have absolutely no problem reading font on a computer monitor that is set at 12 pixels. None. I had no problem reading the footer text way up above. I did not get closer to the screen nor squint nor anything. It was just nice and easy reading.

    I also disagree because bigger fonts means you take up more room on the screen. Think about that for a second. No you do not have to pay for using more room like in the print world but it does mean something else. The more room you take up in a web page, the more the user will have to scroll to continue reading. I don’t know about anybody else but I was taught that users don’t like to scroll either. I was taught that the less you make a user scroll to read your website the better. I was taught that if users have to scroll a lot for your website that also can make them simply leave your website for a competitors that doesn’t make them scroll (or at least scroll so much).

    I’ve been a web developer for 6 years and in that time I have not once heard a user complain because a websites font that was set at 12 pixels is too small to read. Heck, even my mother who is 64 years old and wears some thick glasses doesn’t complain about the small text on websites and she also uses a 30 inch screen to surf the web.

    Then you’ve also got the problem of mobile devices with much much smaller screen real estate. If you design your website with a minimum of 16 pixel font and you did responsive web design so that your website can cater to the smaller screens on mobile devices, then with the bigger font you are forcing your sites users to scroll and scroll and scroll. I know that if I was a user and I had a mobile device and I was trying to read an article or do something on a website that had their font set to 16 pixels or larger and I was forced to continue scrolling, I would definitely leave that site and find some other site.

    2
    • 2021

      D Bnonn Tennant, Information Highwayman

      October 7, 2011 2:29 pm

      Sean: are you basing your disagreement on anecdotal evidence and a self-conducted study with a sample size of 1?

      That seems strange.

      As regards being taught that users don’t like to scroll, perhaps you were taught that back in 1996, when it was still true. But since about 1997, it has been universally false. See http://www.useit.com/alertbox/scrolling-attention.html.

      Kind regards,
      Bnonn

      -2
    • 2122

      Well I haven’t heard about a complaint about using smaller fonts either, but since I started my new blog at a ~16px font size, I’ve gotten a lot of comments about how easy it was to read.

      So I agree with this article.

      0
  15. 2223

    “On the Web, you pay nothing for using more space ” -um not exactly… especially in an ever increasing mobile web consumption market which isn’t even considered in this article.

    1
  16. 2324

    Not to be harsh, but with the grabby article title I also half expected to see some sales statistics to back up the claims… not just a general “older people don’t see so well” theme.

    1
  17. 2425

    It’s ironic that this article shows up on my iPhone with a text size that is hard to read.

    1
  18. 2526

    …This article is weak.

    You can’t prove that 16pt performs better with just theory.

    Spending money on testing it. That is the ONLY way you can prove it.

    2
    • 2627

      D Bnonn Tennant, Information Highwayman

      October 7, 2011 2:31 pm

      Mr Green, I haven’t just referenced theory. I’ve referenced plenty of facts.

      Of course, if you know of any studies that have been done on font size and sales, I’d love to see them.

      Failing that, unfortunately we have to go with what we know affects readership, and how we know readership affects conversions, and draw a logical connection between them.

      -1
      • 2728

        As a performance marketer I find these assumptions hard to swallow.

        Is it possible that 16 px maybe may have an adverse effect for clients with a young demographic that do not have these sight problems?

        If I assumed things like these, I would be broke.

        I will run a study on font size and sales and post it on my blog.

        0
  19. 3031

    I agree 100% with your points. As you also mentioned, it depends on what font you’re using since some fonts have higher x-heights.

    I believe that most importantly it depends on the content you’re reading. Reading this relatively long post, the font size made me sit back and read comfortably. I tend to use Readability on other sites as this gets rid of all the extra stuff, focuses on typography and gives you the option to resize the font to your own taste which I’ve set the default to something around the same size of this article.

    However having short paragraphs, on say a homepage is a different story. Readers don’t need to focus on the content but rather skim through it and continue to navigate through the site or reach a call to action. Using a smaller font makes more room for the other important elements on the page, which have higher priority and function.

    -1
  20. 3132

    “What ‘looks good’ to us is largely the result of what we’ve seen other designers doing and what we’ve come to expect.”

    …and yet it’s important that our websites “look good” to customers as well. What’s just as likely to cause a user to hit the “back” button is a site that looks novice, which large font sizes tend to do. It’s not just other designers who are used to things the way they are.

    3
  21. 3233

    Smashing Magazine has text of 1em… which equals 12px for me. They use 0.75em for the body but the posts are 1em.

    Good article, but whatever happened to the whole “design in em” movement? I like to use ems so the user can determine this 12px or 16px argument. If they don’t know how to change the size, leave at 1em or 100% because that’s what they’re used to (by default).

    1
  22. 3334

    I think the comment font size is perfect.

    4
  23. 3435

    Hell, why stop there? Let’s catch all the people still with 640×480 screens and make all our sites fit that. Or, for that matter, let’s make all our pages greyscale so that we can pick up all the color blind users too. Geesh.

    Folks, eventually you have to just cut the corner. The majority of websites out there are 12 and 13px. I’ve done websites for years and my clients and myself have never reported a single incident of users saying they can’t read the sites. Those who have vision problems learn the keyboard shortcuts and get used to this. Now, for a blog article or sales copy, do I think it would benefit if the base font was 14px or higher? Sure, I do. You might get more conversions. But only split-testing can tell you for sure.

    4
    • 3536

      D Bnonn Tennant, Information Highwayman

      October 7, 2011 2:34 pm

      I’ve done websites for years and my clients and myself have never reported a single incident of users saying they can’t read the sites.

      Do you have reason to expect that these users would let you know?

      All the research I’ve seen shows that if people have trouble reading a site, their immediate response is to leave. They feel no loyalty whatsoever, and have no concern for correcting the problem. They’ll just go to another site that suits them better.

      Seems to me you’re trying to create an argument from silence, based on anecdotal evidence, rather than listening to positive arguments based on scientific studies.

      5
  24. 3637

    Ever since reading up on responsive design, typography, and using readability (<- not advertising, I don't work with them), I started using a standard 1em for body text and .75em for footer/copyright. 1em = about 16px so I think it's a good standard size to go with.

    When using readability, I usually have it on 17 or 19px. And because I read a lot on the internet, it's really hard to read <16px font.

    0
  25. 3738

    Very interesting read. I too find many sites, blogs etc hard to read because of font, font contrast vs bg, and size. Especially with bigger screens than 10yrs ago, space is not utilized very good. I too use 12px fonts a lot (set in ems), but you have me convinced..

    I’ve also taken a look at the wordpress’ latest default theme (twentyeleven), they use 15 for body copy, big headers and 12px for meta data.. It looks really nice and it’s very readable..

    Good article.

    ps: to the dimwits in the comments, confusing this blogpost with “an experiment in creating a masterpiece of layout art”, read the damn thing. It’s about content and readability… not “style”

    -1
  26. 3839

    What? No, this is not what you should be teaching people. The standard size for font on a browser is 12pt, not 16px. Points are measured in physical units, which means that as pixel density increases, the displayed size will be the same.

    Pixel density used to be lower, which is why everyone uses 12px as their font size. Because when monitors displayed around 72dpi, 12pt, was 12px. Now monitors display around 96dpi, and guess what, 12px * (96/72) = 12px * (4/3) = 16px. Ignorant web designers who did not take the time to understand the difference between points and pixels assumed they were the same because coincidentally, at 72dpi they are the same.

    What you are encouraging people to do is not a solution. It’s the same problem that caused this, which is using a digital unit of measurement instead of a physical one. Once monitors inevitably improve and pixel density increases this problem will be the same again. Also, 16px fonts will look huge on old monitors. 12pt fonts will look the right size forever.

    P.S. Since computer dpi standards aren’t concretely set, the actual physical sizes will vary in practice. 72dpi, and 96dpi are just average approximations that are convenient to use for monitors in those ranges, but the principle still holds, even though it’s not exact.

    9
    • 3940

      D Bnonn Tennant, Information Highwayman

      October 7, 2011 2:35 pm

      A good topic for a followup article perhaps Tim.

      1
    • 4041

      It turns out 16px really is forever and always equal to 12pt (not that is should be). I wrote about this here http://blakefrost.tumblr.com/post/10612682218/pixels

      That being said. Why would anybody want to say 16px when they can say 12pt. That’s a best practice for print too. It’s so elegant it hurts.

      Nobody should every use 12px, that is just too small as the author points out. It’s very clear why this is so, when it’s realize 12px equals 9pt. We all know 9pt is to small for body copy in print, and now we know it’s too small for body copy on the web as well.

      Great post!

      -1
      • 4142

        D Bnonn Tennant, Information Highwayman

        October 9, 2011 2:27 pm

        Blake, if I’m understanding the article you linked, 1px in CSS does not equal one actual pixel on a screen.

        But if you’ve done much tweaking with CSS, you’ll know this is simply false.

        1px in CSS is indeed equivalent to precisely 1 pixel on a screen. It’s a different amount of space on my 23″ screen as on my 15″ screen (both at 1920×1080).

        If it were true that a pixel was always 1/96 of an inch, or that 12pt always = 16px, then 16px on my laptop would appear as the same size at 16px on my desktop, since points are absolute units. 12 point is always 1/6 of an inch. But that’s not how it works on a computer, as you can see in the photos I took for this article: 16px on my laptop is significantly smaller than 16px on my desktop.

        -1
  27. 4243

    I haven’t read all the comments, but has anyone pointed out that font size is dependent upon the font face?

    For instance, 16px Times New Roman on screen may be equivalent to reading book text, but 16px Arial is not. Take a look at this demo I put together: http://jsfiddle.net/q6fsz/embedded/result

    You can clearly see that 16px Times New Roman is more equivalent to 14px Arial (or even 13px), and 16px Arial (or 15px) is more equivalent to 18px Times New Roman.

    1
  28. 4344

    I’d say the comments at 15px are far more readable than the body text at 19px. And that’s on my notebook screen at 140dpi a good two and a half feet across the desk from me.

    1
  29. 4445

    Ha! I was just making a revision to my personal website upping the font size from 12px to 14px for body copy — as well as a general type size increase overall. I guess I’ll meet you half way, eh!? — Total agree!

    0
  30. 4546

    Well, there is a reason that large print books have their own section in the library separate from other books; why there are still stairs in the world and not ramps everywhere; why the web is mostly dark text on white rather than yellow on navy blue (which studies say is the easiest to to read for vision impaired). It’s not that interesting to the general public. As a designer you need to have the ability to use contrast of size. All big type just looks horsy. You see lots of contrast of size on this page, to prove your example go ahead and make all the type a minimum of 16 pixels on this page! I just don’t agree with your provocative generalizations. I’m almost 40 now and I don’t have trouble reading the majority of text on the screen that I read. Sigh…this just feels like an inane thing to argue.

    3
  31. 4647

    Thank you for this amazing article! First I thought the font was a little too big, but the white space around it was very good so it was easy to accommodate with it from the beginning. After just a little it felt natural and COMFORTABLE reading the “not-too-big” font… And I just have to say that you absolutely made your point with the last part…

    Very nice and useful read!

    -1
  32. 4748

    It would certainly make content producers think about using fewer words to greater effect. A fair argument – worth considering.

    0
  33. 4849

    wow. That’s like saying 34″ is a great size for the waist band on a pair of pants. Really? what about the inseam? and skinny people. and thick people.
    My point being, to focus on pixel height alone isn’t an answer. Its not even the right question. You need to address everything as a whole. Character size, line height, letter spacing, line length… and what about the font itself? Whether it be a serif, sans serif, cursive, decorative or display font. I know you are talking about body copy hear, and not headlines, i’m just trying to drive home the point. Many people get too myopic when talking about type. Fixating on just the size of the characters when the whole gamut of type control should be addressed.

    3
  34. 4950

    “The users who will most need to adjust their settings usually don’t know how.”

    There certainly will be users who don’t know how to adjust font settings, but do these people ignore the BBC or Amazon websites because the default font is not to their liking!? Is a font under 16px costing these websites?

    And how many people turn on their internet device and consider it a mistake to see web text equal to (but less than) 16px and think … “Christ, I need to get out of here because some web designers want 16px (or higher) to be the new default standard.”

    As others have said, there is no correct default anything for websites. However, if we begin with the default system font size for a web device, we can’t go far wrong. Forcing a size would not be right though and goes against all that everyone is doing to help give users who truely need larger fonts the freedom to do so … freedom is key and browser vendors have great defaults that frankly get screwed by some of the lazy-ass web development frameworks out there.

    If some people want to undo all the hard work browser vendors have done for text defaults, then so be it. But to create something like a framework or methodology such as a fixed font size takes us back to before browser vendors had anything near a close standard between them like we do now. And that doesn’t help anyone that such measures are created to help in the first place, which makes no sense.

    All devices have a relative (to device) default and we should start with that like a few others have said. For good reason and with the ever-growing resolution of devices we cannot and should not assume a singular font size, for similar reasons to what you said in fact.

    5
  35. 5051

    While i agree with the premise in theory, let us not fprget the impact smartphones are having on web browsing. If there is an issue with text size a quick finger scissor zoom can work wonders.

    I’m more concerned about poor layout rendering non-mobile optimised sites impossible to navigate. Case in point, because this site loads all comments at once typing in this one had severe amounts of lag.

    0
  36. 5152

    I agree. Thanks for this eye opening article… literally!

    -2
  37. 5253

    view this page at 1024×768 and you’ll probably think you’re looking at a site for kids.

    Font size is dependent on screen resolution, especially if you use px declarations.

    You also make quite a few assumptions on users habits, I don’t believe that most people will simply click back or go somewhere else if the font size is a little small, especially if, as you say, most sites are like this. It’s the norm, so they won’t think anything of it. It’s also easy to make something look small when compared to something big. As a 6’2″ male, I still find myself feeling short when I stand next to some taller than me, yet I am above the average height.

    While I understand your reasoning and agree with it on some levels, I think you miss some key points about websites, like the fact that not everyone’s browser size and screen resolution will be the same, so something that works for one setup will not on another, where large fonts are concerned, I think that it would become too large at lower screen resolutions requiring people to scroll much more or reduce the font size, which is something you posed yourself as a failing of small font sizes.

    4
  38. 5354

    Hmmm… You *could* be right. I’m willing to take it for a test drive. I noticed, sitting here in my Morris chair, laptop in hand (or on lap), I sat with better posture reading your large text. I noticed that it was easy and quick to read. I noticed that, with some of the long blocks of text in some of the comments, I was ready to think: tl;dr

    You’ve left the input box for comments in large print. Now my comment will be converted to tiny print and sink into oblivion, eh?

    0
  39. 5455

    Why does this article look so bad?

    4
  40. 5556

    Well said, and well done. For the first time in five years, I was able to extract information from a web page without putting on reading glasses.

    2
  41. 5657

    I think this is ideal when you’re using serif fonts, 14px would be ok when you’re using sans-serif

    0
  42. 5758

    LOL. Why write an article to prove 16px and then set it 19px??

    And then say “look how small 12px looks now”. Well of course, when you’ve just been reading 19px!

    Like probably many others, until I read that paragraph saying it was set in 19px, I assumed the article was 16px. And I can tell from other readers’ comments they missed that paragraph altogether.

    The large font didn’t help me – I skimmed coz it was hard work. In fact, I missed that paragraph entirely. But was going to try different sizes via the debugger and then discovered the 19px.

    All that said, when I did set it to 16px, this font was a comfortable size then.

    1
  43. 5859

    You definetly make a good point, i read this article comfortably standing back on my chair. i will consider this when thinking and designing typographic elements.

    -1
  44. 5960

    The article, and many of the comments, seem focused on web page like blog posts and other text-heavy pages. For that type of “design”, I agree that a large font size is appropriate. But most of the web pages I design for my clients have images, navigation, stylistic flourishes, forms, functional bits, and other things that, in total, almost out-weigh the amount of pure text. If I were to use 16px fonts for all text on the page, not only would the design look terrible, but the poor user would have to do much more scrolling to get to important parts of content.

    The point of the article seems akin to saying “Print-based periodicals should always use black ink”. That might be fine if you’re a daily newspaper concerned with costs, speed of printing, and the “disposability” of your product. But I’d bet a monthly magazine might think the “always use black ink” guideline to be quite limiting.

    Just my $0.02!…

    1
    • 6061

      D Bnonn Tennant, Information Highwayman

      October 7, 2011 7:12 pm

      Scott, can you show me an example of what you mean? I’ve never seen a site that couldn’t be made to work very well with 16px text.

      And since text is what carries the actual propositional content users need (in most cases), other elements on the page should support it—not vice versa.

      Curious to see what you’re talking about.

      -1
      • 6162

        Well, here’s an example that’s actually a text-heavy site: https://www.google.com/news

        When I view this page in Firefox v7.0.1 and use the “WhatFont” tool (see http://chengyinliu.com/whatfont.html), it shows the headlines being 16px and the body copy 13px. If the body copy were increased to 16px, as the article suggests, the headlines would have to go to at least 18px to be distinctive. I think those increases, while making the page readable from a further distance from the screen, would also force more scrolling.

        Another example most people would be familiar with is Facebook. I think their pages would look terrible (and the design would break) if the minimum font size was 16px.

        I know there’s a trend towards “minimal” web design, with very little text and “airy”, whitespace-laden layout. 16px (and larger) font sizes can work very nicely in those designs. But when we need to present more than a small amount of text, along with navigation and other page elements, I just think a 16px size is too large for some things.

        1
        • 6263

          D Bnonn Tennant, Information Highwayman

          October 9, 2011 3:34 pm

          Hey Scott. Perhaps the solution to Google News is to stop using size as a differentiator for headings here. That’s often a poor practice anyway.

          Using color and bold face should work equally well.

          Also, since users don’t mind scrolling, I don’t see that as a problem.

          As regards Facebook, the design does look terrible at 16px—yet I force Facebook to show me fonts at that size anyway, because I find the default size incredibly hard on my eyes :)

          -2
  45. 6364

    Great article – I’ven been wondering a long time now when the trend for small fonts finally is being discussed.
    The longer the text the harder it is to read in 12px. There is great content out there but it is just too hard to read. The trend for microblogs and Facebook like communication makes it possible to use small fonts but when confronted with longer texts larger fonts are needed.
    This article uses a 3px larger font then the 16px under discussion so people: please stop complaining about the text being too large – he is trying to make a point here.

    -2
  46. 6465

    I run 1920×1200 on a 14.1″ Dell D830 laptop and triple 1920×1200 on 24″ LCDs for my desktop. I almost always enlarge font on sites, and I would go even further and say 18pt font MINIMUM, with 20-24 being more sensible. If you have a lot to say on your site, start a damn blog. If you’re trying to sell stuff, be concise and elegant.

    Need proof? http://www.apple.com/ipod/ . I’ll wait while you measure.

    4
  47. 6566

    This is the first time I’ve found myself sitting comfortably with my back against the back of my chair while reading an article on my computer EVER. You’ve made a great point here. Thanks.

    1
  48. 6667

    While I think that it might be another good “you should…” design principle, the fact is that you just can’t do everything.

    If you move the body to 16px, then hierarchy speaking your h2 or h1 might be in the 40px range. Combine that with the fact that many still advocate that you “should” use a 960 grid for people with low resolution screens and suddenly you’re in a layout nightmare. You have a top-level menu with size 32-40px font and only 960 pixels to spread it across? Yikes!

    I’ll just stick to the nice floating javascript withe +/- buttons.

    0
    • 6768

      D Bnonn Tennant, Information Highwayman

      October 7, 2011 7:15 pm

      Er, this might be stating the obvious, but you don’t actually need to use significantly larger font sizes for headings. In fact, differentiating headings based on font size is a poor practice, since readers can’t distinguish between different heading levels without direct comparison. So if you have an h3 in the middle of one section of copy, and an h2 further down, without them both being visible at once, a reader typically can’t tell the difference between them based on size alone.

      -1
      • 6869

        You clearly don’t follow what you preach. Your h1’s and h2’s (you don’t have h3’s) are significantly larger than each other AND your body copy.

        I believe it should be a combination of color, size and weight. To distinguish headers solely on color is a poor practice itself.

        1
        • 6970

          D Bnonn Tennant, Information Highwayman

          October 9, 2011 3:35 pm

          Julian, did I suggest that you should never use larger font sizes for headines? Or that I would never do it?

          I didn’t think I had. Merely that it wasn’t necessary.

          -2
      • 7071

        So if your markup is correct, size wont matter to the screen reader.

        0
  49. 7172

    I like the article, and I sometimes like 16px font, if done properly. But why does this article resemble a squeeze page?

    The red h2 tags? and ugly drop caps at the beginning of some paragraphs? Single column w/ no sidebar? Doesn’t seem like it belongs on smashing magazine.

    1
  50. 7273

    wow, wow very clean, great redesign mr Elliot :)

    1

↑ Back to top