A large portion of the content on the World Wide Web is presented in a text form. The aesthetic presentation of text content on a website is one of the most important tasks for web designers. Through the years, their creative impulse has given birth to various text design types, more popular as fonts. The long and ever-increasing list of text fonts is one of the main factors for the great diversity of websites we see today.
What is a Font
In the language of web designers a font is the combination of properties for a set of characters including typeface, size, pitch, and spacing. The typeface is the most important quality of a font, defining the shape of each character. The size refers to the character's height (measured in points), the pitch indicates the number of characters displayed per inch and spacing shows the distance between all characters in a word.
Font families
The wide variety of fonts on the Internet is organized into groups, called font families. The fonts within a font family show typeface similarities and can be therefore used in combination on certain web pages. The font family members may differ from each other in a way that one of them may be bold, another italic or using small caps, etc. For instance, the Arial font family includes the original Arial font, the Arial Black font, which is bold, and Arial Narrow, which is thinner than the rest. Some of the most popular font families include Times New Roman, Verdana, Helvetica, etc.
Font families in turn can be grouped into different categories depending on the criterion used. A very popular classification is the one of the five generic font families, which is used for the purposes of CSS, a widely used mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. It includes the groups of the proportionally spaced serif fonts (Times New Roman, MS Georgia, etc.) and sans-serif fonts (MS Trebuchet, Univers etc.), the handwriting-resembling cursive fonts (Adobe Poetica, Sanvito, etc.), the decorative fantasy fonts (Critter, Cottonwood), and the fixed-width monotype fonts (Courier, MS Courier New).
Windows fonts / Mac fonts / Font family |
---|
Arial, Arial, Helvetica, sans-serif |
Arial Black, Arial Black, Gadget, sans-serif |
Comic Sans MS, Comic Sans MS5, cursive |
Courier New, Courier New, Courier6, monospace |
Georgia1, Georgia, serif |
Impact, Impact5, Charcoal6, sans-serif |
Lucida Console, Monaco5, monospace |
Lucida Sans Unicode, Lucida Grande, sans-serif |
Palatino Linotype, Book Antiqua3, Palatino6, serif |
Tahoma, Geneva, sans-serif |
Times New Roman, Times, serif |
Trebuchet MS1, Helvetica, sans-serif |
Verdana, Verdana, Geneva, sans-serif |
Symbol, Symbol (Symbol2, Symbol2) |
Webdings, Webdings (Webdings2, Webdings2) |
Wingdings, Zapf Dingbats (Wingdings2, Zapf Dingbats2) |
MS Sans Serif4, Geneva, sans-serif |
MS Serif4, New York6, serif |
The fonts within a certain generic font family are arranged in a pre-defined order and the main purpose of the family used in CSS is to tell the user's browser which font to display the text content in as an alternative if the font specified by default is not supported by that particular browser.
Web-safe fonts
Fonts have been created to be both displayable and printable, so that what we see on the web could be presented on a printed copy with the same style effects. Almost all text-supporting software programs and applications (text editors, WYSIWYG web design tools, printers etc.) give users the option to choose from a default collection of fonts and to load additional ones if necessary. The "default" web-safe fonts are supported by a wide range of computer systems, and are used on web pages. With web-safe fonts in use the possibilities for the contents of a website to be displayed in the chosen font go up. When the visitor’s browser doesn't support any of the specified fonts for a site, it selects an alternative web-safe font instead.