4

What is the best value for font size and line height where readability is concerned?

I myself prefer huge font size and greater line height like the one used in Dive into Python 3.

5
  • 1
    I agree with big font and line sizes by default.
    – Inshallah
    Jul 19, 2009 at 16:17
  • @Inshalla: So what is the best size?
    – riza
    Jul 19, 2009 at 16:21
  • I'll add another vote for the DIP typography - very nice and comfortable to read. However, note that it uses a fluid width, so these values will be less readable at greater resolutions.
    – Bobby Jack
    Jul 19, 2009 at 16:22
  • @Selinap: I have yet to see a page with too large a font :)
    – Inshallah
    Jul 19, 2009 at 16:27
  • 1
    Personal preference is to reset the page first to size 16px to set the base the same across the many browsers out there, then 0.85em as the general size with 1.5 line-height. Bit too general a question with no definitive answer really. Jul 20, 2009 at 10:41

4 Answers 4

7

As with every other "what's the best" question in the world, the answer to this is "there is no 'best'" :-)

For font-size, arguably the 'best' is whatever the user has chosen themselves, either as the default or the minimum. In other words, leave the font size alone for main body copy, and only increase it for headings. You might consider decreasing it by a very small amount for non-critical content. 16px is generally the browser default.

For line-height, values between 1.3 and 1.5 are typically recommended for good readability, although this varies with font face and line length.

3
  • 1
    Users generally don't choose a default. It's most often left at the default for a given browser, I think. Joel Spolsky himself has said something like that his blog is more popular because of the slightly bigger font size. Does that mean not even programmers override font sizes?
    – Inshallah
    Jul 19, 2009 at 16:26
  • Well, that's an unknown, as far as I'm aware. I would LOVE some hard evidence as to how many people change those settings. But without the evidence, it seems fair to cater to those that DO change the setting, bearing in mind they're probably the people that need it the very most.
    – Bobby Jack
    Jul 19, 2009 at 16:28
  • Yes but if they really need it, wouldn't they specify a required minimum, over which you don't have any control? If I had really bad eyesight, then I'm not going to trust websites to provide a good default font-size.
    – Inshallah
    Jul 19, 2009 at 16:38
6

According to what W3C recommended, always use relative font size (em).

use

h1 { 
    font-size: 2em;
    line-height: 2.5em;
}

instead of

h1 { font-size: 24px; line-height: 30px; }

So that user can always override the default font size.

6
  • 1
    Most browsers allow you to scale pixel fonts anyway.
    – womp
    Jul 19, 2009 at 16:25
  • Which is, arguably, incorrect behaviour. IE8 still doesn't allow this, anyway, IIRC.
    – Bobby Jack
    Jul 19, 2009 at 16:26
  • Even it works in most browser, comply to standard and if possible let the 1% edge can still render to content in full potential is always good. And the truth is, IE6 still have quite a large share in the world, and not to consider those small screen machines.
    – xandy
    Jul 19, 2009 at 16:55
  • This isn't exactly an answer to the question which was about the 'best' "value", not the best "unit".
    – Bobby Jack
    Jul 20, 2009 at 11:27
  • The best of size is the size that user can choose.
    – xandy
    Jul 20, 2009 at 23:31
2

There is no "best" font size and line height.

It all depends on the type of a site.

If it's mainly a WEB SITE with articles as the main content then bigger fonts and line heights may be better.

If it is an WEB APPLICATION then huge font sizes will prevent you from building a compact and functional interface. So you'll have to resort to typical OS font sizes.

It all depends.

0

Actually, there [is] a best font size and line height as far as “paragraph readability” on a web page is concerned. The objective of the question above is clear: readability. They did not ask for the best music or dressing style or something else that tolerates variety and different tastes; they did not ask for the best font color, or font size for my or your taste, or for old people, but the best font size and line height for specifically [readability], and there are most certainly guidelines for the best practice for that purpose. This is not a matter of taste, but a matter of optics and the mechanical how of reading; and it requires knowledge of typography too. Simplifying this to “whatever you and I like” is a gross confusion between taste and efficiency, color and health.

And I'm going to assume that the question is not asking about font sizes for titles, but for paragraphs on screen (because that's what we read mostly here on the web).

Even if we would politely label the existing guidelines as “recommendations”, they still pretty much provide an answer for the quest for “Best”. And before I share what I know, please realize that if you are not a typography designer by trade or at least very well researched in the field, then you are hardly qualified to answer the question above. And sometimes people do need excellent professionals to show them what they never realized was available, possible or existed; sometimes people are not sure what will feel or seem “best” until you actually show it to them and ask them to try it and see if they like it or if it grows fast on them. Sometimes people get used to wrong, unhealthy, or counter-productive practices, like sitting with a slouched back or reading web pages in small Times New Roman, until the wrong practice actually feels [comfortable] to them; it becomes their comfort zone! Does that mean that the “best” for them is what they habitually choose? Obviously not; not necessarily at all. And sometimes the problem is [not] even in the font size! Meaning, the user who chooses to increase the font size does not do so because of the font size, but because the line length (paragraph or column width) is way too long, or the line-height is way too tight, or there are no paragraphs at all (!) and it is just a wall of text, or the paragraph and background colors are too similar, so they increase font size to compensate for such bad-design issues, when they would've been perfectly happy with the same font size on a properly designed web page.

Now, regarding font size of paragraphs, and specifically for readability on the web, the best or recommended range is from 12px to 16px. This may change slightly if you're choosing non-conventional fonts, but that is not recommended anyway for websites. And specifying the size in px is probably preferable to pt (which is the unit used in Microsoft Word, for example) due to higher consistency in display across browsers when the size is specified in px (pixels); px for screen, and pt for print.

The argument of “whatever the user has chosen themselves” is invalid, because it assumes that the typical user changes the default font size in the browser settings at all; such an assumption is very misleading, and definitely does not represent actual data about the majority percentage or the typical Internet user who never bothers to change default browser font settings.

I respect the W3C recommendations, but today most browsers are perfectly capable of increasing the size of fonts on the screen anyway with Ctrl+(+), even if the size was specified by px, and Ctrl+0 to get the page back to original sizes. And in most cases, an informed designer is actually going to specify the font size of the paragraphs, line height, and width column so that they all compliment each other and enhance readability. So having [only] the font size of a well-designed page changed by an unaware user may actually compromise readability rather than enhance it, especially for long paragraphs. It is understandable that accessibility is important, and sometimes required for some governmental websites, but that can still be accounted for by the designer, so that column width increases as the font size is increased by the user; and in such cases, you would use the em unit instead of px, and the range would be from 0.75 em to 1 em (unless the base font size was hacked by a “body {font-size: 62.5%;}” CSS statement, then the range is 1 em to 1.6 em).

Regarding line height of paragraphs, the absolute minimum recommended is 150%. And in most cases, you should not need to go above 175%.

And again for web readability, sans-serif fonts (like Verdana) are much more highly recommended for paragraphs than serif fonts (like 'Times New Roman'). For printing, it is the opposite.

The two most recommended fonts to use on the web are Verdana and Georgia. For the best results, contrast them: best combination is Verdana for paragraphs and Georgia for titles.

You should also consider your content column width: it should fit from 75 to 85 paragraph characters (13 to 18 words) per full line in average. If lines are longer than that, web readability is compromised or slowed down; narrower than that, and your paragraphs look awkward.

Justify? No, pass on it; it slows down reading a bit, thus compromises readability, especially for fast readers (and you want fast readers to like your site!). Stick to align left for English.

The reasons for all these recommendations can be found in any popular web typography book and can be explained by most typography designers, should you really want to understand the wisdom behind in detail in order to feel convinced that these recommendations (or “best” practice guidelines) have very good reasons. Too big (or huge) a font, and readability is actually [not] enhanced, but compromised for most normal readers; too tiny a font, ditto. Why? Again, you can research that with the keywords I shared.

To summarize, for web readability of paragraphs: Verdana (sans-serif), 12—16px (not pt, and 0.75 em to 1 em when accessibility is super important), with line-height 150%—175%, 75—85 characters per line (control column width).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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