Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
add comment

9 Answers

up vote 14 down vote accepted

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: alt text 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.

share|improve this answer
add comment

No.
...not in px, anyway.

The right units for expressing an optimal size, if there is one, would be angle subtended on the retina.

If you are looking at px, you are looking at only one of three factors necessary to determine readability1:

Dot pitch, or the proper definition of "resolution" (pixels/distance), is how you convert from px to an actual distance.

Reading distance you need, of course, because characters of the same dimension are not equally readable everywhere.

...and of course readability goes up with:

  • higher px
  • higher dot pitch (or lower resolution)
  • lower reading distance

1 There is also the text colour, the background colour, the font, etc. (bold text that is black on white needs a smaller size than does italicized text that is yellow on orange), but px, dot pitch, and reading distance cover what you need for a decision based solely on dimension.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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/

share|improve this answer
    
Though note that 16px isn't a specific size. It's still entirely dependent on screen resolution, screen sizes and distance from the viewer. The technically correct answer is '100%' as, in theory, a user would have set their defaults the way they like. Of course, that's rarely true as well. So, well, there is no perfect answer, unfortunately. –  DA01 Jun 1 '11 at 20:17
add comment

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).

share|improve this answer
    
Unfortunately, more often than not, text size and other aspects were defined by the graphic designer (11px Verdana at #999 on white background ARGH!) and that person was tough to deal with when trying to inform them that, hey, this is illegible for most of the people visiting the site. So, some meta-advice is: get on that as early as possible, and don't let the graphic designer run off with the text! –  Rahul Aug 23 '10 at 11:28
add comment

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).

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
1  
Ironically your answer and all of the answers on this page are written in 16px text, which is what seems to be a standard for many sites. –  Matt Rockwell Jun 1 '11 at 17:25
2  
Actually, Matt, they're set to a percentage so would depend on your browser settings. In my case (default Chrome) the answers are the equivalent of 14px. –  DA01 Jun 2 '11 at 5:28
2  
@DA01 - true, browser settings would take control of that, but the css for this site explicitly states 16. –  Matt Rockwell Jun 2 '11 at 12:21
1  
It does? I'm seeing 100% in firebug, though now that I look a bit deeper, I see .post-text {font-size: 14px;} –  DA01 Jun 2 '11 at 13:37
2  
@MattRockwell That’s the headline. –  mcb Jan 2 '13 at 23:23
show 1 more comment

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.

share|improve this answer
1  
+1 for being the only one so far to mention not using px fonts and also for saying to use 1em, but that's not as important as the former :) –  Charles Boyung Aug 13 '10 at 5:20
3  
"some browsers will not allow users to resize text if it is set in pixels" - the number of browsers that work this way is decreasing quickly. Additionally, while considering that 12px is a good standard today, make sure you pay attention to your audience, as those with larger screens and resolutions may find 12px is becoming a tad small and hard to read. –  Rahul Aug 23 '10 at 11:15
    
The number of browsers that don't resize is indeed dropping quickly - but I'd wager that there's a large overlap between those who need larger font sizes (due to failing eyesight) and those who keep using what's on the machine because that's what came with it. –  Bevan Jun 1 '11 at 23:45
3  
Let's not say 'some browsers' but rather 'crappy versions of IE'. It's always IEs fault. Let's not forget that. ;) –  DA01 Jun 2 '11 at 6:50
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.