Most website visitors will make a three-second decision whether to stay on a web page based on the visual information and impression they receive. Consciously or not, their eyes will quickly scan a page for certain words, during which they are judging the page’s design for credibility. As typography and colors are a main factor in both these areas, the choices you make in the font-family and color palette are fundamental to the layout design.
A good sense of how the typography will work in tandem with your design is essential when designing any web page or graphic with text. The primary considerations are whether a font is easily readable, whether or not it is available to all your visitors (web-safe), and the impression it will convey about your business or organization (formal or casual).
Once a font style is defined, the font renders so long as your visitor has it installed on their computer; if the initial font of the “font-family” is not installed the next font in the list is loaded, and if all are absent then the default font “Times New Roman” is used.
For web pages we typically recommend Sans-Serif fonts for readability, especially with body copy. Serif fonts are often used for headings to provide differentiation between the headings and body copy.
It is important to be consistent in your use of typography, and be consistent across all your pages in font and styling. This ensures that the pages look orderly and professional
- Avoid the over use of colored text (especially red text). Typically dark grey color is best, except where you need to bring attention to a “small” section of copy, for which the color should compliment the design.
- Avoid the over use of capitalization, underlining, and bolding. Capitalization is viewed as shouting on the Web so should only be used in rare instances, and while underlining or bolding a few words can be effective, much more than this just doesn’t work well.
- Ensure that the text copy color is easily read by providing enough visual contrast. For dark backgrounds use a white color value, and for light colored backgrounds ensure that the text color is dark.
- And finally, ensure that the line height and vertical spacing between content blocks is ample enough that the copy avoids the “cramped” feel; this also helps with readability.
The following Serif and Sans-Serif font-families are presented in their type-face for assessment of how each would look in a web page.