: Recommended font size and font family for website content What font size and family is recommended for a web site's content to make it more readable for the readers or visitors?

@Murray976

Generally speaking, 16px is standard. It is recommended by Typecast, Smashing Magazine (ironically the article now uses ~20px font size for my device), UX.SE, most common browsers, and many other sources. 16px corresponds with 12pt font in most books read at the same distance. Each of the links here are good reads on the subject if you want to read more reasoning.

With that being said, it's alright to vary depending on the context because there are a lot of factors in regards to readability including (the broad topics of) audience, purpose, and other typographic qualities. For pages with a lot of information that isn't meant to be read all the way through, it's recommended to go with a slightly smaller font size, somewhere from 12-14px.

Pulling from a related answer of mine talking about the optimal font size:


As is the case with most everything in design, how your content is presented should differ based on what you're presenting and who you're presenting it to. StackOverflow has great type (IMO) for it's use because it conveys a lot of information in a relatively small space while staying clean. [It uses a 14px font size]. However, I would never use a font so tight and small as this on a personal blog.

Personally, I love the type on Jeff Atwood's blog Coding Horror. He uses 17px font size for desktops and a line height of 27px (both determined by ems). For mobile he takes the text down to 15px and the line height to 24px. The font he chose is Open Sans, a very common and solid choice, with sans-serif as a fallback.


As hinted at, readability of a font is also based on the contrast, line height (very important), and font family. The weaker the contrast, the bigger your font likely needs to be. For readability of longer bodies of text, having a bigger line height can really help readability. For example, in my Chrome article reader extension I use a 16px font with a 1.75em line height.



Readability of font family, check out this GraphicDesign.SE post asking about the best font for readability.

The debate between serif and sans-serif is also a very big topic that should be addressed separately. For more on that, check out this GraphicDesign.SE post and a similar question on UX.SE.



For more detail, read the links throughout this post.

Vote Up Vote Down

@Heady304

I would think about modern and sans serif fonts that are easy-to-read, and tend to be on the narrow side. I like Oswald font myself. It's also a Google-based font. Like Angie was saying above, 13 to 14 point would be a good place to stay.

Vote Up Vote Down

@Rambettina927

If you're dealing with an older audience and vision issues are a concern, Verdana really makes the most of it's pixels. 11px in Verdana is close to 14 in many others.

For the very same reason, many people think Verdana is the ugliest font on the web. As always, be careful how you use your type. Verdana and Georgia were both designed by one of the greatest type designers of the modern era (Matthew Carter) and intended for small, on-screen use. Don't go crazy and use it everywhere ... are you listening Ikea?

In terms of style (I assume you mean weight), stick to 'regular' or 400 for the bulk of your text. In many fonts bold is a little too dark / dense for easy reading.

Be sure you test your font / size / weight on various browsers and systems. Right now, I would peg IE 7 on Windows XP as the most brutal abuser of type among the major players. I have seen IE 8 surpass it with some web fonts. IE 9 takes a new approach that can thin fonts out but they generally look okay. Most everything looks best in Mac browsers. It all depends on your ever-critical site stats.

Vote Up Vote Down

@Shelley591

100% is the stock answer. But to be more specific, most accessibility guidelines suggest at least 11px.

But in and of itself, this question is fairly vague and lacking a whole lot of context.

Vote Up Vote Down

@Angela777

Not sure what you mean by font "style". But for font size, it will somewhat depend on the font, but 13px is a good starting point for regular text. 14px is often better. Of course, that's if you're using pixels for font-sizing. Matching that with ems or % isn't difficult though.

You may also want to consider using CSS/Javascript to change the font size dynamically based on a user clicking on +/- or similar.

Vote Up Vote Down