Over time a standard has developed that the body text of online articles should be displayed in a sans-serif font. Most of the popular websites on the internet, like Facebook, Google, BBC News, Amazon use sans-serif fonts.
The reason for the shift towards sans-serif fonts online arose because in the early days of the internet usage, computer monitors were not sufficiently advanced to show the serif font without it becoming fuzzy and poor quality. Sans-serif fonts displayed much better and consequently, these fonts were said to have greater “legibility” when viewed online – that means human eyes find it easier to differentiate the individual letters as they read.
On paper, for most people the reverse is often true, where the display quality is better and the small lines on the serif font help guide the eye along the lines of text.
Overtime, although monitors have improved in leaps and bounds, and can display the font more clearly, web users sub-consciously expect fonts to be sans-serif – and if the well-known sites are using sans-serif then it makes sense to emulate their successful formula where possible.
What do Serif and Sans-Serif Fonts look like?
Here’s an example of a sans-serif font.
-
The quick brown fox jumps over a lazy dog
[Verdana]
The sans-serif font shows letters with more separation and space between them. There are no small details at the tips of each letter to make them flow and connect together as complete “words”.
…and a serif font
-
The quick brown fox jumps over a lazy dog
[Times New Roman]
The serif font has the smaller details showing, and these small lines tend to make the letters looked linked and this suggestion of a connection helps the eye scan words when printed on paper.
Personal Opinions Can Influence the Choice of a Website Font
There is a common cultural perception that serif fonts are more appropriate for “serious” and “conservative” writing, for example in legal or academic circles, and that the sans-serif fonts are more “casual” which can understandably encourage some site owners to opt for a serif font – no business wants to be seen to be creating an unprofessional image online.
If there is pressure within the organisation to adopt a particular font, the best thing to do is to run some tests.
Test Your Font
As always, it makes sense to determine what your visitors would prefer. If you look at your website stats for the screen resolution and the latest browser types and see that the majority of your visitors are using the latest, most high-quality technology, then it is less risky to opt for a serif font.
Tip: You might also want to think about the size of your font as well as the font-face since older visitors, or those people with impaired vision prefer a larger font-size. Popular sites often have a font-size adjustment link on the top right hand side of the screen, so the person can pick the size that’s perfect for them.
TIP: If you’ve used CSS with your website, it’s quick to try out some alternative fonts and see what works best for your visitors by checking quick font helps them read the information quickly and effectively.
TIP: Check your website copes OK when the font size is increased, and doesn’t start getting clipped and overwritten.
Make Sure You Pick a Commonly Installed Font
A final point is to make sure whichever font you pick is one commonly found on Windows, Mac and Linux PCs. Don’t pick an exotic font that is rarely used, otherwise your visitors PC will have to make a substitution and use a similar font – that means your efforts to do something different will largely go unnoticed.
TIP: If you want to make sure your site is shown with the most appropriate font, in the unlikely event it’s not available on your visitors computer, you can specify alternatives in your cascading style sheet (CSS) file.
body {
font-family: Arial,Helvetica,Verdana,sans-serif
}
