User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

11 Answers 11

up vote 23 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 16px 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 16px on the screen and 12pt in the book seem about the same size. 12pt on paper = 16px on screen

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

It is advised to change the scalable units like em or % than the fixed-size units like pt or px. Read more: CSS Font-Size: em vs. px vs. pt vs. percent

share|improve this answer

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
1  
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

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
4  
"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
5  
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

According to recent scientific evidence:

  • 18 and 22 points will lead to significantly improved objective readability (measured with eye-tracker)
  • 10 and 12 points will lead to significantly impaired comprehension (measured with comprehension questions)
  • the larger the better, because objective readability continuously improves with increasing font size.

Don't take my word for it. Read the details in the scientific paper.

share|improve this answer
    
Which definition of ‘point’ (in respect to dots, pixels, millimetres or arc-minutes) is being used there? – Crissov Mar 31 at 11:29
    
In this case, 1 points equals 1/72 inches – Martin Apr 19 at 20:18
    
No, it doesn’t. From text and pictures, I gather that the study was conducted in 2012 using Spanish Wikipedia articles shown in a maximized window on a 17-inch XGA (1024 × 768 pixels 4:3) TFT monitor using Firefox (< v20) running on Windows (XP?) at a viewing distance of ca. 60 cm. That means they’re really using the CSS unit pt which corresponds at a fixed rate of 4:3 with px, which should relate 1:1 to screen pixels under the present conditions. The screen measures nominally 345 × 259 mm, so 12 pixels are ca. 4 mm, i.e. there are about 75 points per inch. Close, but not equal to 72. – Crissov Apr 20 at 7:45
    
I don’t contest the findings, though, that larger is better. I just find it strange that such details are often ignored even in peer-reviewed scientific studies, but so are line length, font smoothing/anti-aliasing, text and background color, script, language etc. – Crissov Apr 20 at 7:59

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

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

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

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
    
Interesting comment. Do you have any supporting evidence around your claim that readability increases with those 3 metrics? – mieze May 5 '15 at 5:06

Optimal font size is individual and is set by users' OS/browser. So don't change it.

If you need to enlarge font (e.g. headings), do it relatively (e.g. 200% or 2em).

Never shrink font size and always keep good contrast to maintain readability.

share|improve this answer
    
how do you specify the default em size? – Midas Mar 31 at 10:37

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

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
2  
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
3  
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
2  
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
3  
@MattRockwell That’s the headline. – Lenar Hoyt Jan 2 '13 at 23:23

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.