The Right Font and Text Color
The choice of font, text color, and text size is important. It affects how the webpage is experienced and how easily the information can be absorbed. Here are the basics you need to know to make the right choice.
Two common font families are serif and sans-serif. Serifs are the cross-strokes found at the ends of the strokes in fonts like Times New Roman. Fonts that belong to the serif family have these strokes, while fonts that belong to the sans-serif family (without serifs) lack these decorative cross-strokes.
Example:
Times New Roman – Arial
Times New Roman thus belongs to the serif font family, while Arial is an example of a font that belongs to the sans-serif font family.
For body text in print, serif fonts are considered more readable. On the web, where resolution is lower and small details are not as clear, a font without serifs is preferable in many situations. However, with today’s new high-resolution screens and mobile phones, we can soon disregard this and choose any font we like, as long as they are screen-friendly.
Make sure to specify multiple font alternatives in your CSS in case the visitor does not have your first choice installed or if there are issues loading the font from the font provider, for example:
body {
font-family: arial, verdana, "trebuchet ms", sans-serif;
}
Note that font names containing spaces should be enclosed in quotation marks. As a last resort, you should specify a font family that will be used if none of the previous choices are available.
You can even find suggestions for fonts that are suitable to use as alternatives based on your main choice. One such example is CSS Font Stack.
Font Size
When it comes to font size, it’s important to remember that the appearance also depends on the font you choose. For example, a font size of 12 points appears larger in the Arial font than in Times New Roman.
In general, it is recommended that the font size for body text is 10-12 points. Keep in mind that small text can be strenuous to read and may pose problems for, e.g., older individuals with impaired vision.
Text Color and Contrast
Regarding text color, it is generally true that dark colors work well for text and light, unsaturated colors work well as backgrounds. It is particularly important to consider the contrast between the text color and the background. However, even if the contrast between two colors is high, readability can still be low. For example, black text on a white background is much better than white text on a black background because the edges of the white letters appear blurry against a black background, thus reducing readability.
You can test whether your combinations of text and background colors have sufficient contrast and color difference at Colour Contrast Check.
Since many people have some form of color blindness, it may be beneficial for important parts of the content to be distinguishable in ways other than color, for example, by also underlining links.
Text color, text size, and font can all be used to emphasize different parts of the content, but be careful not to mix too many colors and fonts. Using too many colors and different fonts makes the page appear cluttered and unprofessional.
“When everything is highlighted, nothing is emphasized”
- Jakob Nielsen, Prioritizing web usability, p. 235
A quote by Jakob Nielsen about the importance of being restrictive in the choice of colors, fonts, and text size will conclude the article.