Font size and line height for a Web page - html

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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