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 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 all sorts of exceptions, where the 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

Answer 2

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 3

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 4

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.

Answer 5

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.

Answer 6

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 readability¹:

• px

• dot pitch

• reading distance

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

¹ _{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.}

Answer 7

There are some odd posts and misconceptions in this thread. It appears that many people want to ignore the science and the well researched aspects of how we read and comprehend text. As it happens, I'm in the process of researching new standards on this very subject, so here's a bit of the current state of the art:

The Science of Art

Existing research has defined that optimum reading speed for normally sighted individuals, with a font at maximum contrast, is an x-height between 0.2° and 2° of visual angle. X-height is the actual vertical size of the lowercase x of a font. Obviously the actual font size will vary based on the viewing distance, but fortunately the CSS reference pixel—px—is based on visual angle. A visual angle of 0.2° is known as the critical print size, as that's the point where maximum reading speed is achieved. (Above 2°, it goes back down.)

One px is 0.0213 degrees or 1.278 minutes of arc. This is based on a device with a pixel density of 96dpi @ distance 28 inches. Device manufacturers can thus use the reference px to set a size based on intended/expected visual distance. This is discussed on the W3C CSS standards. Device manufacturers use the reference px to set actual rasterizing size based on intended distance of viewing. 16px will not necessarily be 16 device pixels. On an iPhone with a 2:1 pixel ratio it would be 32 device pixels for instance.

Thus, the critical print size for the web is an x-height of 9.4px. Depending on the specific font design, this relates to a font between 17px to 20px. This resulted in accessibility standards that indicate that 18px is the minimum desired font size.

But Wait There's More

There is also a critical contrast level. The above mentioned font sizes relate to a maximum contrast. But what about for lower contrasts? Many designers are seriously impacting the readability of their sites by using lower contrast colors. Part of this is due to the failure of WCAG 2.0 in specifying correct contrasts relative to spatial frequency. 4.5:1 is more than needed for a big fat headline, but 4.5:1 is insufficient for small thin body text.

For normally sighted, critical contrast could be as low as 10% for big fat headlines at the peak of the contrast sensitivity function. But at the very high spatial frequencies of small thin fonts, contrast needs to be 20+ times higher. See the following diagram, where all text is in the same CSS color (and this is not even discussing the way antialiasing mangles text contrast beyond all recognition).

Thus, Font size along with contrast and a number of other design features work together provide a "most readable" text. Regardless, a 12px font size that many posters in this thread are recommending is shockingly too small, and where they came up with that figure is anyone's guess. You could use something like 12px for perhaps a copyright notice or something that you don't want anyone to read, but 12px is by no means an appropriate size for content text.

The Glyphs Have It

The official recommendation is the minimum size of 18px, nevertheless some fonts such as Verdana (a font designed for web use) may work well down to 16px. But Times New Roman should never be set at less than 18px as it has a very small x-height, and generally poor readability (thanks Microsoft, ugh). For another font that Microsoft mangled, let's try not to ever use "Courier New", where Microsoft took what was a generally readable monospaced font and then made it far too thin and light. Like, what were they thinking?

For some general considerations on font choice for accessibility and readability, I have this preliminary PDF on my research gate account that you can download for free: https://www.researchgate.net/publication/336679010_Evaluating_Fonts_Font_Family_Selection_for_Accessibility_Display_Readability

A Most Important Closing Comment

More important than what you set as a font size, is that you allow users to ZOOM text to whatever size they want without breaking content. The current standard specifies zoom 200% without breaking, but that is insufficient. 500% is much more reasonable from the user's perspective.

CONSIDER:

20/20 is average vision. The font sizes I mention above (18px) are based on this average 20/20 user. 20/40 needs TWICE that size for the same perception. 20/200 users need TEN TIMES that size (i.e. they may want to zoom 1000%). I mention 500% as a minimum as that considers the implications of the fact the page has larger fonts on it as well as the device physical size.

A technology that is missing that is in research right now is zooming up smallest fonts but zooming up the larger fonts less, so that large headlines don't become too big for readability.

In the meantime, just consider that a large portion of the people that are reading your site do not have a monitor as good as yours, and do not have eyesight as good as yours. If you want and idea of how your site might be seen by some less fortunate, get a cheap, junky, small, low res monitor (you might have one in storage), and set it 3 to 4 feet away (i.e. more than a meter away). Can you read your site? Now zoom the text—does your site break because of the confines of the small monitor?

This is the kind of issue many users have with many sites. Just because you have 20/15 vision and a beautiful 32" retina display does not mean that your users have nearly that level of visual accommodation.

-Andy

Answer 8

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 9

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 10

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 11

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 12

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.