Overview of text, characters, and fonts

Text, and the use of it, is one of the largest contributions to most website pages. Text and characters are used to communicate and deliver information to the reader. When large blocks of text are displayed, it is important that it is styled to visually please the reader, as well as being easily readable.

Plain Text is a term, which is used to describe text that does not contain attributes such as fonts and styling. It is readable by almost all computer programs. In one respect, HTML code, CSS, and XML files are all plain text, but they also contain structural tags included with the characters.

A Character is a symbol. It can be a letter, a digit, or a punctuation mark, as well as a range of other informative symbols. Characters represent units of information.

A Font (also fount) is traditionally defined as "a complete character set of a single size and style of a particular typeface".

In the early days of the Web there was plain text on screens. This text could only have one style applied to it, making most web pages look very similar in text formatting, such as this screenshot of an early web page designed by Tim Berners-Lee in 1991:

In general, the fonts that were used on computer devices (for screen viewing) were usually transpositions of popular offline printing styles, for example those for printed books. In early web pages, there were only a small number of typefaces available for use. The one main typographic constant that was used was a font called "Times New Roman" (for Windows), and "Times" (for MAC). These early computer typefaces were almost always members of the serif font family (or serified fonts).

Serif fonts are an imitation of hand written characters, and their style is usually enriched by (calli) graphic embellishments. A serif is a flick added to the tips of the lines that make up the character. An example of a serif font typeface (Times New Roman) is as follows; note the serifs (flicks) on each character:

The five main font families are:

Next to "Serif" another popular font family is sans-serif or sans serif. A sans-serif typeface is one that does not contain the small character embellishments (serifs) at the end of the strokes. The term comes from the French word "sans", meaning "without".

Sans-serif fonts have now become the de-facto standard typeface for general body text that is viewed on screens. This is partly due to screen resolutions not being able to show the (serif) embellishments clearly, and a number of fonts residing in the "sans-serif family" have been created especially for screen view, such as the following example called "Helvetica". This having been said, do not write off fonts in the "serif" family, as these are also popular web font options.

Many tests have been performed regarding usability of typefaces residing within these font families, especially when they are delivered on computer screens. With the characters having to fit a relatively small pixel grid on screens, it is considered by designers that sans-serif fonts lend themselves more naturally to being digitized for screen view.

Fonts have been a popular method of stylizing plain text for centuries. You may be surprised to know that a number of the fonts installed on your computer will be older than you think. For example, Wikipedia quotes that the serif font "Times New Roman" was commissioned by the British newspaper "The Times" in 1931 and "Helvetica" first made its debut in 1957.