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

Advertisement

16 Pixels

For Body Copy. Anything Less Is
A Costly Mistake

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 Standard1”:

[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 light2 gets through to the retina as it did at age 20. For 60-year-olds, it’s just 20%.
  2. Nearly 9%3 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 measure4 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 inches5 from their computer screens. In fact, 28 inches is the recommended distance, because this is where vergence6 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 size7 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.8

    16-pixel text displayed on a 15.4-inch screen, next to 12-point text printed on paper.9
  6. In a 2005 survey of Web design problems, bad fonts got nearly twice as many votes10 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 SiteInspire11 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 Themes12 and ThemeForest13, 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 how14. 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.

Bnonn and his daughter

Bnonn is the author of a series of free videos15 on creating websites that capture readers and turn them into customers. Known in the boroughs as the Information Highwayman16, he helps people sell more online by improving their copy and design. When he’s not knee-deep in the guts of someone’s home page, he is teaching his kids about steampunk, Nathan Fillion, and how to grapple a zombie without getting bit.

Footnotes

  1. 1 http://www.informationarchitects.jp/en/100e2r/
  2. 2 http://www.whatmakesthemclick.net/2011/06/03/first-podcast-kevin-larson-2/
  3. 3 http://www.who.int/blindness/table/en/index.html
  4. 4 http://www.whatmakesthemclick.net/2011/06/03/first-podcast-kevin-larson-2/
  5. 5 http://www.eyefatigue.com/cvs-computer-glasses.asp
  6. 6 http://en.wikipedia.org/wiki/Vergence
  7. 7 http://www.informationarchitects.jp/en/100e2r/
  8. 8 http://media.smashingmagazine.com/themes/smashing/sixteenpixels/print-v-screen.jpg
  9. 9 http://media.smashingmagazine.com/themes/smashing/sixteenpixels/print-v-laptop.jpg
  10. 10 http://www.useit.com/alertbox/designmistakes.html
  11. 11 http://siteinspire.com/showcase/category/type/blog
  12. 12 http://elegantthemes.com/
  13. 13 http://themeforest.net/
  14. 14 http://www.useit.com/alertbox/guesses-data.html
  15. 15 http://attentionthievery.info/
  16. 16 http://informationhighwayman

↑ Back to topShare on Twitter

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

    Nice non sequitor Scott.

    As I read this article, I leaned back from the monitor and relaxed and enjoyed reading it. I’m a convert.

    6
    • 2

      That doesn’t make sense. How can you be converted by the comfort of the font size when it was actually 19px? So, to achieve what he has, you’d actually have to set all sites you make to 19px. But then that’s a whole new debate.

      -2
      • 3

        You need a lesson in typography before commenting. 16px in one font does not equal 16px in another. It’s about x height.

        1
  2. 4

    You make a good point. I’ll try that on the new website I’m working on.

    11
    • 5

      Richard Williams

      October 7, 2011 6:22 am

      It is a good point, but I still don’t think a large font is suited to long pieces of text.

      When I got to the small text at the bottom I found it a relief to not have to move my eyes so far/quickly. I’m slower reading the large font.

      12
      • 6

        I think you point at something interesting. The large font make us read it slower and the smaller to just go trough it and not really read it. To enlarge the font was a tip I got years ago when it comes to proofreading as it is to easy to just “skim” it when the text is small.

        10
      • 7

        Just the opposite – the larger font IS more suited to long text. How old are you? (as the article asks) – I actually found the body text of the article easier to scan/read than the smaller text below. AND, his points are valid – I’m so tired of needing to zoom in order to read simple text on web sites (especially some web development sites); AND, the web is becoming so full with alternate sources of information that you CAN read – I’ve just given up on making the attempt. I have found myself completely bailing on 4 or 5 sites a week when I’m confronted with small text. Much more cost effective of my time to scroll down the Google list to a new site.

        7
        • 8

          And what size does Google use? Definitely not 16.

          1
          • 9

            Outside of the initial search page, Google is hardly a paragon of usability. Sure their interfaces look cool and have some pretty cool features, but many of them are hard to use or break web ui conventions.

            -1
          • 10

            Why does everyone look to Google for pointers? Truth be told, their user experience people are effing useless. Whatever you do, don’t look to Google for UI/UX pointers – they just don’t have much talent in that department.

            6
          • 11

            95 pixels.

            -3
          • 12

            Yes, if you are building a search engine, you can copy Google. But this article is talking about full content website, not just search engine.

            1
      • 13

        The first thing I did to read this was reduced the font size down to something around 12 point, then when I got to the comments I bumped the size back up sot that the comments are readable. I think 16 is a bit much, but a 14 or 15 might be an acceptable compromise. As pointed out in the article those that like a smaller font can probably more easily figure out how to reduce display size than those that prefer a larger font. I can’t help but wonder though that for those who override website settings to display fonts much larger than normal if when viewing a page like this they don’t get slapped in the face with 30 point fonts or something similar.

        8
        • 14

          I wondered the same thing myself about whether the text zoom settings would crank the font size up to unacceptable levels.

          I just tested in Chrome, Firefox and Safari and it looks like the zoom is per-tab, or maybe per-domain.

          So unless there’s another setting in some browsers that universally changes the zoom, it shouldn’t be a problem.

          2
        • 16

          16px != 16pt. 16px == 12pt.

          13
          • 17

            That really depends on your platform and settings. In Windows by default and ALL browsers 16px==16pt.

            -1
        • 18

          Hey, Kyle. Problem is, this post is actually set in 19px. A lot of people missed that in the article – which proves they were skimming, and prob coz it was hard reading.

          So, the font was too big. And that’s why it was hard work to read. At 16px it’s much more readable.

          I don’t understand how or why on earth he’d try to argue for 16px then not even use it! Totally undermined the credibility of his arguments. (Especially when he says “See how small 12px looks now. Well of effing course it looks small against **19px**!!)

          15
          • 19

            It also depends on your screen resolution. Mine is set to Full HD, so the letters don’t look that big, they look pretty comfortable to read. He set the size to 19px because the font family was made with different height, so the author tried to match normal sizes like those from families like Verdana. Read this reply from José Luis, he talks about pixel density and screen size, that’s the point.
            It would be nice to see a CSS measure that adjusts to screen resolution =D

            1
          • 20

            I totally agree with you, at 16 px the above text is way better for easy reading. Meanwhile 19 px it is quite shocking and requires a careful text formatting, and in most cases clients don’t care about that. They just throw in the text and expect to look good.

            Also as a web designer I often find that clients want a lot of information on the visible part of the homepage(the one you see without scrolling). For those cases you cannot use all text at minimum of 16px, because the design falls apart. you may use some text at at even higher number but the rest cannot be at 16 px min.

            Maybe when everyone will have a screen resolution of a minimum 1440 px in width then it will be suitable, but as long as we still have to take into account the 1024 px screens I do not think it is suitable as much.

            PS: you really ruined your article with your 19 px font size instead of 16. Maybe it is not to late to change it.

            1
          • 21

            You obviously didn’t read the article very clearly. Repeated in many places, including the *opening line*, he says 16px should be the *MINIMUM*. Nowhere did he say it was necessarily bad to go higher. He didn’t undermine anything he said.

            0
        • 22

          I think your very much confusing familiarity with usability. Trying thinking and analyising instead of just throwing out reflex opinions.

          3
          • 23

            To those that pointed out the confusion between point and pixel, you are correct, I had missed that, but it doesn’t change the point of my comment which is that the first thing I did when trying to read this article was bump the font size down about 6 units, in whatever system you want to measure those units in. To be fair, I like really small text, so I’m probably one of the outliers (I’ve got a nook and I always read books on it using one of the smallest font sizes it provides).

            “I think your very much confusing familiarity with usability. Trying thinking and analyising instead of just throwing out reflex opinions.”

            I can’t tell if you’re trolling or actually serious. Assuming you are serious, there are a couple points, first of which is that usability and familiarity are interrelated concepts. It’s practically a truism that what we are most familiar with we find the most usable. That’s the whole point of things like look and feel standards. Now, that doesn’t mean that you can’t ever change things and deviate from what people are familiar with without destroying usability, but such deviations should be gradual, consistent, and well reasoned about. This article makes some excellent points, and I do think in general we probably favor smaller size fonts than perhaps the majority of the population is comfortable with. I personally feel the article over-reacts and pushes the fonts a little too big (and as pointed out by others the article itself actually uses a font size larger than what the article suggests you use), but as I said above I like really small fonts so I probably constitute an outlier.

            4
        • 24

          I did exactly the same thing… when I got onto the main article from the smashingmagazine homepage I read the first paragraph and dropped the size down.

          I found reading body font at that size on a screen was more difficult than reading the usual sized text.

          It is true that some people have difficulty reading small text because of eyesight or age but should the default change to cater for that? Some people have very limited vision and require screen readers so why not just have a blank page with a voice over?

          It is correct that Web designers should be be designing for themselves but for what the users want and what is best at converting but as a designer who has worked on everything from major global cosmetics eCommerce websites to some of the fastest growing web hosting companies in the world, I would have been laughed out of the office if I had tried to use 16px as a body font.

          I think line height and paragraph stylings (width, orientation, alignment) would have more of a impact on improving readability.

          I also believe that the issue regarding people in their 40′s and 60′s struggling to read the screen is a bit of a weak point. If you struggle to read 12px font then you obviously require reading glasses or contact lenses and to read without corrective measures would only be damaging your eyes further!

          -1
          • 25

            You plainly don’t understand the problem. Aging eyes (including yours, in due time) become less precise. The retina detaches and “floats” (as yours will, too). Also, many people begin to develop cataracts long before they hit old age. This adds more “fuzziness” to their vision. (Detached retina can result in permanent blindness if not immediately treated, usually by laser “welding”, but that’s another thread.)

            Those who have early cataract development are often encouraged to wait until it’s progressed further before having lenses replaced.

            Neither of these very common conditions can be overcome merely by fitting better glasses, but only by larger font sizes. If you’ve ever noticed some older people can only read using a magifying glass to make the type appear larger, now you know why.

            It’s a matter of physics, not a matter of opinion.

            0
      • 26

        D Bnonn Tennant, Information Highwayman

        October 7, 2011 12:34 pm

        Hey Richard, a little factoid I didn’t include in the article is that studies show small text encourages scanning, while larger text encourages close reading.

        So large text is absolutely appropriate for text that you want people to read, rather than skim—such as this article :)

        4
        • 27

          D Bnonn Tennant, Information Highwayman

          October 9, 2011 2:31 pm

          Er, actually I got this the wrong way around. Small text promotes close reading. Large text promotes scanning.

          -3
      • 28

        Rizqi Djamaluddin

        October 8, 2011 1:53 am

        The drawback I find with large text is that it increases scrolling. Less eye strain figuring out letters, yes, but as mentioned, it means the eyes move around faster and fingers have to scroll more, and it’s even more straining for the eye to have to follow around text as it scrolls around. I found this to be especially true for mobile devices – you have to hit that sweet spot between readable text, and not too much scrolling to get what you want.

        1
      • 29

        The length of text should not matter. It is Irrelevant.

        The ability to READ it , is the issue.

        Agree 100% with Bnonn , 16 is as small as you should go.
        There is NO justifiable reason to disagree.

        Font’s are an issue as pointed out in the article ,
        HOWEVER the times font used in the article can hardly be described as easy to read. ( practice what you preach ? Bnonn )
        Every letter in that font has lots of useless accents that blur the true shape of intention.
        eg..( have a really close look at the letter i )

        **** I know Times roman is a tradition in print.
        ( therefore it must be good ? ) no

        Think about the ease of text transmission.
        For the most efficient transport from page to eyes. The font needs to be the most basic font available. Not cluttered with artistic shapes.

        Anyway , great article to make those webdevs who think form over function is priority.
        When the reality is…..
        COMMUNICATING content , is the ONLY reason for text to exist.

        -6
  3. 30

    Shouldn’t the “12-point text printed on paper” be the reference and stay the same size in the 2 examples? (also the second one says 12-inch text)

    Other than that, definitely something to ponder…

    3
    • 31

      Haha… I noticed exact the same!

      0
    • 32

      Maybe a bit of an oversight but it doesn’t actually weaken the claim being made, right? For the purposes of the argument, it doesn’t matter if the print example is the same size across the two examples—only that in each separate example, they’re shown to scale with the on-screen type.

      0
    • 33

      when i saw those two example screen shots which didn’t match each other (and were both WAY smaller than the text of the article) i felt like the author didn’t know what he was talking about. i stopped reading after that.

      -27
      • 34

        Are you retarded? It’s the scale that matters, you could zoom out until the printed text is equal and the screen text is smaller, exactly the same.

        -8
  4. 35

    Interesting points, it was definitely very easy to read this article.

    8
  5. 36

    I’m not sure if it’s on purpose or not, maybe I’m missing something…

    BUT

    I find it hard to take the article seroiusly (even though I agree with the point being made) due to the styling used throughout;

    The Red Impact headers and the drop shadow & spacing on the first letter of the new paragraph. It’s horrible.

    I was also under the impression that Sans-serif font’s are easier to read on screen than serif fonts, so on an article about legibility, why choose a serif font (no matter the size?).

    Maybe it’s ironic? Maybe I’m dumb? Maybe I just missed an inside joke?

    50
    • 37

      >I find it hard to take the article seroiusly (even though I agree with the point being made) due to the styling used throughout;

      Are you joking? He presents usability studies and examples, and you dismiss it because you don’t like the fonts he chose? *sigh* You’re not doing much to combat the combat the stereotype of the myopic, superficial designer. This is exactly the attitude an article like this is meant to combat; there’s more to usability than your personal opinion!

      13
      • 38

        I was just about to say the same thing!

        0
      • 39

        It’s not that I don’t like the chosen fonts, it’s that I think they adversely affect the legibility of the article.

        I’m using Firefox 7.1 (I’ve noticed in Chrome the font’s pulled in by the browser are different)

        Take for example the “But Users can Zoom” section.

        The styled “T” at the start of “Thus spake one Web desiginer…” the large red lettter and large grey drop shadow touches the “h” from thus. I find that difficult to read.

        The article is about making text easier to read… The next paragraph starting ‘Not so.” Is unstyled. I find it much easier to read.

        That was only my point. Not that it’s ugly – just it’s harder to read in that style.

        There are further comments below stating my thoughts on serif vs sans-serif for screen use are incorrect. I accept this and as mentioned would appreciate any links to research on these to read up on.

        11
    • 40

      The Red Impact headers and the drop shadow & spacing on the first letter of the new paragraph. It’s horrible.

      Yes, let’s confuse aesthetic matters with readability, which is what the post is about.

      I was also under the impression that Sans-serif font’s are easier to read on screen than serif fonts, so on an article about legibility, why choose a serif font (no matter the size?).

      You were under the WRONG impression based on old-wives tales. Go read some current studies with actual stats from users. Oh, and dpi’s are higher now, and font rendering smoother than when that old wives tale started.

      2
      • 41

        My second to last point stands then :-)

        Any links to the current studies are welcomed, looks like I need to do some reading.

        3
        • 42

          Hey Scott, I know what you mean about the headers. The drop shadow is encroaching into the text and that does affect readability. I also understand where the others are coming from. I’m just writing to say I thought you handled all this well and the fact that you wrote back and requested documents to read further shows you love what you do and you have respect for the site in general.

          Cheers,

          10
          • 43

            Yeh I was more looking to add my thoughts on it all, not start any conflicts.

            Quite happy and understanding of the feedback / comments I’ve received.

            Re-reading my response, the point “second to last” I was referring to that I was correct was ‘I’m dumb…’ (semi-serious), not any of the criticism of the article.

            I’ve also now noticed that some of the encroachment of the drop shadow I’m seeing (in firefox 7.1) isn’t present in Chrome. My original comments where aimed at the Firefox version I was seeing.

            2
      • 44

        Don’t you mean ppi?

        2
    • 46

      The latest research indicates that people no longer seem to have any issue with reading serif vs. sans-serif fonts onscreen vs. in print. One factor is that monitor screen resolutions are generally high now so that we don’t encounter the same problems with the terribly pixelated serif strokes that occurred in older monitor displays. Another possible factor is that we’ve become so used to reading sans-serif onscreen that we don’t need the serif fonts to improve legibility in print. Obviously there may be generational differences between people who consumed printed text for most of their lives vs. those for whom digital text has been equally or more significant than reading print.

      3
      • 47

        I’d like to see the studies on sans vs serif people are referencing, but not referencing. Print or post it on the highest resolution available and apply all the stats from this post and you will struggle to read the serif more than the sans. You don’t need to spend any $ researching this. Squint your eyes people, serif’s are harder to read.

        6
    • 52

      D Bnonn Tennant, Information Highwayman

      October 7, 2011 12:43 pm

      For the record, I didn’t choose Impact; I chose Limelight, with the article subhead set in Ostrich Sans. And the drop shadows looked sweet with those :P

      The typeface changes were entirely the decision of Smashing Magazine.

      -3
    • 53

      D Bnonn Tennant, Information Highwayman

      October 9, 2011 2:36 pm

      Hey Scott, I’m not sure what’s up with the styling in Firefox. I actually created the CSS file in Firefox, but since submitting it for publication, summat nasty has happened to it.

      Check the article in Chrome for how I originally wanted it to look.

      Re sans serif fonts being easier to read, there was a time when this was true on screen, because of low pixel density making the serifs really jagged. However, these days it’s not a problem at all, provided you’re using a good font size to begin with :)

      See http://alexpoole.info/which-are-more-legible-serif-or-sans-serif-typefaces

      0
  6. 54

    I’m actually a web developer not designer but as a “i will try and learn design” project i designed my personal site ( http://borayalcin.me ). At first it was 12px as I’m used to see but even though I’m 25 its hard and tiring for me to read my own stuff.So, I’ve increased it to 16px and everything is fine

    now after reading the article now can “scientifically” defend 16px+

    0
  7. 55

    With the advent of Typekit & Google Web Fonts, it’s harder and harder to have a go-to body font size. What works for one font at 16px might look tiny for another.

    I suppose that’s where Less comes in handy.

    3
  8. 56

    My tests indicated younger viewers (< ~30) are less likely to read larger web copy. My guess to the reason was everything blends together and more scrolling is required.

    Personally, I've always found large text to look like an old school ebook sales page.

    14
    • 57

      That seems more like a styling issue. With proper line spacing, paragraphs and well thought out layout the text will flow naturally and comfortably instead of looking like a wall of text.

      2
    • 58

      The answer then, of course, is for web sites to respect the text size users configure in their browsers. Use relative sizes, not absolute ones.

      1
  9. 59

    I’m having difficulty reading these comments, which are appearing at 14.9667px. :-)

    5
  10. 60

    so if this is true, why smashingmag mainly only uses .75em?

    2
    • 61

      Specifying font size in .em calculates it for the given element relative to the base font size specified elsewhere. The body copy of this article renders in my browser (with default font sizes) at 19px, which is, of course, well in line with the article’s claims.

      5
  11. 62

    Really interesting, I think I also subconsciously skim articles more if they are in a small font size and read larger font articles more fully. It’s easier on the eyes even for a twenty-something year old with perfect vision.

    You also missed the point that it’s much easier to read on a phone or tablet but they that obviously brings up the whole ‘responsive website’ can of worms!

    2
  12. 63

    As you’ve mention it yourself, “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 …”, gave a lil’ bit contradiction to your article

    I believe textface size is “hardcoded” to their initial design DNA.

    Since typical “websafe” fonts are most likely sized well in 16px on screen (hence 1em in browser’s standard size) then using 16px is pretty much logical.

    But setting an 16px to EVERY FONTS for textface as a must is not very ideal as well..

    I believe typographical knowledge still reign in this area of expertise.. including textsizes, kerns, spacings, etc..

    unless for a generic font-style: serif/sans-serif :)

    Great article though! I strongly agreed that most of nowadays textfaces are treated too small to be comfortable.. :D

    3
  13. 64

    Great article, however I’d go one step further and suggest that anything less than 1em is a mistake :)

    The browser defaults have been set for readability across all devices, so keeping 1em for body copy (and basing your layout in ems) helps with great readability on any device.

    1
  14. 66

    Couldn’t agree more, this is the first page ive visited, where I have not had to zoom in (normally my first action on any page).

    0
  15. 67

    Yes! To every word, right up to when you dropped the word ‘weaksauce’ and then No.

    1
  16. 68

    Do you still remember when 4 years ago it was a passing trend to use 10-11px Verdana as body copy? Yach! I know I personally get very easily tired on reading blogs that use such a small font-size (*ahem* A List Apart *ahem*) – no matter how _awesome_ the content is! My personal preference is to use a RSS reader with my own font preferences, since zooming pages annoy me even more:P

    For me the small body copy problem got slightly worse when I got my first laptop. After that I started to implement bigger and bigger body fonts to my designs. Haven’t gotten to 16px yet tho’! It definitely takes something to get used to AND it is definitely not for every situation:)

    5
  17. 69

    While I can agree that you should define your website (and thus your font-size) by the users you aim to attract, the font you are using is hurting my eyes more than if the size was 12px.

    This makes me focus more on the strain it was reading than the content you were sharing. Food for thought perhaps?

    Anyway, good points but common sense. You should always design for the people who will be reading your site. What I walk away from is the stats about the differences in age and readability. Thank you.

    2
  18. 70

    Your Typography here stinks, but I agree with you 100% about 16px font’s on screen :-)

    3
  19. 71

    I was reading this in Google Reader, which has about half the font size your site does. It’s quite a striking difference and convinced me to try zooming Reader in a bit. Definitely better. Not sure why I never did it before… I zoom other websites all the time.

    0
  20. 72

    16px fonts definitely tend to be a good choice, but it really does depend on exactly what font you’re using, particularly if you’re using something like typekit where the fonts tend to have a small x-height.

    If you make those too large and there’s a problem with the service, suddenly your back-up font is looking comically large.

    1
  21. 73

    I find this article hard to take seriously.

    Font size should be determined by the nature of the site and the target audience.

    To say 16 pixels should be the minimum for all sites is a blinkered view.

    17
    • 74

      D Bnonn Tennant, Information Highwayman

      October 9, 2011 2:40 pm

      Neil, I agree that font size should be determined by the nature of the site and the target audience. Perhaps you could give an example of a site or target audience that you think indicates <16px for body copy?

      0
  22. 75

    Some very valid points here, but there’s a lot more to readability than just font size:

    1. People need to breathe so give them the right amount of air between lines and words. The formatting in this article needs more on both, if you ask me.

    2. People don’t read letters and words, they read shapes. This is why road signs, which is probably the most important texts you’ll read in your entire life, in most countries are capitalized and have been for decades. Once this shape is significantly bigger or smaller than they are used to, their ability to recognize it as a word they know is reduced. This is very individual but personally I’m feeling the font and size of it in this article is borderline of what I’m able to “read without reading”, if you know what I mean. Probably because I’m so used to reading 12-ish px sans-serif fonts on a screen.

    2
  23. 76

    Hi,

    I strongly disagree. You simply cannot generalise in such a manner. You should setup personas and test cases based on your target and current markets, if your set of personas does not (and will intentionally) contain anyone over the age of 28 why should your design consider that user secondary?

    Luckily I read this article in an RSS feed reader where I can choose my preferred font. after reading that you had intentionally styled your article in TeX Gyre Schola at 19 pixels I thought I would look at the article in its original format.

    The serif font strong colours and large font gives a childish impression and so it is much harder to take the article seriously.

    Additionally perhaps your lower contrast colour (#444) and hard to read serif font required you to select greater than 16px. Try #000 and a sans-serif font and I suspect that 14-15px will appear a lot more serious and having done so in both a feed reader and this webpage I can assure you it is definitely more readable.

    There are far more complex factors at work than just size and lack of structure in body copy is far more important than larger font sizes in improved readability. You are correct in identifying that font sizes are often too small for specific user segments, however, generalising to the extent that you do is a step too far. Fonts and users are veried and the appropriate design decision is a complex mix of this.

    PS your main heading is highly unreadable, if you changed it from its current:

    48px font size, 40px line height and centre alignment

    to

    14px sans-serif, 18px line height and left alignment

    it would be much easier to read for the majority of users…having overlapping line heights and center alignment is very poor for readability…

    10
    • 77

      D Bnonn Tennant, Information Highwayman

      October 9, 2011 2:59 pm

      Howdy Tesmond.

      You should setup personas and test cases based on your target and current markets

      Well, I do. Could you give me an example of a persona or test case where 12px is more readable than 16px?

      The serif font strong colours and large font gives a childish impression and so it is much harder to take the article seriously.

      Of course, I explicitly addressed the distinction between aesthetics and readability in this article. I also find it bizarre that you evaluate my contention not based on the facts and arguments, but on how I choose to present it. Isn’t that rather like judging a public debate based on which speaker’s voice you found sexier?

      Try #000 and a sans-serif font and I suspect that 14-15px will appear a lot more serious and having done so in both a feed reader and this webpage I can assure you it is definitely more readable

      Alex Poole reviews the evidence for and against sans-serif versus serif, and finds no difference. Are you saying I should simply accept your assurance based on your personal reaction? A sample size of one? What about all the research I’ve cited that contradicts you? Should I ignore it?

      Now, perhaps #000 is easier to read than #444. I don’t have any definitive research on that. The general consensus which I’ve seen says that #444 is easier on the eye, since the extra contrast of #000 on a screen (which is an active, additive color mode, remember, so glare is an issue) results in fatigue.

      Of course, you can debate my choice of font. I’m sure you could find a better one than TeX Gyre Schola. That’s just the font I happened to feel was right in this case, because I wanted to mimic a more classic look, rather than a modern one.

      There are far more complex factors at work than just size and lack of structure in body copy is far more important than larger font sizes in improved readability.

      Well certainly. You won’t get any argument from me about that—for example, setting copy in multiple columns is a pet peeve of mine, and an example of awful structure (physically speaking). And in terms of logical structure, well, that’s something I teach very vocally as well (see here, here, and even here.)

      it would be much easier to read for the majority of users…having overlapping line heights and center alignment is very poor for readability…

      I agree re overlapping line-heights—but please check the article in Chrome to see how it should look. I have no idea what happened to it in Firefox; you’d have to ask the Smashing Mag editors. It worked when I submitted it :)

      As regards center alignment, again, I’m afraid you’re wrong. For a top-level heading, center alignment is very appropriate, for two reasons: firstly, it acts as a visual cue that “this is a headline”. That is how we’re accustomed to seeing headlines formatted in newspapers and advertisements. Secondly, provided your headline is in about the right place vertically, it means it will be directly in your user’s eyepath for the initial fixation when they arrive on the page. See http://blog.kissmetrics.com/eye-tracking/

      3
    • 78

      “Could you give me an example of a persona or test case where 12px is more readable than 16px?”

      At no point did I suggest that 12px was a good size. However, I have seen relatively small font sizes used for label headers where the value they were describing was significantly larger and the supporting label was not normally necessary to read, more a clarifier for the first time you view and item.

      However, your examples of 12pt text are perhaps important. Paperback books are normally 10-11pt which as you have cited is less than 16px.

      “Alex Poole reviews the evidence for and against sans-serif versus serif, and finds no difference. Are you saying I should simply accept your assurance based on your personal reaction?”

      Mis-quoting me in a discussion is poor form. I said “hard to read serif font” NOT a really well designed serif font verses any old sans-serif font.

      “distinction between aesthetics and readability”

      Believing that these are two very distinct elements is clearly wrong. You emotional engagement effects how will you can read an article and the emotional engagement is highly influenced by the general asthetics. They are inextricably linked elements.

      If Barrack Obama delivered a speak naked doing an Irish jig with his lungs full of helium do you think your engagement with the content would not be effected?

      “For a top-level heading, center alignment is very appropriate…”
      A center alignment is less readable when is spans multiple lines than a left aligned heading. Your main heading and sub headings both span multiple lines, reducing their readability. The added overlapping which you have advised is an editoral blunder makes the alignment even harder to understand.

      “http://blog.kissmetrics.com/eye-tracking/”
      Says nothing about center aligned text. The negative aspect is the extra conscious effort to find the next line start.

      0
  24. 79

    Before writing my response, I thought I would have a look around on the web for sites with large text size.
    The one I found to be the easiest to read was apple.com, I was surprised, cos at first I didn’t agree with your article. It has now made me rethink of how I view webdesign. So thank you.

    0
  25. 80

    You speak truth. Interesting to see how people still try and argue that big text is “ugly”.

    I’d also argue that @font-face will make minimum size more difficult. For example, try using Minion Pro at 16px.

    I guess ems are another discussion…

    2
  26. 81

    Avinash Birammbole

    October 7, 2011 3:18 am

    Nice article but being a UX Designer and after working in Print and online media, Ive few of my views based on my experience.
    Choosing a font size is still lot more depends on various criteria s for example target audience (very important) is it slates/tabs/pads or monitors or mac displays. every screens has different properties and the display calibration levels.
    Your point on viewing distance of 28ins if fine but its not the same case while using ipad or hand-held devices, and your comparison with printed book is not a valid comparison as both are different mediums. One is reflective and other non-reflective.
    Fonts on different devices are rendered differently hence on reflective devices its suggested to use “em” and not “pts” or “px”, as they are scalable eily without distorting, sans serif font having 12 to 14 is very much readable on any screen.
    Using “em” : Usually browse default is 16px, to make it easy, change your default to 10px that way while using “em” you can set 1.4em for 14px font.

    3
    • 82

      D Bnonn Tennant, Information Highwayman

      October 7, 2011 12:55 pm

      Good points, and ones I’d liked to have gone into in the article…but space was a factor. Thanks Avinash.

      0
  27. 83

    Very (very) tiring article to read. Short reading lines + big font sizes don’t allow people to sit down and read the text comfortably. You know what doesn’t happen in books … scrolling and readjusting to your eyes to find the reading line again. Which I need to do like every 20 seconds when reading this article.

    Doesn’t help that the site is completely in shambles on FF7 (really??)

    10
  28. 84

    Great article. I’ll have another look at my websites now….

    0
  29. 85

    If you have to activate ‘Readability’ on a blog, its design has failed. I find I have to use Readability on most sites because the text is too small, so I definitely sympathise.

    However, I have to agree with other comments with regard to Impact in this article. Why? What’s wrong with a slightly larger, darker Georgia for headings? Do drop caps help us read body copy? I found myself reaching for the Readability button.

    1
  30. 86

    Why are the comments on this site not 16px?

    2
  31. 87

    Of course, I had to zoom out to read this comfortably, so…

    2
  32. 88

    Fun fact: exactly last night I changed the font-size of my body copy from 16px Georgia to 15px Helvetica. In my vue the letters are still about the same size though, as 16px Helvetica appeared a bit too bold.

    0
  33. 89

    I found this article very interesting! So interesting that I tried following your link in the footer but it’s pointing in the wrong direction :(

    0
  34. 90

    Couldn’t agree more.

    On another note, am I the only one getting some bugs with the new site design? In FF, I get Arial instead of Ostrich Sans Rounded Medium for the h2 headings (works just fine in Chrome and IE9), and even the h1 heading also looks wierd in FF.. and the header navigation is broken for me in IE9 (breaks into two lines, 1366*760px display).

    Like the new look overall though.

    0
  35. 91

    Hear hear! Been saying this for years myself, on mobile it’s even worse: ever tried reading 11px arial on an iPhone? Good luck enjoying that :)

    1
  36. 92

    I’ll change my website when you change yours…

    0
  37. 93

    Personally, I think line height and contrast are equally important to type size when it comes to readability. My personal favorite is to start with a text height of 14px and a line height of 24px. Depending on the particular font, I might go up or down from there. But having a line height that’s roughly 1.7x the font size does way more for readability than font size alone.

    8
    • 94

      James Brocklehurst

      October 7, 2011 4:57 am

      Couldn’t agree more.

      The way this article has been styled is a prime example – bump up the line height to 32px + and it becomes much easier to read!

      0
    • 95

      Cameron: You are right on in focusing on line-height. It is too bad that Eric Meyer’s reset, which so many use slavishly, sets line-height to 1, which is so wrong, wrong, wrong for legibility and the basics of good typesetting.

      -1
      • 96

        That’s why it’s a reset, not the holy grail of style guides… You still have to work after that.

        0
    • 97

      Whole heartedly agree with the line height being just as important as font size. I find that even with a relatively small font size, if you give the lines space to breathe, it’s so much easier to do the reading.

      0
    • 98

      I think line height is more important. Condensed text is extremely hard to read. Many sites fail to see this. It doesn’t matter what size your font is if your line-height is too tight it will instantly become harder to read. I think even this articles font style failed there. The line-height is far too tight.

      0
  38. 99

    Readability of < 16px on what resolution screen?

    1
  39. 100

    Good point! well done .. thanks :) 16px it is! ;)

    -1
  40. 101

    I agree with Tesmond. Of course there are arguments for and against but it all depends, there’s absolutely NO one magic bullet, there are a myriad of factors to take into consideration. e.g. screen resolutions.

    0
  41. 102

    The point, and a valid one at that, is that you should split test and adjust your font to which size converts the best. Be it 10px, 16 or even 24 px.

    Interesting read if you get the overall concept.

    2
  42. 103

    +1 for larger fonts. We have already implemented it in our latest sites such as http://www.keyboard-and-mouse-sharing.com

    It looked strange at first but it is clearly easier to read.

    Michael

    -4
  43. 104

    I can’t believe how many of praising one-line comments the author of the article has posted himself. That cracks me up.

    3
  44. 105

    Gabriel Gosselin

    October 7, 2011 4:36 am

    First, I agree that body copy on the web tends to be too small. I understand comments about scrolling, but I disagree with longer line-lengths. The book convention of 60 characters to a line to holds true on the web in terms of easy scanning.

    Second, comments about setting type in ems are slightly misinformed. em is a relative unit of measure. If you don’t use a reset, and browser has a default of 16px, them 1em is 16px. However, if you set style to 12px, the em follows.

    Another factor others have touched upon is line-height. Heights of 1.2–1.6em tend to yield more readability (defaults are often quite tightly set).

    0
  45. 106

    Great article and the first one I have read on SM leand back in my office chair! :-)

    I use big fonts an all my sites and will try 16 next time!

    0
  46. 107

    This article was great because it made me think about this issue. I might not be opting for 16px, but I don’t think we are really discussing a “rule” here, more a “guide”. I believe you can justify different font sizes based on your website and audience, but if you haven’t considered the font size in this way you have missed an important step in the design.

    It has certainly made me think about opting for larger font sizes than I am used to using, which I will experiment with – so thank you for the article.

    1
  47. 108

    +1px/year is my rule of thumb.

    We need to keep increasing the font size, true. I did enjoy reading the article, and it was a better feeling reading text than it usualy is.

    However, I would settle at 13-15px and provide a visualy clear way for users to increase it. Otherwise, clientwork might get realy complicated. :)

    0
  48. 109
  49. 110

    “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.”

    For a medium that’s as interactive and visual as the internet, I found this to be really disheartening. There are many ways of conveying message and what people should do in ways other than just plain text, and usually in combinations of text, video, imagery, interaction, etc. To say it’s only done through text is shortchanging some of the best assets of the medium we choose to work with.

    3
  50. 111

    I much prefer small text to big, and as a result often find myself skipping headers (not great when you are proofreading). I find 9-10 points optimum for reading. I am very short sighted so it may be that my glasses are having an effect.

    Large text is horrible for scanning, I imagine because the text takes up more space and your eyes cannot take it in all at once.

    If large text is the way things are going to go, roll on 40 – only 11 years to go!

    2
  51. 112

    Very nice article! I’ve switched to using an 18px standard lately. 16px if the font has a larger x-height. I’ve worn glasses for 10 years now, and I just don’t know why anyone would want to strain their eyes playing around with some tiny font.

    0
  52. 113

    Viktors Rotanovs

    October 7, 2011 5:08 am

    MacBook Airs have 135dpi and 128dpi displays. Using smaller fonts creates very real problems for MBA owners. Zooming isn’t the best solution: pinch-to-zoom doesn’t reflow the page, and Ctrl-+ breaks many interface elements (buttons, etc).

    0
  53. 114

    I agree that we should all be paying greater attention to usability/readability. And I agree that 12 pixels on a high pixel density monitor is getting to look a little small.

    What I do not agree with is your facile linking of small text with loss of revenue. Lots of definitive stats presented on readability and visual acuity, zero on how readability hits conversion.

    If you tell me I’m losing money with small text, I expect to hear something more than vague insinuations that people *must* be turning away in droves from my otherwise awesome site because it’s in 14px body text.

    Gain points for advocating readability/accessibility. Lose points for failing to prove your central claim, which is that small fonts are a “costly mistake.”

    Finally: I agree that your article was actually a little hard to read. Column too narrow for your type size.

    2
  54. 115

    Very interesting article indeed and an enjoyable read but I don’t think a 1em font size is meant to work in every case.

    Bigger font size is often associated with book for small children and/or catering for the age/disability and depending on the audience that you are trying to reach this could actually be off-putting and costing you sales.

    0
  55. 117

    i totally agree with the author.
    i just had a client who asked to design his site with a 11px basis. i hated it, won’t even show in my portfolio.
    i’m sticking with the 100e2r (100% easy to read) stuff and it’s font sizes are sort of huge and i love them.
    and i’m surprised how many people here took their time just to bitch about petty stuff .

    -1
  56. 118

    Something that the http://largefontcoalition.org/ has been rallying for for years! (Actually, it’s our only platform.)

    -1
  57. 119

    I was reading this in Google Reader that has font-size set to 90% (about 13px).

    When I reached the end and saw you saying “this is written in 19px”, I just had to click through the website and see for myself. Indeed, much better.

    I always tend to constantly skip & search for what interests me in the body copy and this always results in eye strain. I want to read fast and font size is keeping me back.

    It was a pleasure writing this comment in 22px, thanks for the eye-opener (pun intended)

    -1
  58. 120

    I for one hate small body text and I am 19. So much so, in fact, that I used 20 px body copy for my last design. Maybe a little excessive but I felt it worked in the context I used it. Another point to be made is increased resolution; the fact that many smaller monitors are rocking 1900 x 1200 resolutions that make everything appears significantly smaller.

    1
  59. 121

    The trick you used at the end is pretty clever, but completely irrelevant. After reading an 18px font for 3-5 minutes, of course 12px will seem tiny and hard to read. But using 16px fonts as a general rule is simply not feasible for every scenario – screen real estate is limited, and when you need to get your user’s attention with the content ‘above the fold’, you can’t afford to use 16px fonts. Even Amazon (with 100s of millions of users) use 12px, and 16px only for headings.
    Perhaps in a blog, with lots of body text, larger text might make the users more relaxed while reading the article – in that case, I would agree with you.

    1
  60. 123

    Hm. I actually found this article very difficult to read and had to zoom out to read comfortably. These font sizes are obnoxiously big to me, and I don’t think it’s just what I’m used to — the footer text was a welcome relief to my eyes. Maybe it’s because I’m young (mid-twenties) or maybe I’m just a special case.

    I think choice of type size is largely dependent on audience. Next time I design a site aimed at middle-aged customers, I will remember this article. If I’m designing for people in my own age group, however, I’ll stick to 13 – 14 pt.

    0
  61. 124

    I’d like to mention. Besides font-size, line-length is important as well – if a line is to long readers will have a hard time to focus if is to short the eye hat to travel to much. A good length is something between 50 and 70 characters per line (about 12 words).

    0
    • 125

      D Bnonn Tennant, Information Highwayman

      October 9, 2011 3:09 pm

      Indeed. I’d like to emphasize this, since a few people have said the narrow measure of this article made it hard for them to read. I set the measure at around 60 characters per line (depending on other factors). To the best of my knowledge, that is a nearly ideal measure for readability, with decades of research to corroborate it.

      -1
  62. 126

    are the comments 16pt as well?

    0
  63. 127

    Plz read Olivers article again before quoting stuff he didnt wrote and didnt mean.

    Next thing is, you cannot say 11-15px costs your client money. It may be true in some cases, and others it dont. It just depends and its the designers job is to know that. You obviously dont know it and repeat others ppl opinions you didnt unterstand.

    2
    • 128

      D Bnonn Tennant, Information Highwayman

      October 9, 2011 3:11 pm

      Hi Markus, please could you point out what I quoted that Oliver did not in fact say?

      I am always careful to check my sources, so if you believe I have incorrectly attributed a comment to him, then I want to correct it.

      -1
  64. 129

    With the variation in screen resolutions these day I find it hard to that this kind of research on board.

    Lets look at it like this:

    I have a laptop at home, 15.6″ display running at 1920×1080 = a pixel density of 141ppi

    My wife has a laptop, again 15.6″ display but at 1366×768 = pixel density of 100ppi

    So assuming the default dpi is set in the OS on both machines, my wife’s laptop will display browser text 40% larger than on my own laptop simply down to the resolution.

    Resolution = massive factor in readability for text on screen

    These kinds of articles can only be taken as a guidance, there are too many factors to consider to come to a single conclusion that can apply to all

    16px on my laptop looks OK, bigger than I’m used to, but on my wife’s machine is actually difficult to read, it is all subjective, everyone has a different comfortable reading size because of their respective screen sizes and resolution.

    9
    • 130

      Agree.

      Let’s just the content, specified target audience, design direction & assets (fonts & necessary elements) “be the pilot”. And tell the machine to do the spoiling services.

      Also, after the “use black-on-white text” so called-movement, fixed-vs-responsive web grids ideas, eye candy vs minimum image usage suggestions, and-the bla-bla-bla-tra-la-la of:

      “let’s make all future websites looked just like plain Microsoft Words documents, so we can all go to sleep already, please?” articles.. and now, this??! 16px for body text?? Oh man.

      Truly.. very elderly thoughts :-)

      I have a simpler idea, if (elders’) readability is the case… let’s make a public vote, so all browsers make their built-in zoom (function) button BIGGER somewhere on their next update… case closed!

      (FYI: I’m 31, and I’m still enjoying 10-12px body text IF (and only IF) a site’s content is WORTH to read & visually well designed)

      2
  65. 131

    I agree (with a caveat). I believe designers have missed the mark on designing for readability / usability. It is hard for them to break out of the “small is tasteful” mindset. Now for the caveat – at my resolution 16 px look too big . . . I would set the minimum at 14px.

    -1
  66. 132

    I totally agree with you. I never make my body copy smaller than 16 pixels. I find it to be the perfect size for an easy to read copy.

    -1
  67. 133

    I understand the point, but this article is absolutely unreadable in the large font…and I’m over 40. The bright red makes it more painful, and if the point was readability, it’s lost in this presentation. I’m all for usability and accessibility, but this was a terrible way to present the argument.

    5
  68. 135

    This text (and most of the comments) do not make any sense to me at all. I thought we were way past the age where we had to hardcode elements in *pixels*!

    Monitors have different physical dimensions and screen resolutions, so all this talk of “pixels” is irrelevant.

    0
    • 136

      D Bnonn Tennant, Information Highwayman

      October 9, 2011 3:17 pm

      Stephen, if only operating systems correctly identified monitor ppi and adjusted text display appropriately, you’d be right. Then we could set body copy at 12pt and rest assured that it would display the same size for people on iPhones and people on 30″ displays.

      Unfortunately we don’t live in that world, so we have to make do with rough-and-dirty guidelines instead.

      0
  69. 137

    “At age 40, only half the light gets through to the retina as it did at age 20. For 60-year-olds, it’s just 20%.”

    So you saying that a 40 year old see things 50% darker
    and you reckon to a 60 year old things appear 80% darker

    you have medical proof of these “facts”

    Hmmmm….should I laugh now or later

    4
    • 138

      Laugh now. As you get older, you won’t find it so funny.

      This article should be taken in the spirit it is offered which is simply asking you to consider how small is too small.

      Fact: Our vision deteriorates over the course of our lives and these changes need to be consider by designers, not brushed aside.

      -1
    • 139

      D Bnonn Tennant, Information Highwayman

      October 9, 2011 3:19 pm

      Baz, I cited a source for this fact. I believe the source is reputable and accurate.

      If you think it’s wrong, perhaps you could provide a reason other than your mere incredulity?

      Since the brain is remarkably good at signal processing, and can easily compensate for a lot of degradation (especially if it happens gradually), I’m not really sure what to make of your comment.

      1
  70. 140

    I think people need to stop thinking about type size in pixels.

    As has been pointed out “16px” may be perfect for some typefaces but for many it’s way too small, or too large.

    The message in this post remains true but there’s more to it. Also consider the measure (IE how many words per line. “16px” is not always appropriate in, for example, a sidebar). Don’t forget the leading and most importantly the target audience.

    For me, there’s no excuse not to be setting our type in ems these days.

    0
    • 141

      D Bnonn Tennant, Information Highwayman

      October 7, 2011 2:06 pm

      Good comment, thanks James. A lot of people are taking my article as an ultimatum, which is understandable, but my concern is to get them to justify their font size decisions with facts and logic, rather than just base them on their gut.

      I still use px for setting font sizes because I find it a real pain in the ass to use ems with a decent vertical grid.

      0
      • 142

        Hehe, it does indeed involve a few trips to the calculator and back. But it becomes second nature once you’re used to it. I can tell you how to create many pixel values in ems from a base of ~16px!

        *sad*

        0
  71. 143

    Doesn’t your screen/print comparison imply we should be using *point* sizes for text, not pixels? On smaller and larger screens with different DPI pixel sizes will all be different, whereas point sizes will be the same (e.g. 12/72 of an inch).

    0
    • 144

      D Bnonn Tennant, Information Highwayman

      October 7, 2011 2:07 pm

      Hey Scott, that’s definitely a point worth considering. Especially as screen resolutions become wildly more disparate, I think points do make sense. Traditionally, designers (including myself) have resisted them because they’re not really appropriate to the pixel-based medium of the web. I wonder if that needs to be re-evaluated.

      0
    • 145

      D Bnonn Tennant, Information Highwayman

      October 9, 2011 3:29 pm

      Hi again Scott, further research shows that while this should be true, unfortunately it ain’t.

      12pt on a 15″ screen is significantly smaller than 12pt on a 23″ screen.

      The reason: operating systems don’t correctly identify the ppi of the displays they’re attached to. In fact, from what I’ve seen, pretty much every web-capable device created since 1995 is “hard coded” at 96 ppi—actual display resolution and size be damned.

      0
  72. 146

    The credibility of this entire article was completely lost when I scrolled down and saw the author dressed like a character from the Goonies.

    0
  73. 147

    I habitually enlarge just about everything I read online. I’m still young, but 16px is on the small end of my “comfortable reading size,” since I see no point in ruining my eyes for something I can change quickly.

    I’ve been using larger body text in my designs from the start, because if I don’t want to squint, why would anyone else?

    0
  74. 148

    Interesting read, even if you may not agree with the arguments put forth, the comparisons to print font sizes are informative.

    0
  75. 149

    It’s particularly charming that he writes an entire post about user-oriented design and making sure your users can see and read your content, on a page that has a huge blank bar on the left that pushes the content partially outside my window AND THEN also disables my horizontal scrollbar. I suppose this is technically Smashing’s fault, of course.

    2
  76. 150

    Thank you for the article, and the research. As both a graphic designer, artist, and intellectual I often skip over completely a web site if it has illegible type, regardless of the reason, if I can’t read it you have lost me. And that for me is the bottom line. Assuming that a web site can afford to loose customers (that is their primary purpose, information and sales of some sort) is simply an indication of ignorance. As a fifty something, interested in all manner of information, I am a little baffled by the comments that it is alright to exclude me and my reading needs because I don’t fall into your supposed demographic. I might be buying for my grandchildren, what then?

    -1
  77. 151

    I’m 56, keep my monitors at 32″ from my eyes, need significant correction from my glasses, have mild cataracts, and still prefer 12 point on screen. No neck craning here. But if your vision is typical, then I can see your point.

    1
  78. 152

    What a fantastic article! I have often felt that using the bottom end of the font size safety zone if you like (10-16) is due to needing to cram lots of unimportant copy into a small space.

    -2
  79. 153
  80. 154

    Speed limit: 60mph for ALL roads.
    Anything less is a costly mistake.

    1
    • 155

      D Bnonn Tennant, Information Highwayman

      October 7, 2011 2:14 pm

      Howdy Dingle. Two things:

      1. Could you explain the relevant analogies between font size and car velocity?

      2. Since the article explicitly says 16 pixels for body copy wouldn’t a better analogy (assuming there is one at all) be 60 mph for all highways?

      0
  81. 156

    You make a very good point. I can see why this works. Although on the smaller paragraph – if you set the line height correctly it isn’t as hard to read (still not as good as the 16px)

    0
  82. 157

    I liked the post and wish the clients agree with this.

    Unfortunately, in my experience so far, having worked with big companies (and especially the ones involved in kids entertainment, which usually like things being BIG), clients want to fit so much content ‘above the fold’ that using a 16pt font would be impossible. Let’s not forget MPUs and various ads, which need to be in a specific position…

    0
  83. 158

    A well written and reasoned argument, not to mention something that should have been said a long time ago.

    Thank you.

    -1
  84. 159

    I am a web designer and my eyes are not so great. Honestly I use a 12pixel font size for almost every single website I make.
    But while reading your blog post, My eyes were more at ease. As soon as I read the author details, I felt a strain in my eyes.

    Most of my clients would not like me to use a large font, but am sure going to use them on my own sites from now on.

    1
    • 160

      Harish, you will need to make sites at 19px, not 16px if you want to “enjoy” the effect the post had on your reading comfort.

      0
  85. 161

    Lets not forget that to maintain credibility in a product, the design (in the web page) must still remain aesthetically pleasing.

    Aesthetics are a large part of usability. (but, yes. I found this article very easy to read and agree with the 16px type).

    *dislike the top nav

    0
  86. 162

    I’m a very long-sighted web designer and had to lean backwards from the screen in order to read the majority of this article, so from a personal stance, I disagree. However, my own website alternates between 12px and 14px font sizes, which sits nicely in the middle of the spectrum.
    I do agree that large fonts are marginally better than the ridiculous 8 and 10px font sizes that became fashionable in the recent years, it’s a move in the right direction.

    0
  87. 163

    Why on Earth are you giving typeface sizes in PIXELS? One of my laptops has a 98 PPI screen. Another has a 135 PPI screen. Do you think 16px on these two screens is even remotely similar? No.

    Font sizes should be done in points, just like typesetting.

    -2
    • 164

      D Bnonn Tennant, Information Highwayman

      October 7, 2011 2:16 pm

      Mackenzie, this is something I’m researching at the moment, but my initial reaction is that I’m inclined to agree.

      That said, designers have traditionally resisted using a print-based sizing system for a pixel-based format; hence my focus on pixels.

      0
  88. 165

    Patrick Samphire

    October 7, 2011 8:07 am

    One of the things that has come up several times in the comments but which a lot of people aren’t really taking on board is that, these days, there is an awful lot more variation in displays. Most of those older websites that use 10 – 11px font size were designed when most of us were using low-resolution displays. 10 px looked pretty big on standard monitors less than 10 years ago. Hell, probably 5 years ago. Now, of course, on tablets or phones or monitors with high pixel density, they look terrible.

    What this variation means, of course, is that you either have to know that the vast majority of your visitors have a limited set of display devices, or you need to use some clever media queries to adapt font sizes (e.g., increase the font size for common tablet or phone resolutions, or for very big screens). It’s going to become increasingly difficult to design something that looks great on my grandma’s old monitor and on a retina display if you choose a single design and font size for all of them.

    -1
  89. 166

    I’m an advocate for larger font sizes as well as more white space. I have seen some studies that suggest using some variability to impact readability, cognition and retention. For instance at times it may be helpful to have a small font in order to force the user to focus on something that requires understanding or retention. The difference between the small font size and the surrounding font size draws attention and the small font size makes the user focus harder and take more time to read/understand the material.

    I think one unintended side effect of large font size is also a reduction in usable space. This can constrain content authors to be more concise. Constraint breeds creativity.

    I have to agree with some of the other comments here about the choice of style detracting from the overall message of the article. The red, drop caps, serif font, shadow, etc., shock the user more so than the size of the text. I would have left the default styling in place and only adjusted the font size itself. This would have given the reader an easier model for comparison against other similar pages.

    Alex Poole has a good post about legibility of serif versus sans serif fonts @ alexpoole.info/which-are-more-legible-serif-or-sans-serif-typefaces.

    Viget is doing some studies on line length and legibility @ readability.viget.com

    And I really like Joe Clarks commentary on some of the studies regarding typography, line length and readability @ blog.fawny.org/2005/09/21/measures/

    0
    • 167

      D Bnonn Tennant, Information Highwayman

      October 7, 2011 2:18 pm

      Thanks; I appreciate you sharing those resources. And no hard feelings about not liking my design ;)

      1
  90. 168

    I think it depends on context. 16px wouldn’t work for displaying, say, the homepage of the nytimes, but it makes sense for an individual article.

    0
    • 169

      In actuality – the front (home) page of especially a new site is designed to draw readers in to reading the full article. That’s why headlines and first paragraphs are nearly always larger in size. Our front pages should be the MOST easily scanable of anything.

      0
      • 170

        The New York Times doesn’t match those criteria, though. It’s not a new site for the vast majority of its readers. They know what it is, and like, say, the BBC news website, they want to scan for interesting content.

        0
  91. 171

    I agree with using somewhat larger fonts + I focus on varying the sizing between headers, photos and other design elements to keep the eyes interested. I don’t think anybody really wants to read copious amounts of tiny copy, I know I don’t. Looking at the pages in different resolutions and zoom modes when designing helps me arrive at the best size to use for a particular typeface. Admittedly, this font is a bit large, but I suppose maybe the author is merely pushing his point…which I believe is valid.

    0
  92. 172

    Completely agree. I have been inching up the font size on sites I design and both clients and visitors are typically very appreciative. And though my eyesight is just fine (even though I’m 40, ha) I still find there are websites with excellent content I avoid reading just because the type is so small. And I’m a web developer! I know full well I could ctrl-+ the type up to legibility but it pisses me off that I have to, so I avoid the sites altogether.

    0
  93. 173

    I find your subtitles font and the paragraph introduction font incredibly distracting.

    0
  94. 174

    Typo alert: under second photo you wrote: 12 INCH text?

    -1
  95. 175

    It’s so true that most users do not know how to increase the font size or zoom a web page. Make the site enjoyable from the start and you won’t need to rely on browser features you hope your audience is aware of. I’ve noticed that as I get older my designs and layouts are changing. More negative white space, narrow columns for body copy, brighter graphics, and yes larger font sizes. When I first started designing, small font sizes were the hotness, now those small font sizes can create a hot mess…

    Over the years I’ve also become more focused on the user experience and not just the design. I often say “You can design the most beautiful thing in the world, but if no one is there to experience it, who cares?”. So I totally agree with the statement “It is about what users want and what will best achieve our client’s goals.”

    Using larger font sizes will place more emphasis on typography and layout which should make for some interesting new trends (I hope!). Great article!

    0
  96. 176

    im confusing. good point :) very good

    -2
  97. 177

    Excellent points. Equally as stupid as too small of font size is: putting the text in a narrow ribbon down the middle of a full sized screen. On the screen I’m viewing this on I have 2/3rd’s of it white space! (60%). What a needless waste! To me, that’s the REAL next “bleeding-edge” that web developers MUST be addressing. Lots more wasted space there than in type size – although even I, more and more, need to use the “zoom” feature the past 12 months; and it’s especially true on development sites.

    0
  98. 178

    Great post, good points, but why does this post look so different? Isn’t familiarity a big part of legibility, esp on the web? By changing the format you’ve asked me to relearn something. Also, sup with the line-heights? A little shallow, no?

    0
  99. 179

    I read the entire text… your absolutely right :-)

    0
  100. 180

    This argument doesn’t really matter IMO.

    How Users Read on the Web:
    They don’t.
    —Web usability expert Jakob Nielsen

    -1
  101. 181

    These drop shadows are killing me.

    1
  102. 182

    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
  103. 183

    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
  104. 184

    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
  105. 185

    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
  106. 186

    “#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
  107. 187

    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
    • 188

      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
  108. 189

    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
  109. 190

    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
  110. 191

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

    -2
  111. 192

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

    1
    • 193

      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
      • 194

        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
  112. 195

    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
    • 196

      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
    • 197

      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
      • 198

        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
  113. 199

    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
  114. 200

    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
    • 201

      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
    • 202

      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
  115. 203

    “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
  116. 204

    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
  117. 205

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

    1
  118. 206

    …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
    • 207

      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
      • 208

        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
  119. 211

    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
  120. 212

    “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
  121. 213

    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
  122. 214

    I think the comment font size is perfect.

    4
  123. 215

    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
    • 216

      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
  124. 217

    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
  125. 218

    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
  126. 219

    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
    • 220

      D Bnonn Tennant, Information Highwayman

      October 7, 2011 2:35 pm

      A good topic for a followup article perhaps Tim.

      1
    • 221

      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
      • 222

        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
  127. 223

    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
  128. 224

    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
  129. 225

    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
  130. 226

    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
  131. 227

    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
  132. 228

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

    0
  133. 229

    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
  134. 230

    “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
  135. 231

    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
  136. 232

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

    -2
  137. 233

    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
  138. 234

    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
  139. 235

    Why does this article look so bad?

    4
  140. 236

    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
  141. 237

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

    0
  142. 238

    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
  143. 239

    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
  144. 240

    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
    • 241

      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
      • 242

        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
        • 243

          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
  145. 244

    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
  146. 245

    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
  147. 246

    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
  148. 247

    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
    • 248

      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
      • 249

        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
        • 250

          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
      • 251

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

        0
  149. 252

    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
  150. 253

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

    1
  151. 254

    And one of the BIG mistakes nowadays is using custom fonts that don’t have decent hinting, resulting in the need to increase the font-size to disproportionate sizes to assure readability. Seriously, a properly hinted font works ok from 12px to 14px. I personally like 13px on a 1440×900 19″ screen and on 1280×800 12″ laptop screens.

    Of course that given that pixel density is increasing quite a bit lately and OSs may not compensate for that well enough when displaying text. You have a good point, though I don’t agree with 16px, 14px is more than enough and pushing it towards big already. Again, use a properly hinted font which doesn’t require such huge font sizes for good readability and look at different OSs and hardware configurations.

    0
  152. 255

    I found your excellent article while researching for setting up my first website for a retired readership. Perfect advice for a newbie. Thanks so much!

    **I** will leave a website that has too-small print; so, yes, it’s costing them. If I don’t read, I won’t stay around to buy or become loyal, and I won’t recommend them; so it might be costing them twice… at least.

    I was thrilled to learn how to change the font size; so helpful for emergencies; but I really don’t want “one more thing to do”. It slows me down.

    I’ve notice that since about 2009, I get physically nauseous when reading Times New Roman (serif) font, in any size, in print or on screen. It feels “old school”, staid, and rigid; that doesn’t resonate with me, anymore, and I leave.

    When I have REALLY, REALLY wanted to read dinky-print or Times New Roman content, I have copied and pasted whole articles to an E-mail or Word document so I could enlarge the font size or change the font. No fun.

    -1
  153. 256

    While usability studies do show that 16px is a better size for reading on screens, the logic in this article is very poor, and does not consider all sorts of other things. For one, line length should be 12-15 words generally. in this article it is far shorter. that is why it is hard to read. It also ignores scrolling as a potential usability issue. As a web designer I identify other issues too. Websites are generally built at 960px wide or less. With a large point size and 12-15 point size, the width of this column is too large. Its impossible to have a proper 2 column design. images at the full column width end up too tall, requiring even more scrolling. Just my 2c

    1
  154. 257

    I think the standard resolution for computer displays is considered to be 72-74 pixels per inch. My MacBook Pro is 133 ppi. My iPhone’s “retina” display is over 300 ppi.

    If you set the text based in pixels, it will vary greatly. If you could set it based on points or even inches/centimeters and know that it would be rendered with the display ppi taken into consideration so that the physical size is consistent, you would be much better off.

    Not sure if that’s even possible with current implementations.

    Anyway, all this talk of setting type by the number of pixels is kind of silly since the size and shape of pixels vary so greatly. We need a system that renders relatively before we can go around prescribing pixel sizes. Until then, some assumptions must be made about the content not only being capable of being dynamically altered, but also that the users will have some idea how to do so.

    PS—I read this re-formatted by Instapaper on my iPhone because everything was in 2 point type. …which was readable as long as the phone was three inches from my face :p

    1
  155. 258

    Guilherme Almeida

    October 7, 2011 10:24 pm

    I believe there is a crucial flaw on this article. Seems like if you set font size on 16px all readbility issues will be solved. It is so untrue. There are so many other things to take into consideration about readability other than font size. As mentioned in the article, x-height matters. You can pick a font that at 16px high looks like 12px high, and another can be 14px high and look like 16px. Line height is another factor. This article’s subheading is so messy with the line height seemingly of less than 1.0 em, one line merging with each other, it makes harder to read, even if it has 36px. Line lenght too. According to The Elements of Typographic Style, a satisfactory line lenght is 45 to 75 characters wide. Yet it’s so common to find lines with more than 150 characters (see Slashdot). Contrast also matters, colors and font weight wise. It is much more complex than just setting a certain font size.

    1
  156. 259

    I would rather read smaller text with a larger line height than larger text with a tiny line height. As they say “It’s not the size that counts”. Yes body text on the web isn’t designed as well as it could be but there are technological restrictions. It’s up to the designer to choose a suitable font, colour and line height, AS WELL as size to make the text easy to read for their target demographic.
    Also I find it hard to believe a user would leave the site based purely on a couple of pixels in font height. I would like to see the study that produced the results of ‘Fact: Most Web Users Hate The “Normal” Font Size’.

    2
  157. 260

    I agree with you. I’m thinking about increasing the font size of my current work.

    I like Forbes new design with big text sizes.

    0
  158. 261

    I think you are right…
    Just because we can fit 30 to 40 words to a line doesn’t mean we should.
    I do believe that we should consider the old print setting rules of font and line height etc. as well.
    I think I will push for bigger font sizes from clients

    -1
  159. 262

    Excellent, well written article. 60 year olds only receive 20% of the light as 20 year olds – that a sobering thought. I’m 62, so in 20 years time I’ll be groping around like a deaf bat!

    Our web site (www.HospitalRegisters.com) is mainly viewed by 30 to 50 year old corporate clients, probably using smaller monitors than I design on, so you message about font sizes is very appropriate.

    0
  160. 263

    After reading this article, I changed the base font size for my web development site at http://www.sacwebdev.com to 1em, and I’m quite pleased with the increased readability. Another tool in my arsenal to help my clients achieve their goals! Thanks Bnonn… this has been very, very helpful.

    0
  161. 264

    Well written! One more proof that webdesign is more craft than arts.

    -1
    • 265

      Not sure if trolling or just stupid. (Not seriously calling you stupid, just a meme)

      Web design is much more of an art than craft. One must understand the most basic principles of art such as line, shape, color, texture, and principles of design like balance, dominace, rhythm, etc.

      Web design requires skills that one can’t just pick up and start immediately. It takes time and an understanding of these principles in order to become a professional. My girlfriend does crafts; she knits, sews, and crochets. I design websites – still not a craft, and not necessarily art, but much more related to it than crafts are.

      0
  162. 266

    I know there are already a billion comments here, but I feel I must add something myself.

    A design instructor of mine told me that 12pt was slightly too big for body text (in print of course), and that he prefers to use 10pt or 11pt. That matches up roughly to 14px or 15px which I find to be just the perfect size for readability aesthetics.

    Just my two cents.

    -1
  163. 267

    I’m extremely annoyed at how much scrolling I needed to do to read this article…

    It may be easier when reading large amounts of copy once the user is interested in a story.. but could you image trying to navigate around a home page that needs to capture large amounts of content such as nhl.com, you’d be lost amidst all the large text.

    Only way I could see it work is giving users the option to make the text larger… at the same time, I don’t think it’s necessary as resolution options do exist on computers. People just need to set their resolution to what suits their needs.

    -1
  164. 268

    Way cool! I’m totally pleased to find someone of my opinion about type size. I just finished 2 new websites with themes from Themeforest and moved the text pt size up to 16, for readability. I didn’t know the scientific reasons, just the aesthetic and perception that I “felt” were right. Thanks !

    -1
    • 269

      Martin Silvertant

      October 9, 2011 6:48 pm

      Then do use the correct units. 16pt is too large. 16px is quite the max.

      It’s best to set the font size to 16px and base all text sizes on that value by using the em unit.

      0
  165. 270

    For christ sake, use em… the world is mobile now.

    3
  166. 271

    Mine is 16px;

    0
  167. 272

    well done! i’m changing the size on my blog asap

    -1
  168. 273

    Patricia Fieldwalker

    October 8, 2011 10:21 am

    Took far too long to read and I am well over your 40+ group…felt like I was back reading night night stories to my preschoolers…must be a happy medium and this errs on the side of “too much of a good thing”.

    1
  169. 274

    Funny, I think this is the first article I’ve read in a good couple of months. And I mean read, not scan. I’m not sure if it’s the font or the topic that kept me going until the end, but one thing’s for sure: for the next couple of websites I will make 3 versions (like media queries) for text, allow users to switch between them (with some clear call to action buttons) and see which resolutions is used the most.

    I am also thinking about randomly selecting one of the three (small – 12, normal – 16, large – 20) and see which one users drop most and which one users tend to go to the most.

    -1
  170. 275

    I have not read all the comments so maybe someone already pointed at this… I am experimenting with some flexible layouts and it occurred to me it is strange that you can make flexible images and boxes, but not flexible text sizes.
    Because it all depends on screen size of course. The 14px text right above this text box I am typing this is perfect readable on my home 20″ iMac. My eyes are 90 cm (35,4″) from the screen. And yes: I am ‘old’ (45), short-sighted and tired (at the moment).

    0
  171. 276

    I find this very interesting. I did not read everything of this article but had a quick scan of it and looked at the pictures.

    As I am currently working on a slightly new version of my portfolio I just gave it a try and set the font size to 16. It was much easier to read and I will stick to it.

    I think basically this 12px stuff is fixed in the head such as brushing your teeth at the end of the day before you go to bed.

    So anyways, thanks for this is trying to open the minds a little bit here : ) Great work.

    0
  172. 277

    As a few have mentioned before, a person with a 15″ 1920×XXX monitor is going to have a different experience than someone with a 21″ desktop monitor @ 1920 x XXXX.

    At the moment, I feel comfortable serving up an initial 13-14px san-serif for body text. 16px seems a bit too extreme at this time.

    On the other end of the spectrum, facebook needs a bump in font size. Style-wise, when compared to Google+, it feels small and cramped.

    0
  173. 278

    Sorry, but this article doesn’t take into account PPI of displays – a variable which differs a fair bit from computer to computer. My 13″ Macbook Air is far denser than my 24″ Apple Cinema Display. 16px on my ACD looks big, 16px on my MBA looks quite small.

    So sorry, it’s all relative. Sure 16px is bigger than 12px on ALL displays, but saying 16px is the same size as printed text is pretty vague when a screen’s PPI can vary by upwards of 40 PPI or 30 – 40%.

    2
  174. 279

    I’m over the age of 40, wear glasses to correct farsightedness and astigmatism. I feel that there are limits on both ends. I agree with some that the body copy of this sight is too large. Even at the 24 inch distance I sit there is too much back and forth with the eye’s. And, yes the footer copy is too small, I had to lean in to read.

    But, has anyone noticed the other font size on this page? The comment thread is actually very comfortable for me to read which seems to be the average font size I see on the web. It’s the one I like to design with…

    1
  175. 280

    This was a good read, I think what it lacked was context though. The argument made at the start is that in order to support the business needs of your clients you HAVE TO INCREASE SIZE OF TEXT. It is too simplistic. It ignores user personas, focuses too heavily on age demographics and accessibility, and doesn’t speak to the fundamental value of scanning. The average business site on the web sells MULTIPLE PRODUCTS. If you’re writing a blog post maybe this makes sense, but if you’re arguing for improving SALES then how easily the page is read is less important than how easily it is scanned. Only a certain user persona will actually care to read detail, if you’re trying to generate revenue you need to appeal to the masses more often than not.

    This doesn’t invalidate this post, it’s definitely a good thing to consider and would certainly apply wholesale once in a while – but it falls short by making too bold a business statement upfront.

    5
  176. 281

    In some cases I agree with this article, the studies were interesting, and the fact that you pointed out some of the top theme sites are still using very small fonts. I believe that 12px is way to small for a website, I also agree that 16px is a very nice size for font, in some ways.

    I feel that not every website should be set at 16px. It all depends on length of content, and placement of content, I do believe some more important factors for readability would be line-height, as having your lines too close together can easily get the reader lost.

    Letter spacing is great for fonts like Times, as pointed out in some comments there are a lot of accents in this font that are not needed.

    And font use, while having “normal sized” font for body is good and easy to read, an input box where the user is proofing what they are actually typing having a larger than normal font is a better solution.

    In conclusion this article did exactly what it was intended to do, while we don’t all agree with the 16px font theory, we are all re-thinking our design habits and I know next time I work on a website I will think more about font size and readability. Nice work!

    0
  177. 282

    I don’t think I’d use Facebook, BBC, or CNN if they had 16px body font size.

    Interesting point of view. Thanks for the article.

    3
  178. 283

    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.

    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.

    If you have a startup landing page with lots of copy on it, regardless of font-size…you’ve already failed.

    4
  179. 284

    I like that you back your point with supporting facts. This is definitely worth consideration. Based on one’s primary target audience Font Size is always an area of much deliberation.

    -2
  180. 285

    People don’t read anymore.

    They are facebook people.

    The world goes mobile.

    Chat & Status update.

    That’s all now.

    3
  181. 286

    David van Ballegooijen

    October 9, 2011 1:03 am

    I can’t agree either.. I’ve experimented recently with bodytext fontsizes for our new upcoming website and 14px (arial) is the best choice for us. 15 or 16 px looked good on my 27″ iMac but even on our 24″ iMacs it’s already too big. On laptops it’s even worse and not acceptable imo. On tablets 16 px does read comfortable.

    0
  182. 287

    Wow. Great Article. Congratulations. What I think is that sometimes the text *has* to be small. For example, when we’re making a very professional website, the text simply cannot be large. What do you think?

    -5
  183. 288

    Two things stood out for me.

    1. All browers are 16 pixels by default.
    2. The printed copy compared to on screen.

    Thankfully font sizes have increased over the last few years and designers are no longer “scared” to use a larger and more readable font size.

    -5
  184. 289

    It would make more sense to say 16 points than pixels. Points are absolute units of measurement-1/72 of an inch. Pixels are relative-16 pixels on an iPhone is much smaller than 16 pixels on a 50″ TV.

    -1
  185. 290

    Chatsworth Marketing

    October 9, 2011 5:11 am

    id rather choose pixels

    1
  186. 291

    I develop websites where the audience is predominately older that 40, and many are in their 50′s, 60′s and 70′s… so I did an on the fly change to one of the sites up from 14 to 16px. I think I liked it and it might be very good for many of our readers.

    I think this 19px font is a bit large for me — and I am one who has to squint at the screen on far too many sites. I think I’ll give the 16px a shot.

    1
  187. 292

    There are some really interesting points here, however I feel that in places this is a bit simplistic. Readability as opposed to simple legibility is a more complex construct.

    Good typography is not achieved simply by wanging all body copy to 16px. Other considerations include line lengths, leading (line-height), paragraph spacing and font choice.

    All in though, I think it is good to challenge the prevailing view that 11/12px is the ‘standard’ body copy size.

    0
  188. 293

    Great read , really enjoyed it.

    I will certainly include this on websites I create in the future.

    -1
  189. 294

    Martin Silvertant

    October 9, 2011 6:44 pm

    To me this article doesn’t make much sense. If anything it’s just a reminder to be careful not to use text sizes too small. The 19px used for the article is absolutely absurd, and the very fact that 19px is used while 16px is advocated is amusing. I feel a bit like I’m reading a children’s book.

    The 12px at the end looks quite alright. I tend not to use fonts with a low x-height at smaller than 12px for body text, but for small portions of text 10px could even be fine. I think it’s a good practice to generally stay within 12 to 14px. If you’re heaving trouble reading 14px then the issue is probably with the line length, leading and tracking or your font features a low x-height (such as Garamond).

    I’m not 100% certain about this, but I believe people used to use larger text on the web but now that the screen resolution and font rendering techniques have been improved fonts will render just fine at 12px.

    You compare 16px web text with 12pt print text, which I think is a fair comparison but 12pt is quite big for text in print. It’s good for your thesis but definitely not for a reading book. So, if you take the correct size for print, then it would equal slightly more than 14px in web.

    I honestly also haven’t met any contemporary people who don’t know how to zoom text. It’s being mentioned how to do it so often on the Internet. Besides, is zooming so bad? Then why is it one of the primary features of smartphones? I understand they can’t exactly be compared, but my point is that text size on the web is becoming a very relative value which you can control, anyway. Even if you don’t use em values for text, I think you can still zoom on the text in every modern browser.

    What do people with bad eyesight have to do with how big I render my text? Ever seen books with 14pt text for old people? They don’t exist because there’s no market for it because we have glasses and contact lenses.

    By the way, people can set the minimum font size in their browsers, so even for older people all this really shouldn’t be an issue. That is, if the text is formatted correctly taking the rules of typography and CSS into consideration.

    I’ve been told that type designers and typographers tend to use smaller text, which I think has something to do with being familiar with the textures of type. Nevertheless, people read more text online every day and they’re becoming very familiar with it—even with small type. In some regard it’s actually a very amusing idea that people used to write and read blackletters, and now supposedly we’re having trouble reading a 12px sans serif. I mean, this article is just funny.

    2
  190. 295

    Lots of comments on this article. I wonder if anyone will read them?

    1
  191. 297

    I’ve had my site on 16px for a while now, totally used to it. Definitely a good move!

    0
  192. 298

    I’d argue for one that you shouldn’t be using pixels at all to set your text. Use points or Ems instead. I still often just use xx-small, x-small, small, medium, etc. Also, I find the size of the font you used to be fine, but I recall a general guideline (magazine layout I believe) that states your column width should be as many words wide as your font size. Font size is fine, but it feels too narrow. Using that guideline, the width of the article should accomodate, on average, 19 words. This seems to be about only 12 as is.

    0
  193. 299

    This is a good article, it promotes awareness of the importance of choosing a good font-size with the users in mind.

    As a web developer the main thing to consider is who the main users of the website are going to be and cater for their needs.

    On blog websites I tend to adopt larger fonts, 14 – 16px as it makes content quicker to take in and is easier to read through. The size usually depends on the font used along with the contrast of the font against the background.

    It’s important to remember that content should be made easy to read. Font alone cannot provide this, which is why many companies are now seeking copy strategists.

    0
  194. 300

    I think I missed the bit where it actually proved small text costs money.

    J.

    2
  195. 301

    I think this is a compelling article and has certainly made me even more aware of font size than previsously. I have worked in a number of industry sectors from new born baby websites through to the older generation, I totally agree with tailoring the size to suite who your intended market it. However, having read the article I have now found it can suite all sites not just one sector in particular.

    Great read. Thanks for sharing.

    0
  196. 302

    I really don’t think many people resize the text on their browsers when they are not able to read with a little bit of stress. But I do agree that if it was unreadable or if the user actually wanted to read a complete long article, they would do so.

    0
  197. 303

    16px is fine for copy in small amounts.

    But this page? Butt ugly, and far too much scrolling required.

    Even filling in this feedback form is annoying; big ugly font – yuk! All modern browsers allow re-scaling of the screen with the Ctrl + and Ctrl – keys. Stick to a reasonable font size (12-14px) and ALLOW THE READER TO CHOOSE (after all, you want your readers to have a choice, don’t you?)

    The author seems to forget that minimalism doesn’t work for every scenario, especially e-commerce. It’s FAR more important to make sure that the content is relevant, well-written, and presented in a format that makes it easy to scan. This does not necessarily equate to using a ridiculously large font.

    1
  198. 304

    I am very much over 40 and have all my browsers set permanently to zoom text. However, I think 16px is perhaps overdoing it. When I opened this article I had to go reset my Firefox because it was too big to read comfortably. The result (16 px) was tolerable but not all that comfortable – a lot of paging down involved, which upsets the flow of the argument. I think the comments are in a size that is pretty usable.
    Oh, and those drop caps with the drop shadow? AAAAAAAAGGGGGGHHHHHHH…!

    1
  199. 305

    Have I missed something and has everyone been having an awful time understanding and using websites with 12px text? Bigger type can be a bit helpful but does take up so much space on a page, that’s a real drawback.

    Worse though is using fonts such as Impact, in red with drop caps. It’s snubbed ascenders and descenders, with machine-aesthetic letterforms make it ugly and really hard to read. The colour simply amplifies the issue.

    This feels like an all to familiar case of an on-screen typographer not getting how and why type works.

    0
  200. 306

    Interesting article, but I find Comic Sans just looks perfect regardless of the size :p

    0
  201. 307

    Good points, I will think about this on my next web project, maybe even on my personal site.

    0
  202. 308

    People here fail to understand what this article is all about. Sometimes what we like is not entirely the right thing to do. I don’t understand why he advocates on using 16px while using 19px, however; I think he is in the right path. I quickly moved to change his styling on my browser to convert the font to 16px and immediately it became easy to read and it felt like reading a newspaper at the distance and screen resolution I’m using. I do agree with some folks that the width of the lines is a bit too short as I found myself jumping the lines too quickly. In my personal opinion the font size is dependent on the font itself and what you want to accomplish. He was right to say designers follow other designer’s path and all becomes a trend of acceptance. I think if you follow the trends you can be a good designer, but if you set the trends you are great designer. That in my humble opinion set the difference between us the mean design community and those who are famous making millions every time they lift a finger.

    -1
  203. 309

    Oliver Reichenstein is many talented things, but he’s not a usability expert.

    0
  204. 310

    Woow….

    I never thinked to design a website with 16px as minimum size…

    Actaully, it looks very big… But it’s also true, that you wrote down a really god list of reasons to use 16px instead of 12px.

    Ok, I will try to develop a 16px website.

    1
  205. 311

    I really like this article because I think it’s about time we rethink “standard” font sizes.

    Debate all you want about the minutia of font size being dependent on screen size and resolution, but I think it really boils down to this: screen resolutions are increasing in all devices. Being able to cram more pixels into the same space means that the 12px body copy of yesteryear ‘s 1024×768 15″ laptop monitor will look proportionately smaller in the same monitor rocking 1680×1050 (or more) today.

    Now that I think about it, maybe we’d be better off using a more fluid measurement system like em or percent.

    0
    • 312

      Agreed.

      I relocated and sadly left my 1680×1050 20.5″ desktop for a 1920×1080 15.4″ laptop and there is a notable number of sites that I have to zoom in because they are completely unreadable. As screens grow on density (but not necessarily size) small text sizes are going to become a serious hindrance. Even new smartphones like the Nexus Prime, Samsung S III or HTC Sensation XE show a ridiculously high dpi density on a 4.x” screen, which, if any, will only aggravate the problem in the future.

      I’ve had sight problems in the past and always been fighting against this “design trend” of ridiculously small font sizes. When I (re)designed my blog I struggled to not use a small size and after some testing at 14px finally set it at 15px. Might be interesting to change to 16px, after all it’s the default at every single web browser for a reason.

      Also, as important as the text size is the distribution of the text. I have a small cheatsheet on my corkboard:
      - line height ~= body * 1.5
      - line length / line height ~= 25 to 30
      - 55 to 75 chars per line
      - 10 to 15 words per line

      And lots of whitespace everywhere.

      0
  206. 313

    This is a really helpful (and timely!) post for me. Especially as I’ve been having to keep mobile environments in mind with recent web design work. The one thing I take issue with is the following and similar comments in the article:

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

    It’s just not productive to think of designer preferences and monetary goals as being mutually exclusive. That sort of idea only pushes designers further away from your initial theory by then equating the use of a 16pt font with a result that is automatically not aesthetically pleasing than therefore a design blight.

    There are excellent examples of using large size type (in both web and print) so this idea is merely a good challenge to break a longstanding habit/trend of using slightly illegible fonts so frequently.

    0
  207. 314

    This was a very interesting read, both the article and the comments.

    I can’t say that I agree 100%, meaning that I don’t believe that one size fits all kind of logic.

    Of course we want people to read and understand our copy, but bigger font-size doesn’t necessary means easier to get. Surrounding elements, color contrast, white space etc play a big part.

    Personally I don’t like small font-size, by small I mean 11px, but I believe that depend on the font, 12px-14px content is usually easy and comfortable to read.

    0
  208. 315

    I agree that this font is much easier on my eyes. How about also making the left and right margins smaller so my eyes changes line less often?

    1
  209. 316

    I commend you for trying bring the focus of designing for the web to be the content itself.

    I agree guidelines are generally a good thing, but in this case I’m not convinced a 16px rule could be applied unless you assume the use of a particular font.

    With regards to the comments on making typography responsive to the device it is being viewed on… media queries are your friend.

    0
  210. 317

    Ugly is ugly…haven’t seen that headline font used since, oh, 1980? Lots of good info in the article, but it’s too long by half or more. People will read online if the subject is interesting. Leading (the space between lines) affects readability tremendously…12 pt type with 18 pts leading is easier to read than 12 pt type with 12 pts of leading. As for the line length, shorter is better. The eye begins to get tired at about 36 characters.

    0
  211. 318

    That was great. And, it was easy for a non techie like me to put into action by sharing with my web master, if I dare.
    Most of my customers on-line are middle age woman and it is time to help their eyes as well as help their horses:)
    Yes, I hunched over when I read the bottom piece in 12.
    Thanks to Chad Mandal for tweeting this.

    0
  212. 319

    What about auto zooming the whole page as an alternative to enlarging fonts?

    http://clarkli.wordpress.com/2011/10/10/auto-zooming-browser-for-better-accessibility/

    1
  213. 320

    At last someone else thinks the way I do!! Great article – keep pushing the point. I get very frustrated with small font – and Yes, I am slightly older, but still want to enjoy the web – without feeling tired trying to read small blurb.

    0
  214. 321

    Not that this article needs another comment but you really should have used 16px while making your argument.

    -1
  215. 322

    I wonder how many people use their computer on a desk that allows their eyes to be 28 inches away from their monitor and still use their keyboard and mouse in a comfortable fashion? In the real world, where people’s desks, office and study spaces don’t allow that sort of distance, 16px is too big. At average screen distances, the equivalent would probably be 13-15px.

    0
  216. 323

    Design fail. This page doesn’t have a default page color set.

    -1
  217. 326

    “16 pixels”, at what resolution?

    0
  218. 327

    You certainly make some good points in this article. It was a great read. I don’t exactly agree with you on everything but it is definitely food for thought.

    I found the 19px font size a tad too big. I dropped it down to 16px and found it more acceptable and readable. This being said I am 24 years of age and you did mention that the older you are the less light your eyes let in. So perhaps 16 is the ideal pixel size for me.

    In terms of increasing font size in the browser, I certainly don’t think it is up to the designer to create a site that some how magically is the best for every user. There will always be some give. If someone outside your demographic does happen to come across your site they should be able to use it perfectly regardless of how you built it, but it doesn’t necessarily mean they site should be built for them.

    Anyway, great article :)

    Elliot

    0
  219. 328

    Nice article. question. When you tested this, which screen resolution did you try? I find that at 1024×768 which in the main site I work on is a good 40% of our users 14px, 12 depending of the fonts works well. This is after a user focus group, but after reading this I will test this further.

    0
  220. 329

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

    That statement is so hilariously flawed I don’t know where to begin explaining everything that’s wrong with it.

    4
  221. 330

    Point proven very well, M going to change my portfolio’s font size to 16px or more :)

    0
  222. 331

    What about wikipedia? Text is definitely smaller than 16px but very well readable.

    0
  223. 332

    16px, yeah probably, if the aim for the website is to make it look like a children’s book.

    1
  224. 333

    Interesting discussion and I totally think that 10-12px is just way too small. But personally, I think that 16px is too big .. it actually takes me longer to read a long text sized 16px, versus a size of 14px. I’ll have to move my eyes a lot more, for the same piece of text, when it is so big.

    I guess it differs a lot from person to person if 16 really is the ultimate size (age, vision problems, etc.), but that a text size should be greater than 12px, I think we all agree on.

    Note: I’m 34 and use glasses.

    1
  225. 334

    Your wrong even by your pictures most users now have a widescreen monitor as such web sites are not confined to the space of 1024 by 768,

    As me and most designers of web sites we build a site at 1000 PX wide witch means there is plenty of room to zoom the site and it not break a design,

    What your doing is saying building for Accessibly of all user is bad and building for the minority is good well your wrong build a site to work with zoom (all browser have) and your fine as user will just zoom the site that are having problems reading

    0
  226. 335

    Why not 1em (which usually equates to 16px)? Style relatively to the user’s default browser setting for what they feel is most comfortable.

    Let your design respond to their needs.

    3
  227. 336

    Wouldn’t it depend on the font you are using? There are plenty of fonts that display in different sizes in the same pixels.

    Sorry if this was mentioned in the above comments (not reading all of them)

    0
  228. 337

    Did anyone else experience that the text in the article felt annoyingly big?

    The statement “at 40 only half the light gets through to the retina as it did at age 20″ is bull***.

    And you cant compare fineprint to screen size.

    1
  229. 338

    I still would say, yes! you’ve raised very good points but still can’t be done for all web designs. it’s good in many cases but not all.

    1
  230. 339

    I agree with the spirit of this argument. Right now I’m sitting using two monitors: 17″ and 22″. I’m 57, do webdesign and strategy all day and am ‘most comfortable’ with 16+ fonts. When I retire to my macbook air or iphone for quick busts of personal work or information I’m working with the technology I craved in my 30′s – when my eye-sight was FAR better. When I do mobile designs I also keep the big type or icon idea in mind.

    0
  231. 340

    Article was very good and informative. I’ve already been in the habit of using 16px for font-size – but I always got feedback from clients that the text was too big. I think 16px is a case where usability is losing to trendability.

    And to the other points about ems – I agree that it’s best to use ems – not just for font-size but layout, because everything becomes proportionate to the typography, more or less.

    Oh, the site flowed much better once I set the font size to 16px through Chrome’s developer tool.

    0
  232. 341

    Funny how the rest of this website has smaller fonts and not 16px. Obviously you don’t practise what you preach.

    -1
  233. 342

    “(Command) -” x1

    0
  234. 343

    FACT: using Limelight and Impact tightly tracked in red over white for headline are super hard to read. Kind of weakens your argument right from the start. Pretty funny, the entire article itself was very hard to read.

    0
  235. 344

    I think the difference between usability and familiarity pointed out in previous comments sums up the argument over the article. When I first started reading I was uncomfortable with the size of the font. It was unfamiliar and looked just plain bad. But as I kept reading I got used to it. I leaned back in my chair. I started imagining larger fonts on the website I’m currently working on. The idea grew on me and I’ll probably try it out.

    There are some points on each side for which I would like to add my two cents.

    Zooming: I’m quite young, but still have to zoom in on certain sites to avoid eye strain and headaches. As a college student, I was embarrassed that I needed to zoom. I would imagine that as others grow older and would benefit from zooming, they will feel similarly uncomfortable with this “proof” that their bodies are aging. Zooming may be an admission that we don’t belong on some site, that we aren’t at home there.

    Glasses: Some rather rude commenters said that if an individual has difficulty reading then he or she should get lenses. “If you struggle to read 12px font then you obviously require reading glasses or contact lenses and to read without corrective measures would only be damaging your eyes further!” In my case, my prescription perfectly corrects my near-sightedness, yet there are still times when it hurts to read small font. Probably not 12px, but having vision correction doesn’t mean I have super-eyes.

    Scrolling: Someone mentioned that increased size means increased scrolling, which is bad and hurts the wrist. I totally agree, but luckily read this article on a large screen. On a similar note, another person mentions reading space. If you don’t have room to lean back from the screen, as I did, then a larger font becomes painful to read and the back button looks pretty enticing.

    0
  236. 345

    Great Read!

    0
  237. 346

    So your argument for larger font size is money. Basically your theory is, if the font size is larger people will read more. If people read more, they will spend more time on your site and or buy your products or service.

    You then go on to give evidence as to why this is true. However, all of the evidence you supply is circumstantial at best. Have you done a scientific study to prove your theory true. This would require a website that is currently generating revenue that has 12pt. text. You would then have to modify the text to your recommended 16pt. size and compare revenue for a set period of time. You would also have to take into account the time of year and any special circumstances that might account for the increased revenue.

    It would probably be best to test this on several different sites as well. You would also have to measure if time on the site went up as well as compare bounce rates. Another criteria to measure would be the age of the users. How many users over the age of 40 are buying more or spending more time on the site after the increase in font size?

    So my point is, you can’t just go and say that 16pt text is better because it’s easier to read. And if the text is easier to read, you’ll make more money. That is a very big jump. What about 18pt. type? Will that make me even more money? What about different fonts? Some are easier to read than others. Will the easier ones make me more money?

    In the end, because there is no real evidence to support your claims, this is just your opinion. It’s interesting but still just an opinion.

    2
  238. 347

    Great thoughts! My dad was always criticizing the font-sizes I used when designing sites as a wee young lad back in the days when IE6 and Netscape were cool. I always thought he was just being old and not in tune with the upcoming age of the internet and the websites designed for it…which, at that time were really using a lot of smaller font-sizes to pack more information into smaller spaces for our 15-17″ CRT monitors. Oh how the times have changed my perception of font-sizes used, even though our viewports have increased dramatically as well as the devices we use to surf.

    I very much agree with this article. We use 16px as our font-size:100%; when designing for mobile devices, (phones in particular) and make ems of that base unit.

    1
  239. 348

    Im going to give 1em a go for my next wp theme’s body.

    As far as the readability of this article, I found it rather easy to read sitting back.

    I will never resize text on a website unless the content is very important to me and my goal. Else I would just hit back btn and choose a more readable article.

    I always say less is more and keep it simple stupid. to myself. Your publishing content to the web, it is important that the user recieves the appropiate message, no matter how.

    Thanks for taking the time to write this article, I learned that I like 16px size.

    0
  240. 349

    I’m thirty and now and I find myself time and again hitting Strg + in Opera whenever I want to read a longer news item. 10px was really cool when I was younger, I even went for 9px just to put more content on one screen. Important text deserves space.

    Now I’ll go and try changing the default-templates that I use on posterous and tumblr…

    0
  241. 350

    Completely agree. I’ve been using 15px since about 2008 or 2009 because I had too many complaints from people having trouble reading my websites (at 12px). After I adopted the standard of 15px, I had literally NO complaints. I now use 100% as my default font size, which, as you pointed out, is 16px in modern browsers. Great read and info! Thanks!

    0
  242. 351

    I’m not a fan of the serif fonts when reading online; I find them harder to read.

    I find that font size used for these comments is a perfect size for how I sit at my laptop; the article body is too darned big for me to read comfortably.

    And who the hell uses pixels these days? I thought it was all about the ems… :p

    1
  243. 352

    The line-height should be as important as the font size, and don’t forget ample margins (whitespace). I agree the majority of web pages are hard to read . I am 55 and wear reading glasses but find the text in this article a tad too big for the column width on my 1920×1080 screen. Yes, in addition to font size, line height and margins the length of the line is also important. They all combine to make good typography and thus readability. I think you should have stuck with 16px rather than the 19px for all the reasons I mentioned.

    0
  244. 353

    This is article is a major fail. It barely mentions other factors which are just as important as font size – line height, font selection, contrast, kerning, line length etc. These have just as important a role to play and it is the interplay of each of these variables which make the art of typography such a subtle and difficult art to master.
    Reductive, simplistic and poorly researched.

    2
    • 354
    • 355

      All of those certainly factor into legibility and are what set apart a typographer from a web designer. I think the article is a good start but could easily be refined and expanded upon to include the remaining typographic settings overlooked.

      0
  245. 356

    Sorry, I couldn’t read this article till the end and the reason is awful typography. IMHO that looks like cheap website copy kind of those selling ebooks “100 ways to get rich fast’.

    Just my 2 cents

    -2
  246. 357

    This is almost as ridiculous as trying to prove why it is better to park a car by “backing” into a parking space.

    Your article is completely flawed because almost all of the points you make do not apply to computer screens.

    - At age 40, only half the light gets through to the retina as it did at age 20. WOW, really? Too bad that has nothing to do with reading on a display. It actually has to do with the aperture of the eye which I would argue does not really translate to how we see on displays. Besides, ever watch a baseball game in 1080p and notice that you can see the people in the stands way better than you could if you were sitting there? Your eyes taking in light does not translate to your eyes taking in light from a display. Your TV would be 25% larger than mine and then people would have to stand back 25% further wouldn’t they. So I have to get a really long monitor to see your entire page or get used to a lot of scrolling. People can actually change the brightness and contrast, maybe you did not know there’s fine tuning like that on almost all monitors these days and the monitors today are a lot better than the old CRTs we had in the early 80s.

    - Nearly 9% of Americans are visually impaired. So they can’t read a monitor? Maybe they have larger issues like learning how to change the zoom level on most browsers now with ctrl-mouse wheel. Your point works great for PHONES, not displays. You can zoom the text on a display but you can’t on a phone. So instead of making everyone read like they were 60 why don’t we just use technology that we already have. In fact, we can use 8px and force people to zoom but they would end up with something around 10-12pt depending on the content. Notice I said depending on the content which was missing from your article.

    - 16-pixel text on a screen is about the same size as text printed in a book or magazine; this is accounting for reading distance. Hey, as we get older we need to hold things further away, wouldn’t that make print smaller, like regular web sites? I think newsprint is a lot smaller than your example and that has been around for like 100 years before people were using printers in the home and office.

    Did you consider types of content and style and formatting? Or should everyone have the same website template as yours? Actually a lot of web sites that try to sell you stuff looks like this. But wait, there’s more… Of course reading = revenue but that does not mean reading 16px is going to guarantee more revenue. I put a web site together with larger font and people hated it. About ten people which I think is enough to have a good sample population, so I changed it back to 12pt.

    Next article…, I bet we are supposed to read white on black to reduce glare? That is more natural right?

    3
  247. 358

    I had to sit further back in my chair to read this large type size article.
    Why should I design something that forces the reader to not just adapt their reading, but also the way the even sit?

    0
  248. 359

    Some good points, but other considerations are missing…

    0
  249. 360

    The comment text is 15px (on FF 7). That is pretty much perfect for me. I didn’t have any issues reading the article either.

    It has never been hard for me to read small screens, but I know people who are older than me that keep their resolutions lower than their monitor’s native because it’s easier to read for them.

    Also, font size becomes important when you consider mobile devices. I can’t tell you how many times I went to a “mobile optimized” site (even Gawker) and I had to squint to read the text on my Droid Incredible. Make the text bigger for phones! Especially for content articles.

    Overall I totally agree with this post. I think you can make an argument (as a designer) that:

    a) Content that people should read should be bigger.
    b) Content/flourishes that people don’t have to read can be smaller (dates, author bios, etc.)
    c) Depending on the font 14-16px is probably just fine for body text.

    As with any topic like this, people have varying opinions. Just do what you want for your site and ask your users what they think. Maybe you only target 20 year olds, so keep your text at 12px. Maybe you have a news site, so keep your articles bigger. Do what you need to do to make your site readable!

    0
  250. 361

    What about user testing? Surely by selecting a pool of end-users who meet the target demographic and carrying out isolated testing would determine whether an onscreen font size is illegible. The target end-user is key to determining the design stance taken with any project.

    It is worth noting that different fonts render at different sizes. For example, Verdana is a ‘larger’ font than Arial. Selection of typeface is also key to legibility, along with visual statement.

    Kamran has made some extremely valid points above, but, the most interesting one, for me, is how does this recommendation translate to mobile device apps? For me 16px is excessive as a base font size, especially for phone platforms.

    One thing that also needs to be considered is that users have full control over browser zoom along with many browsers now having built-in readers.

    Good article though.

    1
  251. 362

    Great article! Awesome and it’s time to change

    3
  252. 363

    I’m glad I read this, I’m learning web development at college. Our lecturer has told us to use 12xt for body text and I thought that was ridiculous, I have always designed with a bigger font size, at least now I can back up my argument with facts.

    Thanks M.

    2
    • 364

      Martin, I am glad that you are pursuing a degree in web development. I am a (young) college professor teaching web design and development, I can say that the number one issue beginning students have when designing web pages is making the font size too big. The article about using 16 pt/px font has some validity, but as with anything in design, there is no rule. Saying that you always have to use 12px is wrong, but saying that you always use bigger fonts could also be wrong. There are too many factors that go into any type of design to say that you should always use *this* for *that*.

      Good luck with your degree!

      9
  253. 365

    @Martin — most professors won’t admit they are wrong, and most have bad information that may have been relevant when they were actively involved in the field 5-10 years ago. take what you can from them, but generally go with what you find from sites like this and from what others are actively doing.

    3
    • 366

      @Martin – same in every country as it seems – teachers in the area of media, design, programming etc. mostly work with their outdated experiences back then when they used to work in business. Often the students are more up to date then them.

      But the good ones of them, the open-minded, can be convinced of new stuff, others are not worth following their lessons (unless you have to..)

      Make your own experiences. Reading such magazines as Smashing Magazine or those from the Tuts Plus Network definitely helps you even if you are experienced someday.

      0
  254. 367

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

    Worst than tiny fonts is the fact that this statement still needs to be repeated in (what might as well be) 2012. Font size just happens to be a symptom of a broader disease, yes?

    That being said, let’s face it, plenty of us get “direction” from client that is less than ideal (to put it kindly). There’s certainly no shortage of poor design. I’m just not so sure designers are always the root cause.

    4
  255. 368

    Does this advice apply to “web apps”, where there are many screens that have a label+value format?

    3
  256. 369

    Great article! Thanks! Will do.

    0
  257. 370
  258. 371

    Great article, I’ve always had designed websites with small fonts because I thought they look better, but this article change my point of view forever!..Thanks

    0
  259. 372

    Wow, I hardly ever take the time to actual read an article, preferring to scan for info i want. But I actually did read this, perhaps it’s the font size ;)

    Great article, now to make the bosses believe.

    2
  260. 373

    Outstanding article.

    0
  261. 374

    Great article! Why we we get so stuck on what’s the ‘norm’ just because it’s always been like that? This is such a simple solution and not even thinking ‘outside the box’ (as much as I hate that cliche phrase). I thought I was pretty good at stretching the boundaries of generic web design, but this article has ‘pulled me back in’ to reality and made me realise that I need to do more – not just for design but for comprehensibility. Thanks for the inspiration!

    1
  262. 375

    I noticed this just recently – 16 pixel default. I was always schooled to work in ems, not pixels and wondered when the prevailing logic changed?

    1
    • 376

      Why not use “em” as a unit of measure? That is what I use all the time and it makes sense. “Em” is the size of a capital “M” in the browser’s default font. This way, if the user uses a larger font-size as the default in his browser, the text will also display larger in the web page, if the designer took care of using “em” as the unit of measure in his CSS.

      2
    • 377

      When modern browsers switched to using ‘zoom’ instead of ‘font resizing’.

      0
  263. 378

    Very good article. It’s one of those things that seems so obvious when you think about it as well. I can think of at least one social media site that would do well to take heed, especially with all the silly updates they have been doing recently that have already put people off!

    0
  264. 379

    Didn’t convince me, I didn’t even read past the jump after I saw your horrid line height. I’ve never had to hit the +A -A buttons on a website, so don’t see why I’d change my font size now…

    -7
    • 380

      Your reasoning is flawed, you should never design for yourself but for the people who use your site. My guess is you are still in your twenties and an experienced internet user. The people who will use your design most likely are not.

      3
  265. 381

    I think in theory it’s a great idea, and would be great for certain situations, but I think to generalise would be a mistake and there’s much more to consider than just the size of font when you’re a designer.

    We don’t tend to plonk a large amount of text and leave it, we use other devices to make it easier to read such as segmenting, highlighting, making keypoints larger etc. In this page the font has proved to be easier to read I agree but wouldn’t work always.

    We don’t often get briefs that just feature the need to have as much text as a book would.

    I’m not disagreeing entirely, I just think the examples used in this piece are slightly biased, and don’t show the situations where it would make websites harder to use. It depends entirely on the website and this idea would be great for things like blogs but would make it especially hard to layout e-commerce and catalogue sites in a user friendly way and still get vital information in without the need to scroll constantly.

    Also a key thing is having easy to use navigation. With increased font sizes as standard your side navigation would constantly be falling onto 2 or three lines which would throw up lots of usability issues.

    9
  266. 382

    Interesting.

    Yet what font-size does Smashing Magazine use on their own site… ?

    :)

    8
  267. 383

    I agree, size count (don’t misquote me)! But to me the type of font weight in the scale. My pace of reading is faster and easier with font like arial, verdana instead of font like the article itself (Times etc…) I agree, size is important but to my point of view, type fonts are also very important for the ease of reading!

    0
  268. 384

    Why bother re-writing what Oliver Reichenstein essentially wrote 5 years ago. Nothing new here.

    -3
    • 385

      For people like me who never read what Oliver Reichenstein essentially wrote 5 years ago.

      19
  269. 386

    Wonderful article! Indeed, most designers would rather go for what looks good to them instead of the preferences of their clients. I admit I’m one of them but after reading this, I’ll reconsider. Thank you for sharing this with us!

    0
  270. 387

    i very rarely bash an article, but this is so off the mark i barely know where to start. there are so many ill-thought out and poorly researched notions that try to support non-factual suppositions.

    for starters, i read this article on a tablet where the font size appears insanely small because your site isn’t formatted for mobile and as a result i had to “zoom” in for readability.

    there’s a lot more to decent typography and information design than simply stating body font should be 16pt. this article also makes a lot of suppositions like “the users desire to hit the back button”, average user age of a web site and the user’s platform. where’s your data, your a/b testing to show this as such? where’s your data about the average age of a user online? where’s your historical context for why 16pt is the default text size (which isn’t true, by the way)?

    if you were really going to enter into a discussion about print, you should have mentioned how those same 40 year old and 60year old eyes suffer from the same issues with the acceptable (due to size constraints, apparently) 8-point font. there’s no reason to segregate this argument for web and print. old people need bigger text, now move on with your thesis. If you want to talk about standardized text and engage a print discussion, then you should at least mention how type setting evolved and how it’s not that different than our current modal div theories controlling contemporary web design

    the other point i find interesting is that you assume that all people are reading from a certain distance on a desktop unit. in 2 years more than 50 percent of web content will be delivered over mobile, which you don’t even touch on. this brings us full circle to my complaint that you text wasn’t readable on a tablet, which made me want to “hit the back button” as you say.

    this blog, as an example of your thesis, would have lost your client money.

    5
    • 388

      First off, it’s not his site and I read it on an iPad without having to zoom (a rarity among most articles on non-mobile-ready sties for this 42 year-old).

      Body font is 12pt. for print, you said 16pt. (point) the author is talking about 16px (pixels). And, I’m not sure what browser you’re looking at, but if I load a non-stylized HTML document into a browser, the browsers I have (FF, Safari, Chrome, Opera, etc.) all render my default font as 16px serif (normally Times or Times New Roman); seriously, go to preferences in your desktop browser and see what it’s set too (Chrome just says “medium” but all the others give a 16px setting). I also thought the shots between the screen and book were pretty convincing … I also personally can’t stand reading books and magazines with smaller copy size (too much eye-strain) — although I completely understand about printing costs and keeping font sizes small for magazines, catalogs, and books like the Bible (that’s where digital versions that allow you to increase the font-size are so nice).

      As for facts, what more did you want (you saw the links, correct)? The distance of a recommended 28 inches is idea of ergonomics (for desktop computing). While I have two mobile devices (phone and tablet), I do the majority of my reading on my 24″ laptop (at a distance (at work) that is approximately 28″ from where I’m typing) — this article was an ideal read versus even reading these comments. As for age … most of my clients are age 30+, thus this article makes a very valid point. I suppose, if you’re aim is at an under 30 crowd, font size could be smaller (and should be mobile ready) — then again, maybe you could provide a link (for your facts too) on what is best (and provide your A/B testing).

      As a University professor in Web, Design, and Illustration, I know about typography (history, readability, blah, blah) … And I understand about how there isn’t one “hard and fast rule” and or design can be “subjective” — even in this article the author states that the font chosen determined the baseline … But I believe the majority of my clients (not all mind you), might prefer a base size for body copy larger than 12px. I (for one) am glad to see the changes in such sites as http://www.markboulton.co.uk/ (18px) http://jasonsantamaria.com/ (16px on the front and 20px inside) that both use chaparral-pro … And using http://drewish.com/tools/vertical-rhythm makes testing variations between 16px and 20px very easy.

      Although I used to teach 12px should be used for the font-size and 18px for the line-height (since I came from a traditional print background – and thinking in terms of PICA and points), I know much of my future work (and what I teach students) will start with a baseline that is proposed here.

      I don’t mean to ramble, and normally I don’t reply to comments, but I just wanted to give you my perspective (2 cents is probably all it’s worth, if that) on the post.

      6
  271. 389

    The article is written from the context that no websites are viewed on hand-held devices. I just finished a unit in my design class teaching students about readability. If we would like to engage most of our users, we could code a button in the site up front for users to make the text larger. It is not a bad idea to try to put in text larger on the web, you set the type size as normal and work off of that in ems — pretty easy. Although smaller text is elegant looking, as truly a visual person as I am, what I see on a page most of the time is a grey box, and then I have to force myself to deal with actual letters and words. So, perhaps we could all go a little larger. I would experiment with testing your sites out with several sizes and users will tell us what they think with how much they visit. It’s measurable.

    0
    • 390

      Well, you can serve different styles, with their own font size rules, for mobile devices. This article is pretty clearly focused on desktop/laptop readability. I think that’s a feature not a bug.

      0
      • 391

        While I think this article has some valid points, I also agree that it is a case-by-case scenario. I did find this article easy to read, though the type itself was too large to really give credit to the subtleties of characters. I.E. I could read it easily, but the characters were not aesthetically pleasing. On a usability note, it is well established that san-serif fonts are actually easier to read on the web. If one is really striving for readability, they should not use a serif. This article is a bit biased for my tastes, even with all of the good info (not trying to insult!). I think the line is fine, and it should be respected.

        1
  272. 392

    The article was food for thought, but I found it hard to read with the big font and narrow columns. My inclination was to scan as opposed to read and increased amount of scrolling made me lose my place. Someone else mentioned that it looked like one of those “how to get rich” style websites. Those sites work well with big fonts because they are making broad stroke points, and it is easier to see with the big font. But for reading a lengthy post or article I like to have less scrolling, and more words close to each other. I also like to read articles on my iPhone, so I might not be the best example.

    2
  273. 393

    Very interesting article, almost had me convinced but then you start thinking about the most used sites on the web such as google and facebook, what size font do they use?

    What size is the font on desktop PCS and Macs, program fonts, it’s definetly not 16pixels.

    1
    • 394

      “What size is the font on desktop PCS and Macs, program fonts, it’s definetly not 16pixels.” – which is a constant pain in my eyes.

      I hate iMacs for their restrictions in changing font sizes for the sake of good looking design. Yes, Windows Large fonts look aweful, but at least I can see it.

      I actually second the author of the article. Large chunks of text must be at least 16px big. For examle, as much as I love SM, reading its artcles is always a srtuggle. I do only because I know how good the copy is, but experience leaves much to be desired…

      0
  274. 395

    Totally makes sense. In my blog: adeepbite.com/ , I use TwentyTen Five theme and the default font size is 16px. For blog posts, I feel size 16 is very pleasant to read.

    0
  275. 396

    Cracked me up. I looked at the 12px text and hunched forward before reading the previous paragraph asking to notice if you hunch forward or not. lol!

    1
  276. 397

    Absolutely ridiculous. How is this featured on Smashing Magazine? Everything cannot be a headline. Layout needs structure, not massive text thrown haphazardly on a page with bad typography. Please, no.

    5
    • 398

      16px font-size IS NOT a headline size. Far from it. I associate a minimum of 19px to be sub-heads and and headers are typically 22+…

      0
  277. 399

    how come u guys don’t follow this on your own website???

    0
    • 400

      right? their base stylesheet style.css is set to .75em and the text in this article is set to 19px and some nutty font. not all fonts are the same size at 1em.

      0
  278. 401

    16px is ridiculous. This page makes me move 3 feet away from my screen and I still am irritated by the big fonts, big line heights, ugly formatting and endless scrolling. And I have a big resolution screen… What if people with 17-19 inch monitors come here? They’ll click away in a second I’m sure.

    Okay, 12px may be a bit on the small size nowadays with the high resolution screens, but 13px or 14px will do fine.

    0
  279. 402

    Definitely a great article. However, one might argue that using larger fonts as gospel could pose visual hierarchy problems with smaller screen sizes or higher resolutions when trying to eliminate scrolling. I usually set my body font to 15px and use a line height of 1em. I find this more than sufficient for readability with large paragraphs of text and it still gives me room to make headers 18px and 20px for slight differentiation.

    That being said, there are definitely reasons for using smaller fonts. It’s certainly more aesthetically pleasing, and it can be used as an extra aid for action e.g. if you have and arrow pointing right, placing “Next” in 12px font can be extremely helpful and eliminates the need for your button to accomodate 15px font. If you are going to use 13px for a paragraph (I don’t think anyone should go much smaller than this), try toying with the line height (1.3em isn’t bad) and letter spacing to improve readability.

    The underlying theme to this article is that you should be designing the site for the user and the site should accomplish it’s goal. If a constraint is visual appeal, lowering the font size might be necessary. Otherwise, usability and readability should usually be your goal.

    1
  280. 403

    I agreed but what when client force to designer to keep the 12px, they might thinking 12px is more professional.

    0
  281. 404

    You haven’t mentioned that a comfortable font size is directly related to the dpi of your screen. As the dpi has been increasing over the years we needed bigger fonts to make things equally readable.

    Imagine 12 pixel text on and old machine with a 800×600 resolution with a 19′ screen. It would be pretty big and readable. But the same text on your full HD 1920×1080 21” would be pretty small.

    I think the reason for why 12px is so popular is because it was used back in the time when screens had fewer dpi.

    4
  282. 405

    The problem is here, aesthetics vs usability and what audiences are you catering your usability towards. A standard problem we all face in the interactive industry is identifying the lowest common denominator and how to appease this group. The unfortunate result is, not everyone will get a hug in the end. I do however believe building in tools to increase seamless usability across all audiences is the smarter move. Additionally I also think that users can be guided to utilize browser tools more efficiently then laying the burden of individual use completely on the interactive team.

    I think your argument of pixel size is rather arbitrary. The bigger point is, you want to have the large print version of the WSJ available by default. From a design perspective, this means that your typographical hierarchy will have to cascade up and down from this central position. Aesthetically you run the risk of creating a dopey look to your solution which may not be an issue for everything out there but there are conditional applications where this will not fly.

    Best advice: Form always follows function, know your audience and know your core goals. Boxed approaches don’t always scale well, the world isn’t black and white.

    1
  283. 406

    I must say my first reaction was one of skepticism, as I’ve been trained throughout my education and short design career that the text and body copy will be fine as long as they work well with the brand design. And maybe it will be hard to design larger since it’s been ingrained in me to make copy smaller, rather than larger, if it needs to be altered. But as I read your article and thought about all the times I catch myself leaning closer to the screen to read, and while reading your article, I was comfortably reclined in my chair, I was pretty impressed. I think I might need to change some of my digital typography practices!

    0
  284. 407

    Im new in web designing and I need to learn more. This article just taught me something ‘new’. Thanks!

    0
  285. 408

    Well guys you convinced me. Great article.

    0
  286. 409

    New to web design but isn’t font size different from one font to the next?

    0
  287. 410

    I don’t think big fonts look professional on the design.

    0
  288. 411

    Designers struggle constantly with non-designers who don’t believe that making content “look pretty” is important to conveying their message successfully. We’ve also struggled getting the “technical guys” to let us help with creating more useable interfaces for their programming. Now in these comments, Designers are the one’s arguing against the application of common sense.

    Personally, I was relieved to be able to sit back in my chair to read this article. I’m not a huge fan of the Art Deco font, but it’s purpose was clear “I’m a headline”.

    Someone said “larger text doesn’t look as pretty” isn’t that just an opportunity for us to learn and adapt our design methodologies to embrace larger text? We can build in a visual hierarchy with weight and color in a way that is pretty. And, we should already be developing solid companion mobile design templates or templates that scale gracefully with the mobile interface – one size doesn’t fit all interfaces.

    Note: I changed the base font on my blog before posting this comment.

    0
  289. 412

    liked this one, its about what users want not what we like as a designer great point of view.

    0
  290. 413

    Interesting article. However, you have shot yourself in the foot by using an even larger font size (19px) than you actually advocate (16px) – this only serves to create the impression that 16px is ridiculously large, because one naturally assumes that you’ve followed your own advice, when in fact you reveal at the very end that the body is 19px instead of 16px. So in fact nowhere on the page do you actually demonstrate what a 16px font looks like in real use (the photos don’t count) – this is quite an oversight! Madness!

    5
  291. 414

    Proportions are more important than “size.” Drawing a hard line in the sand is unwise.

    In the design of anything, on screen, or in our physical world it is the relationships between elements that matter.

    So rather than stating a precise pixel size is right, wrong, or otherwise, it’s more accurate to speak of the elements in terms of context and proportion – and in terms of the intended purposes of the design. Responsive design solutions are based on percentages and proportions, no?

    12px may be correct for some uses, 16px in others, as long as the leading and the line length does not exceed a tolerable and legible measure (See Robert Bringhurst’s book “The Elements of Typographic Style” – still relevant even in our digital world.)

    1
  292. 415

    Web designers should stop dictating to the end user their “ideal” font size. This can be done by setting the default body font size at 1 em.

    What this will do is, if the web designer was smart enough to let the p element inherit the font size from the body element, and if the end user has not set the font size in their browser settings, then they should see body text set at 16px. If the end user has adjusted the font size in the browser settings to suit themselves, then they will see the body copy set at whatever size they chose. This is wiser than expecting the end user to use zoom.

    I prefer to leave the default font sizes etc alone in the CSS, and just use a minimal reset to create more consistency. It’s best not to deviate too far away from the browser font sizing defaults for headings as well as other text such as body copy.

    End users are being more savvy than they used to, and they should have control over things like font sizing that’s more suited to their needs. Web designers need to change from the old practice of dictating the design to the end user, and adopt the practice of giving up control to the end user and designing with the end user’s needs in mind. No web designer can accurately predict the best font size to suit the majority of their target audience. That decision is best left to individual end users who know their own needs better than any web designer ever could. Stereotyping is not useful in this case.

    2
  293. 416

    Kathleen Clohessy

    November 1, 2011 5:46 pm

    Thank you from a woman whose eyes-like the rest of her-are not getting any younger. Although I agree with the commenter before me re: setting the default to 1em and allowing it to default to the user’s choice, the truth is that not all users are that savvy. Many users, in fact, are not savvy at all, and assume that WYSIWYG. period. In other words, they do not realize that they control anything on the page other than whether to close it or not. And close it they will if the font is too small, regardless of how compelling and beautifully written the content may be.

    0
    • 417

      Actually, I wasn’t saying that all users are savvy enough. But, most regular internet users are savvy enough to know that they can change the font size either via zoom or via the browser settings.

      So for me at least, it makes sense to set the base font size at 1em. This way, if an user who isn’t knowledgeable about their browsing options views the page, their font size is very unlikely to be too small, provided no-one has changed the browser settings from the defaults. It’s more likely to be 16px which is the default setting in modern browsers.

      1
  294. 418

    In the example…
    16-pixel text displayed on a 24-inch screen…
    16-pixel text displayed on a 15.44-inch screen…

    The author compared the physical text with screen text, what is the resolution of the screen? does 800×600 and 1280×1024 look same on 15.4 inch screen?

    Why this article body copy in 19px? why an unsupported primary font “Tex Gyre Schola” how many of you have this font? neither its @font type property.

    0
  295. 419

    imho it’s other seo article nonsense, everybody knows that webdesigner has more type of units and only beginners stick with pixels, because pixels are for screen only but css isn’t formating only for screens … i guess all the comments include all my reservations … good luck with gaining more experience, don’t let me stop you writing :D

    -3
  296. 420

    This is all well and good, except that I was taught in all my graphic design classes in college that 12 pt text on a printed page was really too big for blocks of text. 10-11 pt was what I was taught to be the sweet spot. According to your math this would put the equivalent px size somewhere around 12-15 px which is…pretty much what I’ve been using in websites.

    I am unconvinced.

    0
  297. 421

    Santosh — The TeXGyre faces are freely available from the Polish TeX Users group. Schola is a Century Schoolbook.

    0
  298. 422

    I agree what this article has say but why smashingmagazine still use 12px :/

    1
  299. 423

    Great Article.

    0
  300. 424

    This article looks like a custom post type: you don’t see any of the standard ads at the top right of the page the way you do on other SM article posts. Therefore, you have nothing to reference the text size to other than the header and footer of the page. This post type doesn’t look like a standard web page, which typically has content on the left and right sides, etc.

    The author makes an interesting point, but shows no great examples of how this 16px text is applied to websites. And, on his own site, the text is hardly legible (thanks to decisions on type and color) on my 24″ Mac.

    To me, reading text as large as it’s set in this article feels gimmicky, as though the author is working hard desperately trying to convince me of something. Well, that’s true, but the type size is cueing me into that before I even get into the meat of the article, which makes me doubt what’s being said. I’ve seen examples before where copy is laid out like this; it just never feels genuine to me.

    Let’s also note that the author is a copywriter, not truly a designer (or at least he’s hiding his portfolio…). B Nonn, if you can show examples of websites (not just blogs) where 16px fonts are applied well, I might be a little more open to this idea. Until then, I remain unconvinced as well.

    2
  301. 425

    It’s a good rallying cry, but under the wrong flag I think.

    As designers we need to stop being such control freaks, and let the users define their own display.The most adaptive technique is using percentages, not points, and by no means pixels, especially in the world where every different device has different pixel (ppi) density.

    Do you remember the Dao of Web Design?
    http://www.alistapart.com/articles/dao/

    15
  302. 426

    Ingrid Kast Fuller (@ingridfuller)

    November 29, 2011 9:43 am

    The comments on this article are a perfect size for me. The article text is a little too big and the footer was too small.

    I agree with Petar Subotic, using percentages especially because we should be looking toward Responsive Web Design now because we have so many devices out today.

    13
  303. 427

    Thanks, B. Nonn, for putting forward some interesting arguments.

    I have to disagree with the idea that there is no cost involved in using larger fonts on the web. Designing an effective and appealing web page is about the careful balancing of a number of different factors, with font size being just one. Get this *balance* wrong, and there could be a severe cost.

    For example, using a larger font would make a form look much longer, and research shows that this perception can be enough to reduce response rates. And it’s pretty clear to me that the lack of contrast between text and background on Mark Boulton’s site (for instance — nothing against him personally!) would undermine the readability more than the large font improves it.

    So while it’s great to have the data to suggest we over-estimate our readers’ ability to see what we produce, I think this should just be part of what we consider when deciding font size.

    Thanks,
    Jessica Enders
    Principal, Formulate Information Design

    18
  304. 429

    There are so many things I take issue with here. One is that browsers’ default type being 16px means anything to a page design. How long have browsers been built that way? Why is 16px now the ideal body copy size as opposed to every other year they shipped this way?

    Not every site is a single column blog. You completely ignore the total design of the page (type hierarchy) in order to declare one size “best.” Your type is not well set enough to help your argument, either. Your line height makes this text *more* difficult to read than a smaller, well set size. The footnote bit is also set as #444 which makes it more difficult to read, but you’ve not written about contrast at all, only size.

    Further, you ignore mobile and focus on desktop only. How long will that be the prevalent browsing experience? Most of these devices are much closer to the eyes, and a properly set viewport clears up a lot of issues without going for 16px as a minimum.

    Lastly, you may think that just web designers read this. They’re not the only ones. So when I get a client who comes along and tells me every piece of text on the page must be at least 16px for a complex site, I’ll know where they got the idea. Should my H1 be 48px, too? I have had a client go back into a site design and restyle it for 16px minimum. It looks AWFUL. 16px type should not be a driving principle. Clear design thinking SHOULD be.

    30
    • 430

      Until now every singles comments I’ve read is completely right, but @Rob you nailed it.

      Thanks for that!

      @Bnonn, though your intentions seems to be good, you clearly missed all of the design principles on this one…

      -3
  305. 431

    I stopped reading when it wasn’t fontsize=1 fontfamily=verdana and alien green text on black.

    What a newb. Eye damage is a right of passage and font-size = small a design crutch for the Y2K crowd.

    Honestly though, HE IS WRONG. How much money does Facebook make? What’s the font size there? Digestible, fast loading mini text.

    But why do 16px fonts when you can just have them scale perfectly to whatever device? And why not just use the zoom feature built into every modern device ever?

    Why do we constantly need to build entire sub industries around the ineptitude of the end user? If it’s just about money, well I say you’re losing money by changing web standards every 28 days like a menstrual cycle.

    CTRL + Mouse Wheel = Problem Solved. ALL CAPS 25px fonts and uninteresting content = money lost. If not because you alienated your viewer, then because you had to pay money to an adhoc blog writer.

    I say if you can’t read the internet you should be a Walmart door greeter until society changes again.

    I didn’t read to the bottom of the page where he tries to rebuke the web designer who said ‘use the golly darned zoom functionality’ … okay I did. But it wasn’t the massive text that got me there. Or the boring tone.

    If it’s really about making money, then why not just jack the lowest common denominator into the pseudo matrix and hook em up to a dopamine transmitter attached to a giant big arsed unmissable red button and charge money to their credit cards every time they push it and when they run out of FIAT credit supplied by a broken economic system replace said chemical with cyanide and turn their decomposing body into usable energy? How’s that for efficiency and a solution to the population problem.

    I would argue that it is far more costly in the long run to constantly cater to weakness and fight against evolution.

    RAISE UP humans. Try harder.

    And no, I didn’t hunch forward and furrow my brow to read the page footer but that is just because I have no interest in BNONN.

    Anyway, I jest… now that most people are using 1920×1200 monitors you really should up the font size. If you’re still using 1024 x 768 – get with the times. We live in a disposable society.

    Peace out.

    Thanks for letting me waste your time to add nothing to a needless conversation that common sense should have solved years ago. I hope you had to stare hunched over with furrowed brow getting massive screen radiation to read this 10pt facebook text.

    -56
    • 432

      Using a low contrast font to reduce readability of trolling comments is a usability problem. Here I sit trying to read it and straining my eyes in the process. Why not just hide the idiotic rant and make me click something to get a readable version?

      6
  306. 433

    Funny thing – we always debate the ideal format for blogs and articles here (for ourselves and our clients). Our blog lacks readability and we’ve wanted to redesign it for 18 months now, we just never find the time! Hell, can’t even make the time to post blogs!! But, this is a design issue that we discuss for almost every site we create.

    Fundamentally though, the issues are:
    1) Too many words on a line is difficult for eyes to track – which leads to strain.
    2) Low contrast is difficult to read, which strains.
    3) Small font size is difficult to read, which strains causing squints, hunching, etc – and of course, also leads to #1.

    The fact is, while it looks large to us, the number of words per line is far closer to optimal – as opposed to 12, 15, or even 20 words in the worst cases. Part of the reason some college text books were so hard to read without falling asleep was the number of words per line. That and they were incredibly pointless and boring. However, in almost all printed material, you see pages broken into multi-column format. Why? It’s easier to read.

    And to keep the topic on track, this is about articles/blogs – copy intended for the user to read/consume. Forms are not included in this. However, the description of a form’s intent should be. (“Please fill out this handy contact form so we can send you a personalized design mug with accompanying vagrant sea bass!!”)

    Lotsa haters out here – but a good topic.

    Thanks,

    Greg of the OnWired clan.

    13
  307. 434

    Very good article and an even better message. 16 px is a perfect on-screen size, and more importantly also means that text renders at a relatively legible size on phones & tablets, for sites which aren’t designed responsively or with a mobile-specific version.

    Although I have to agree with others who have said that we ought really to be steering away from px measurements in favour of % or em.

    9
  308. 435

    Very constructive article. Content and content is the most important thing in all interfaces and of course the presentation it goes in paire with it. User friendly called by marketing people and I think that this rule have to be respected. Thanks again for this article. Daf

    0
  309. 436

    While I laud the premise that most web sites use too small text, 16px is just as wrong as 12px or 10px or 24px. Any px is wrong for sizing anything other than objects that have intrinsic sizes measured in px.

    Why?

    1-Screen densities vary widely, as do reading distance and other user environment variables. While the CSS spec defines a px as an angular measure that shouldn’t be affected by distance, in practice browsers don’t match up with the spec, because they’re incapable of anything other than too granular conformance – no fractions allowed – in matching up device px to CSS px.

    2-This is the bigger problem, and it’s huge: Defining font sizes in px (or pt or mm or any other “absolute” measure) disregards the browser default size, which disrespects the visitor. The browser default is presumptively the ideal size for the user. He’s the one in position to do anything about it if it’s inappropriate. No designer is. There’s too much variation in device densities, viewport dimensions, viewing distances, and viewer needs to ever say anything sized in px is ideal, or anything close thereto.

    If 16px is an ideal base size on your developing screen, and your developing browser default is 16px, then you’re also saying 1em is ideal. Indeed, 1em is always an ideal base size, as it (presumptively) matches the user’s ideal size perfectly, no matter the screen density, viewing distance, viewer, or any of the other environmental variables a designer has no knowledge of or control over.

    Zoom is a browser defense, like the “readable” scriptlet (which converts gray text to high-legibility black text and non-white backgrounds to high-legibility white here). Defenses generally aren’t necessary on sites that don’t present users with offensive styling.

    6
  310. 437

    I think you’re right about text generally being too small on most websites.

    There are of course a number of ways to do this, but in terms of the creative that gets signed off by the clients, I’m already moving towards larger font-sizes on all aspects of the designs, and I’ve only had positive feedback from clients.

    0
  311. 438

    It’s the principle of the thing. Increase body font size = improved reading experience (based on evidence given in this article, the web survey cited and opinions of many). Whether that means px or % or ems it doesn’t matter.
    If you’re into the responsive thing already than do it in ems or % or whatever, but I think the point is that body font size needs to be approx. 16px for all the good reasons explained in this article and most of the comments here.
    I have to agree with @Greg:
    “And to keep the topic on track, this is about articles/blogs – copy intended for the user to read/consume.”
    The topic is body copy text size, just like the title of the article says.
    Obviously caption text and sidebar text and meta text don’t need to be huge. If you start with 16px (or body {font-size: normal or 100%} and then whatever that ends up being using relative measurements) you can apply same typography principles of hierarchy ect. I think of this as just moving up the scale.

    Check out trentwalton.com specifically. One of my favorite sites for many reasons, but the typography is one of them. The body text font size is 20px (or 137.5% for screens larger than 900px wide) Another good example of a nice looking site with great typography is jasonsantamaria.com his font size there is 20px.

    1
    • 439

      Maybe i need to get my eyes check but both of the sites that you referenced are just obnoxiously large and i don’t want to read it at all, especially trentwalton.com/.

      0
  312. 440

    The font in this article hurts my eyes (actually makes me feel a bit sick) and is definitely not optimum.

    0
  313. 441

    While I totally agree that overthinking the common use of 12 or 13 px big fonts is necessary and 16px is indeed a good option.

    I think the argument “… all browser makers chose this as the default text size” shouldn’t matter. Just because something is the default, it does not mean it is the best option.
    There are far better arguments for increasing font size and they make much more sense than using “default”.

    1
  314. 442

    I learned a lot from the article and comments. I especially appreciated learning that em or % is probably the better way to go for setting on-screen font size. Thank you, all.

    -1
  315. 443

    I have an approx. 18 in. monitor, which (I just measured) I sit 18 to 20 in. from. At a 1600 by 1200 resolution, this leads to a DPI of a little over 100. While I can’t be sure my vision counts as normal (I’m thirty and have awful sight without correction. With an up-to-date prescription can be corrected to better than 20/20, but my current prescription is a few years old.), but I have to view much of the web at various levels of zoom. In particular, I have to zoom (oft mentioned above) Facebook quite a bit.
    Luckily Chrome remembers my zoom settings for various sites. Otherwise I’d probably go batty. It’s like a ritual, go to new site, fix font size, read content.
    Doing a little math, 12px text at 100 dpi is less than 9pt text. At a reading distance nearly one and a half times what is considered normal for printed matter where 9pt text is acceptable. Furthermore, due to the low DPI of most displays (relative to printed material at 300-600 DPI), typeface details at small sizes are less clear than print as well.
    The article’s recommended 16px text is nearly 12pt and the 19px it’s set in is a little over 13.5pt. While these may seem like large sizes, when one factors in the reading distance, the angular measurements are equivalent to 7.68pt and 9.12pt respectively, while 12px is reduced to an unreadable 5.76pt.

    7
  316. 444

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

    How should we understand that heading? The text says the opposite.

    0
  317. 445

    your blog looks fine in 16 point but my boss can read it 10 miles away. Its too big and isnt practical for web design in general.

    Let the user decide.

    0
  318. 447

    Honestly, attempting to read this article with body copy so large made my head hurt, and the shadow on the drop caps made things worse. I’m sorry but I actually find the font choices and styling in this article overall to be awful (my opinion).

    I was intrigued because I normally use 13px (which I’m pretty sure I learned from a smashing article a few years back), and some of my clients (mainly the ones who attempt to design themselves and are the worst to deal with) comment that it’s small.

    So I went into this hoping to learn something new… I learned not to use 16px for body copy. Never would I want to put my users through that, outside of a welcome paragraph at the top of the page.

    -1
  319. 448

    I am designing my website. I am trying to find out the best size for the texts. You are 100% correct. If my visitors are in trouble to read the texts, then why should I write the texts?
    Thanks for your excellent arguments and working samples.
    With best of regards,
    Subodh

    0
  320. 449

    Ezekiel (@ebinion)

    August 17, 2012 12:42 am

    A blanket size of 16 pixels for body copy is wrong for many reasons. However, it’s clear that 12px is too small and as interactive designers we should trend upwards in our fonts sizes.

    A few more good reasons to increase font sizes:

    1. Larger text is easier to read at a glance. This is especially great for the segment of mobile users that truly have “one-eye and one-hand” during use.

    2. TVs are emerging as a web platform. Users sit much further away from them, making it difficult to read smaller fonts.

    3. Tools like Instapaper & Reader make money (in-part) by giving users an experience that’s easier to read than the websites that we’ve been designing for years. (Take a look at their font sizes.)

    0
  321. 450

    12-14 seems to be my comfort level, I would opt on larger vs small. Facebook is too small.

    Most of my clients prefer larger vs the small. (Maybe we are old).

    I am having difficulty with the contrasts. Many of the templates I see are low contrast (light to medium grey on white) – I have big problems with this.

    1
  322. 451

    I’m calling bullshit!
    Here’s another UE guy trying to claim fame and fortune and industry authority.
    The larger the font the harder it is to skim the page, because your has to do more work and and it also makes the page longer and that just adds to the scroll time. computers are going to retina as well and in a few years the monitor definition and clarity will be that much better. Not a point for now but just saying.
    I’m going to listen to a guy who is wearing glasses and obviously biased.
    I’m calling bullshit.

    0
  323. 452

    I never realized that designers were such a conservative lot! Okay. I knew they were politically speaking (though they don’t like to think of themselves as conservatives, most are neoliberals or libertarians, so vote for Clinton-like Dems). BUT I figured that, surely, designers are open-minded when it comes to design itself, and — since they are designers creating user interfaces, and not artists — I figured that surely designers want to maximize user access and, well, usability. Guess I was wrong about that. These comments mostly demonstrate a stunning degree of dogmatism. Nearly every comment defended the common practice of setting web type at 12px or so. Most of those comments gave no reason at all except “design” (ie: it’s what the designer is used to doing, and used to seeing).

    Unfortunately though, the author of this article did himself, and his case, a *tremendous* disservice by choosing to set the article’s type at 19px. And he doesn’t explain this until late in the article, so I suspect most readers assume the article is set at 16px. (It also makes the examples of smaller type look extra-small, which is a bit deceiving, albeit unintentionally so. I think.)

    Moreover, while the author goes on about the importance of considering the diversity of users, and how users actually view webpages, the author opts for a rather obscure font to lead his font stack — and it’s his view of that particular font which leads him to set his type at 19px. He explains that he probably would have used 16px in the article had he chosen Georgia or Verdana. Well, I the article is set with Georgia on my PC, and I suspect that’s what many readers see. And Georgia at 19px really truly does look oversized. The author failed to take his own advice when he did not choose Georgia, or another very common font, to lead his font stack (or choose to use a hosted web font service which would guarantee we would see the same font). This really puzzles me because then the author, by his own admission, would have stuck with 16px had he used Georgia or another font with a very large x-height.

    (Btw, I suspect the history of web designers having to use Georgia and Verdana is what led most to reduce the default p font size to something like 12px or maybe 14px. The most recent web font releases from Microsoft — the distributor of Georgia and Verdana too — don’t look overly large at all at 16px. Constantia and Cambria look fine, or even a tad small, at 16px …or 1.0em.)

    Steve

    4
    • 453

      This comment (from Steve) absolutely nails it. I too saw the article at 19px and thought I was looking at 16px until halfway through the article. I didn’t dislike the article font at all, but it was a tad larger than necessary – ironically, 16px would likely have been perfect on my display.

      That said, I want to echo the call for a truly device-independent size unit (which points would be if browsers didn’t asininely assume 96 DPI) and, absent that, deriving all sizes as percentages from the browser’s configured default – such that the body of the text on the site is 100%. What really needs to happen is for browsers to make it super-easy (and obvious) to set the “base” font and size.

      Also, for what it’s worth, the size of the font in this comment-entry textbox is an ungodly 10.68 px. I can’t read it without straining. At least the comments themselves are OK.

      0
  324. 454

    I agree 100% with your article. But I still had IE on 125% zoom so I could read the other comments. Anyone who disgrees with you is either an idiot, young,or a webdesigner (minor shades of difference.

    3
  325. 455

    Hello I am 26 and I was straining to read the copy on the website that I was creating thanks for the information going to pass this along to other design friends

    0
  326. 456

    Great article. I’m new to web design. Only been doing it for about 2 years. I’ve known HTML and CSS for years though. But over night I redid my record labels website and made it a responsive design (was before but not perfectly).

    I’m in college right now and in english they say when doing a paper the most professional font size is 12px. So in an effort to make my website top notch I made sure all font was Times New Roman 12point. Sadly it was hurting my eyes a bit. I did a quick search on optimal font size for the web and this article was at #1. I comfortably read through it and with quicker speed.

    I just changed my site over to 16point font. I fully agree with you.

    0
  327. 457

    Great, another self-appointed expert looking for fame and fortune through cheap eZine articles. When you build the next Google, Facebook or Amazon etc. that have millions of users then I will listen to your one size fits all view on how everything should be. To me, 16px is far to large but for others it would be perfect but since browsers render fonts differently and different fonts render differently, difference screen resolutions and so on, I will leave it up to my users to decide how large the text should be. This is nothing more than a sensationalist article to try and increase click through rates for his so called free email secrets that no one else on the entire inter webs has found, well done, you have found the holy grail to the internet, have a cookie and while your munching on it, quit being cheap, unoriginal, uncreative and lazy and build a site people would actually use rather than one that looks like a scam.

    0
  328. 458

    Patrick Percy Blank

    March 17, 2014 1:12 am

    Awesome. Would you mind if I translate this WORD-FOR-WORD into German? Lets find a suitable domain and host translations there. In EVERY language.

    0
  329. 459

    When all you have is a hammer everything looks like a nail.
    In summary of all the comments about this article. The author wants to plug in a one size fits all solution regardless of context (let see his portfolio I say. The proof of the pudding is in the eating) He needs to stop thinking reductively and consider readability in context. Point size must be thought of in relation to x-hight, line spacing, line length, the amount of text on the page and in what medium and function. Context governs appropriateness. “Form ever follows function.” — L.S.

    If you all want to learn about type, start by reading one of the many good books about type that are available. Robet Bringhust’s Elements of Typographic Style is recommended reading in most university typography courses and has been for years, for good reason. surveying your audience to make design decisions will never get your work past mediocrity.

    0
  330. 460

    Alipta Ballav

    May 2, 2014 4:57 am

    Why are disclaimer text always kept in small fonts?

    0
  331. 461

    Love your article!! I am a 66 year old who loves larger fonts…because I can’t see the tiny fonts a lot of websites use. I am so glad to see it wasn’t all me…it’s a proven fact that larger is better. My other pet peeve is this light gray a lot of web designers are using. I know black can be harsh but it seems like some of them are getting lighter and lighter with there grays, especially with they pair it with a light colored background that makes the gray get lost on the page.

    And you are right, the people who need larger fonts to see don’t know about the Ctrl+ to increase the page size. Personally, I use that all the time but I didn’t have to do that with your page. I could see it clearly and enjoyed reading it. I think the size of the font depends a lot on the font style, too. Even though you used a 19 px it probably would have been ok at 16 px because of the choice of font you used.

    Those are just some of my thoughts. Thanks for the excellent article.

    0
  332. 462

    I am 56 and prefer not to use glasses to read the web and I totally agree with your article (I think all commenters should state age and whether they have to use glasses to browse so we know where they are coming from). The other thing that annoys me is sites that not only use small fonts but use a light grey to make it almost impossible to read.

    0
    • 463

      [Re: grey type]

      Here, here! The desire to make pages look “artsy” often trumps well tested comparisons about what works in typography and what doesn’t. (Ask any printer.)

      Screening back large, bold lettering in a title header can really improve the appearance of a page so it doesn’t spill too much dead black “ink”. But screening back denser, smaller body text to anything less than pure black on pure white is simply suicidal.

      0
  333. 464

    The reason for seriphs is to aid the reader with “hints” to quickly distinguish one letter from another where they are similar, which makes text (particularly body text) faster reading. Just as capitalizing a sentence more clearly marks its beginning and speeds reading. (The Romans didn’t spend all that extra time chiseling seriphs into text literally written in stone merely to make the type look prettier.)

    The popular adoption of sans-serif for body type on the web has arisen mainly because its (mostly) straight vertical and horizontal lines align nicely with the way pixels are arranged, which allows designers to use finer font weights and sizes. This was particularly true back when monitors were less capable of high resolution. The habit stuck.

    Designers design according to their preferences, but readers read according to theirs. If there’s a conflict of preference, the designer looses every time. This obvious wisdom has not yet been received by all designers.

    0
  334. 465

    Ya, the readability on mobile was my thought also … that’s where I really see the attrition even more so than on desktop as more and more people are connecting via smartphones.

    0
  335. 466

    D Bnonn Tennant, Information Highwayman

    October 7, 2011 2:27 pm

    Tom, point them to Jakob Nielsen’s excellent study on scrolling and attention.

    That’ll shut them up :)

    0
  336. 467

    Couldn’t agree more. I’m finding the comment section much more appealing then the article itself.

    4
  337. 468

    LOL.. couldn’t agree more on both of you ;-)

    1
  338. 469

    Thanks! I sure will do.

    0

↑ Back to top