What is the optimal font and size to use for the text in a body of a website, to allow for easiest reading?

These are worth reading, and changed the way I work: http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/ http://www.informationarchitects.jp/en/100e2r/

Regarding font size, a scientifically backed recommendation would be:* 18 or 22 points to maximize readability and comprehension* 10 or 12 points to significantly *impair* comprehensionassuming websites for desktop computersThere is a lot of recommendations out there, and many tell you to use 12 points. I have not yet found scientific evidence that backs this up.Most of the scientific studies on the topic were published in the 2000s and earlier, which means most of them are outdated (see paper below for a detailed review). Most of them compared font sizes 10, 12, 14 points. They consistently found that bigger font sizes lead to better outcomes, but I was not able to find any study that includes font sizes bigger than 14 points.In a study that will soon be published at ACM's top scientific conference on Human-Computer Interaction, we will present new evidence about http://pielot.org/2016/01/optimal-font-size-for-web-pages/, suggesting that font sizes bigger than 14px lead to even better results. In brief, my colleagues had 104 people read Wikipedia articles with six different font sizes (10, 12, 14, 18, 22, 26 points) and tracked their reading with an eye-tracker. The eye-tracker allows to measure the average fixation durations, that is, the average amount of time that the eye is resting on the same spot. As established in previous research, fixation duration is an objective measure for the readability of text: the longer the fixation duration, the more effort the reader is making, the more difficult the text is to read.In the data, we found that the mean fixation duration significantly decreased until font sizes 18 and 22 points. This is evidence that websites are objectively easier to read when the font sizes are 18 or 22 points.There is more evidence for avoiding 12px. For each text, we asked a comprehension question. People answered significantly less questions correctly for font sizes 10 and 12 points! If you go with 12 points or smaller, people may even understand less of the content of the website.Study details are available in the paper: http://pielot.org/pubs/Rello2016-Fontsize.pdf

The very specific answers here are what I would give assuming you are displaying on a desktop with 72-96 dpi. I'll add that it depends on the capabilities of the device is being used as well as user preference. I'll go with the crowd as they are accurate for the devices we have been using on desktops and they also apply to some first generation tablets and smart phones. Next year we will tip to having most people read pages on very different devices. Globally most people use the web with a mobile device now and more than half of those use their mobile device exclusively. This is likely the direction your target market is going. Their new devices display capabilities with regard to contrast, DPI, and size will be very different than what we have been developing for for the last 15 years. Look for larger pixel sizes, more serifs and more medium to thin font weights in the near future. The average age of an american is going up as is the relative buying power of that demographic as well as their leisure time and participation on the internet. Font point sizes may need to go up also to accomodate for aging eyes. This is all what is optimal for reading by the majority on devices. I have guidance for severe myopia, and for different media that we'll save for another day.

Another proponent of 16 px, which I support: http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/ As for which font, choose a common one. Studies suggest that being familiar with a typeface is more important for readability than which typeface it is. At 16px with anti-aliasing now common, there shouldn't be too many technical issues as far as type needing to be optimized for on-screen viewing like Verdana.

In general I think one should still prefer sans-serif fonts over serif fonts because the little details of serif fonts often look bad on the screen. Also the thickness of the font should be relatively consistent, but that's mostly the case anyway. A little detail to look out for is the counter e.g. of the letter 'a' or 'e', which should be wide open in order to differentiate the letter from others like the 'o'. In small font-sizes 'e' and 'o' can look very similar and because the eye is just scanning whole words very fast these letters can be confused. The font-size mainly depends on the font-style itself because some fonts seem or actually are bigger than others in the same size. I wouldn't recommend something under 14px. But line-height and column-width also play an important role and therefore can influence the legibility dramatically.

I use body {font-size: 16px;} as part of my standard reset at the opening of any doc I plan to post as a site. From there I use ems for text size and rems for everything else. So, I guess my default text size for main copy is 16px. Another way to handle this, and leave the decision entirely up to the viewer, is to set font size for the body as 100%. Then use ems and rems as above. This way body copy will display at whatever the user has set for a default size, and your adjustments for headers, strong, margins, line-height (for web I set line-height at 1.5, or 1.5 rem) and padding will all adjust automatically to fit that default size. This assumes you're using ems and rems instead of px for all your sizes. The advantage of the percentage way (for main copy font size) is that it is tied to what the user has selected as it relates to their viewing device. It makes your layout adaptable to any pixel density, so long as the user has set their default font size appropriately.

I really don't think there is an "answer" to this question, just starting points. I've done sites whose target audience is almost entirely the elderly, and that results in a completely different set of requirements including HUGE ugly fonts that I never would have picked for myself. In general though, for body copy I usually stay around the 12px size of the 'standard' fonts such as Arial and Helvetica.

I think optimal is really whatever the end user thinks is optimal. I design for section 508 compliance by specifying font sizes in ems in order to allow the user to scale them as they see fit using their browser or a control I provide. The hard part is that sometimes the design can fall apart when font sizes get really big . That's just part of the challenge of designing to include people with disabilities. Your audience may have nearsightedness, they may be color blind, and they may use assistive technology not well suited to clicking on tiny little links. On a side note: For ease of reading long news articles I often turn to a "bookmarklet" called Readabilty http://lab.arc90.com/experiments/readability/ to eliminate all the noise on a page.

I build one CSS Typography Framework called Better Web Readability Project http://code.google.com/p/better-web-readability-project/ the aim is to improve the reading experience on the web. Also I made Azbuka http://code.google.com/p/azbuka/ for meaningful web typography based on the golden proportion.