Is there an optimal font size?

Question

For most website projects I've been involved with, the font size for the bulk text is usually 12px - 13px, but I'm wondering if this is a good size. I remember reading an article saying that font sizes on websites should be much bigger, around 17px for bulk text to match printed font sizes.

Is there an optimal font size. When is something too big/small for the average user?

Is there any pro/cons for small/medium/large font sizes?

Update:
I would like to get your experience with actual tests user reactions etc. It's easy to this, this and that is too big or small, but I've learned that users sometime surprise and react differently from expert opinions.

Also the ability to change font sizes is a good discussion, but it's not what's asked for here. What I'm interested in knowing more about, is how users react to different font sizes, not how they should be able to change it.

Answer 1

This is a widely debated subject. One of the best ways I've seen this explained, is from the presentation Design for developers: making your frontends suck less by Idan Gazit.

This had the following slide: This is 16pt text on a normal screen, and 12pt text in a book. The message is that 12pt is excellent for a book, but is also usually held much closer to the reader than a screen. Taking distance into account, the 16pt on the screen and 12pt in the book seem about the same size.

There are obviously all sorts of exceptions, where smaller text is preferred. But for optimal readability of longer text, I agree with 16pt.

Answer 2

12px seems to work fine for most people. Having something at 17px makes it harder to read, and so does having it below 10px. I think 12-13px is a good guideline.

But really, you should set your text size to something like 1em. This is because some browsers will not allow users to resize text if it is set in pixels. No matter what text size you have, people with sharp eyes will make it smaller so they can read more, and people with bad eyesight will make the text larger.

Just set things at 1em, and let people and their browsers work out the rest.

It is good to test your page with different font sizes though, to see if the layout remains manageable.

Answer 3

There's no such thing as an optimal font size. Looking for one means that you're forgetting something important: legibility of text is not solely a product of size.

I've built around a dozen websites as a UI designer in the past five years, and they've all had different audiences. One of the things I found was that size isn't the biggest factor. It's a combination of different aspects related to displaying text:

• contrast
• font family
• line height
• position on the page

Combining these leads to a rough metric for overall legibility and I've found that to be the most important design target for text.

As an anecdote from testing (since you asked): I worked on a community site with 700k monthly visits where the main audience was non-computer savvy users. We used 12px Verdana for body type and 14px-16px Arial for titles. Occasionally we would drop to 11px Verdana in grey for less important text. When doing usability tests on the site, we received feedback not about the size of the text, but about how the surrounding colours of the design made it feel like you were staring into a lamp. We interpreted this as the site being too bright and adjusted the contrast of the entire design to be less bright. Partially due to these changes and partially due to changes in the navigational structure, we saw a significant month-on-month increase in pageviews per visitor.

One thing to remember about small font sizes is that they have a purpose: when you need something to be smaller than something else (duh!). But as a UI designer it's important to remember that your job is to create clarity and usability (amongst other things) in the interface, and that by de-emphasizing some elements of the UI you can improve its usability. It's up to you to decide which elements should be scaled down, and which aspects of the text should be modified (from my list above).

Answer 4

12px is fine, but what's also important is that users have the ability to increase the font size themselves and that your site is not broken when this happens.

Answer 5

You shouldn't try to set a font size. You can use +N to indicate "make this bigger than the baseline" (or -N to make smaller). Any size you specify will be wrong in some circumstances; the only workable option that doesn't require users to take corrective action on your site is to let the browser decide.

Answer 6

You should never use pixels for font sizes. Trying to read 14px fonts on a 12" screen that supports Full HD resolution will give you text in 1-2 mm high characters (and a headache in much less than an hour).

Answer 7

I agree with Erik, 16pt seems to be the best standard as far as readability goes. Read more here: http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/

Answer 8

The largest I have ever worked with is 14px. Larger than that is too big for anything I have seen.

To make text readable the space between the lines is very important. When I set the text to about 13px I will set the line-height to about 19px this gives a nice amount of space above and below the text making it much easier to read.