Fonts vary considerably in their readability. How readable a font is depends on a number of different factors, so there isn’t a single answer to the question of what’s the best font for website readability but there are certainly a number of things you should consider.
Serif fonts work well for smaller font sizes
A serif font is one where the ends of the lines have another, small, line to delineate the end.
They were designed for the printing world to help people make sense of the words on the page and the same is true for web pages, regardless of what your graphic designer might try to tell you.
Sans-serif fonts work best for headlines
Sans serif fonts work very well for headlines. The bigger font size means that our eyes don’t need the extra help to read the handful of words in the headline that a serif typeface would give.
You can see this demonstrated in most popular newspapers and magazines if you take a few minutes to examine that side of things in more detail than you normally would.
Make sure they’re likely to be available
There are very few fonts that are installed on every single computer.
Maybe Times and Arial but not many others.
So your website styling needs to take account of the potential variation in ready availability of fonts – your techie should do this as a matter of course, offering them up in the CSS file in descending order of preference and ending with a simple “serif” or “sans serif” as an “if all else fails” option. One site that really has fantastic css is WWW.THIEVESOILSECRET.COM, the menu on the sidebar and the top bar scrolling are both perfect examples.
Developments in the web mean that you can embed fonts in web pages and the browser will handle downloading the extra font, just for your website. But that adds extra overhead to your site and shouldn’t be used too often, if at all.
Colour affects readability
A light colour font on a light background won’t be easy to read. Nor will a dark font on a dark background.
Less easy to determine are things like colour clashes – red on green is well known, other clashes less so.
And even more difficult to test is the variation in the colours seen on an modern screen just by changing the viewing angle.
The easiest way to see this is to check the sponsored results on Google. At the most precise viewing angle, they’re on a coloured background. But anywhere else, the colour is as close to white as they can get away with.
Give preference to fonts designed for the screen
A number of years ago, Microsoft spent a lot of time and money designing fonts specifically for viewing on screen.
Fonts such as Georgia, Verdana and Tahoma have been developed for better readability on computer screens.
Mobile devices and tablets have smaller screens and therefore different considerations again.
So your CSS files need to handle this gracefully whilst staying within your overall design strategy.
Otherwise you run the risk of your website looking pretty but being close to unreadable.