Readability and font sizes

Posted by Leon on . Filed under: Notes. 10 comments.

What makes a readable screen font?

Preliminary notes for an article:

What is a ‘good’ font size for reading from a screen?  Lots of variables:

  • screen size/resolution
  • age/eyesight of viewer
  • length of paragraph
  • measure of paragraph
  • reader’s taste

I’ve always assumed that larger font size = more readable, but having read Vivien’s critique of my website, comments on the iA site and through listening to my work colleagues, I’m not so sure.

Garamond example

Garamond - not a body copy font

Can anyone point to any research on this?

Does the font type (serif vs. sans) have any effect?  I think that Georgia at 16px looks great and reads great, am willing to admit that helvetica/arial (and sans in general) not so much.

Congruence of taste and readability – emotional aspect?

Possible cop out – respect the user’s setting by specifying font-size: 100%, p {font-size: 1em;}.  Except – how many people actually change this setting.  Do you know any normal, non-geek people who do this?  Are there any stats on this?

Any pointers, ideas etc. welcome.

Comments

  1. Felipe Dário says:
    December 2, 2008 at 10:19 pm

    “Larger” is so relative… A 20px Verdana, Arial or Georgia, for example, may look to bold.

    I try to keep with the user default for body copy.

    Thanks for your excellent articles!

    Reply
  2. Leon says:
    December 3, 2008 at 5:06 pm

    Hi Felipe,

    Thanks for the comment – good to know you get something from the articles.

    Yes, that’s part of the problem: the subjectivity. I currently have body copy set to 100% 1em, which, in theory, lets the reader decide. Except I doubt most people know how to change their default settings, let alone bother. And when people say they find 16px helvetica/arial hard to read, or that it’s ‘ugly’, then that causes a problem.

    Reply
  3. Nox says:
    December 11, 2008 at 11:58 am

    I notice that designers tend to prefer smaller font sizes than users do. I have no idea why that might be, but it’s something I’ve seen often.

    Some interesting discussions about font szes/typography for the web:

    Arial vs Vernada?

    What’s the right default font size for a website?

    Reply
  4. Leon says:
    December 11, 2008 at 9:22 pm

    Hey Nox,

    Firstly, thanks for the links—very helpful.

    Secondly—I think designers prefer small text because it looks like nice, even–edged boxes rather than an uneven, unjustified mess.

    Reply
  5. Chris Johnson says:
    December 15, 2008 at 5:13 pm

    Obviously I’m just one case, but I’m in my 20s and I would say that 16px text is probably just a tad larger than I would choose for myself. Then again, I tend to lean toward the screen more than I should, so maybe 16px is perfect for leisurely reading?

    In any case, I don’t think you can go wrong in the 13px-16px range when it comes to body copy. At 12px I definitely want to “zoom” the page.

    Reply
  6. Leon says:
    December 16, 2008 at 9:47 am

    Chris – yes, 16px text, especially sans-serif, often seems to rub people up the wrong way. It’s this ‘emotional’ response I’m interested in: is it just a matter of ‘taste’, do readers somehow feel patronised by it (by a ‘toy town’ font size) or does it somehow make for more difficult reading in some circumstances?

    I do think there is an issue with a shorter measure and larger font sizes: I’ll probably increase the measure in the next site redesign.

    Thanks,

    Leon

    Reply
  7. Michael Tuck says:
    January 2, 2009 at 5:07 am

    My upcoming article in SitePoint about font stacks will answer all these questions…. LOL, it won’t answer any and will probably start fights. But at least the questions will be addressed. I spent two months doing some relatively intense research and I can give you one honest answer to the question of “the right default font size for a site:” damned if I know. I do know that 99.94% of users (give or take) don’t know where their browser settings are, much less how to reset them, so we have to design with that in mind.

    Andrea Gardino, whom Leon was kind enough to steer me towards, does lovely work with Georgia as his main typeface, largely through subtle tweaking of line-height and letter-spacing, and by designing for the typeface.

    Reply
  8. Leon says:
    January 2, 2009 at 8:23 am

    Michael,

    Firstly, thanks for taking the time to sprinkle my blog with so many comments!

    Yes, I agree – and having done some digging around on the internet the question now seems flawed because the (non)answer is so self evident.

    I’ve always sized text using font-size: 100%/1em so that it respects the user’s settings, but, as I state above, that’s a bit of a cop out.

    There’s a lot of web design folk lore out there: measures of 66 characters or 10-15 words, leadings of 150% font size, golden ratios etc. but little “science”.

    What I have learned is that the choice is contextual (i.e. relates to many other settings, such as measure and leading) and variable (i.e. dependent on monitor quality, reader age etc.) Then there’s the final aesthetic considerations.

    Reply
  9. Michael Tuck says:
    January 3, 2009 at 1:58 am

    This is a frequent subject of discussion on SP’s forums, and it isn’t settled there, either. One of the guys whom I respect the most, Dan Schulz, agrees with you:

    I’ve always sized text using font-size: 100%/1em so that it respects the user’s settings

    You’re in good company, and I don’t think you’re copping out.

    Reply
  10. Leon says:
    January 3, 2009 at 9:22 am

    I don’t think you’re copping out

    In as much as I don’t have to make a decision about font size. But, as you say, no–one bothers changing the default font size, so no–one’s making the decision (if that makes sense).

    I guess more people do resize text on the fly (doesn’t Safari place the resize buttons on its toolbar by default? But no New tab button? Odd.) It’d be grand if you could measure how many people are resizing text.

    Anyway, the current version of this blog has text that’s sized absolutely (body copy 14px). I think all modern browsers excepting IE6 can resize absolute units with no problems, so I’m veering towards using this approach in the future.

    Reply

Add a comment