56

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.

12 Answers 12

34
+50

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

|improve this answer|||||
  • 1
    Hmm. It seems I understand and agree with idea, but according to online calculator, 16px is 12pt. So, the answer should be a bit edited, something like this: "Taking distance into account, the 18px on the screen and 12pt in the book seem about the same size. 12pt on paper = 18px on screen". – john c. j. Jul 7 '17 at 23:51
  • It might be "widely debated" but only by those that don't know the STANDARDS nor the SCIENCE. For body text, best reading speed is an e-height of visual angle of 0.2 to 2 degrees, so x-height of 9.4px which is a font size of 18px or more. 18px is the suggested standard per W3C/WAI, by the way. – Myndex Dec 18 '19 at 18:01
  • Obviously things have changed a bit since 2010 with a lot of website viewing being done on mobile devices - which may be held closer to the user. A PC screen is now the 'worst case' scenario. – PhillipW Dec 21 '19 at 18:34
20

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

|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
  • There is most certainly an optimal font size, and it is academic and well known, at least by science. Optimum reading speed is a font size with an x-height of a visual angle between 0.2 and 2 degrees. CSS reference px are defines by visual angle, and thus the optimum minimum x-height is 9.4px, so the font-size should be at minimum, 18px. To be sure, there is some variance relative to font design, but 18px to 180px is "optimum" for size in general. – Myndex Dec 18 '19 at 18:17
  • Though certainly contrast and context are important factors, but even they have "critical" points. Once above the critical point, further increases do not help reading speed. Critical print size is 0.2 degrees visual angle. Critical contrast at peak CSF is 10% for normal vision (1.1:1) peak CSF is a stroke width of about 8px, so very large/bold. Contrast and weight are TIGHTLY interrelated — larger weight needs less contrast. Small thin body text needs 10:1 – Myndex Dec 18 '19 at 18:26
9

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.

|improve this answer|||||
  • 2
    +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
  • 5
    "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
  • 6
    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
  • 12px is TOO SMALL and a fail for accessibility. Web STANDARDS suggest 18px. – Myndex Dec 18 '19 at 18:17
7

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.

|improve this answer|||||
  • Which definition of ‘point’ (in respect to dots, pixels, millimetres or arc-minutes) is being used there? – Crissov Mar 31 '16 at 11:29
  • In this case, 1 points equals 1/72 inches – Martin Apr 19 '16 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 '16 at 7:45
  • 2
    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 '16 at 7:59
  • It's become something of a de facto standard that a CSS px will correspond to 2 arcminutes. Of course, users can always adjust to preference. – mm201 May 14 '19 at 19:11
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.

|improve this answer|||||
  • how do you specify the default em size? – Midas Mar 31 '16 at 10:37
  • 1
    @Midas you don't - the user does – user151019 Dec 22 '16 at 13:36
  • @Midas you set the default em by setting the root em size, aka rem. – Myndex Dec 18 '19 at 18:21
3

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.

|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
  • CSS px are anchored to the CSS reference pixel which is the visual angle of one pixel, 0.0213 degrees or 1.278 minutes of arc. This is based on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length of 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. – Myndex Dec 18 '19 at 17:08
2

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.

|improve this answer|||||
  • 12px is far too small, and is a fail for accessibility, BUT you are correct that your site should allow user zoom without breaking. The current standard says 200% zoom minimum, though we're working to change that, with 500% zoom being a goal. – Myndex Dec 18 '19 at 18:13
2

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

|improve this answer|||||
  • CSS px are anchored to the CSS reference pixel which is the visual angle of one pixel, 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. – Myndex Dec 18 '19 at 17:31
2

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.

|improve this answer|||||
0

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/

|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
  • If the user haven't changed their default, you should assume they probably think the default is fine. And the default of 16px is a very sensible default because if the font size is smaller, it's no longer an identifiable font because the stroke widths be thinner than a pixel.(The contrast will suffer as well since it will be semitransparent) – Stein G. Strindhaug Sep 7 '16 at 8:28
  • 16pt and 16px are two different sizes. pt and px are different. 16pt is roughly 21px. 16px is 12pt, and 15px to 16px is the minimum size for body text, which roughly equates to the print standard of 11pt to 12pt. – Myndex Dec 18 '19 at 17:14
0

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

contrast sensitivity curve sowing relation to text size

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

|improve this answer|||||
-1

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.

|improve this answer|||||
  • 3
    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

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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