Font Families By: Jonathan Bird

What is a font? First, what is a font? A font is a grouping of the same type and style of characters, often in the same size. By not using a single font, it will make for a very confusing and disorienting read. For example: T he c hicken d e c i d e d t o c r o s s t h e r o a d i n o r d e r t o e v a d e t h e h u n g r y f o x. For this reason we use one continuous typeface, or font, in order to make it more coherent and easier to read.

What is a font family? A font family is the typeface, or font, that will be displayed by a web browser. The font family allows for a web developer to choose how a user will view the text on the web page. If no font family is chosen by the developer, then a default font is displayed by the browser. While this is good, since otherwise there would be no text displayed, it limits the options and visuals that a developer may want.

Main font types There are three main font typefaces, serif, sans-serif, and monospace. Serif: A serif font is a typeface that has small lines attached to the letters. Sans-Serif: A sans-serif font does not have the serif lines. Monospace: A monospaced font is a font wherein all characters take up the same amount of horizontal space. This makes it so that all the characters line up in columns across a page. There are hundreds of font types and one of the easiest ways to find examples of what they look like are go to a word processing program, such as Microsoft Word, click on the font drop box as demonstrated to the right, and look at the font names. For an online list go to:

What font family should be used? Serif fonts are generally used for the body of a written page, because it is said that they are easier to read than sans-serif when in texts. Examples of serif: ° Times New Roman ° Bodoni ° Rockwell Sans-serif fonts tend to be used for headings in print and the main typeface for computers. Examples of sans-serif: ° Calibri ° Tahoma ° Arial Monospaced fonts are used when consistency of space is needed. Examples of monospace: ° Courier ° Lucida ° Consolas

How to add a font to HTML5 There are a variety of places where someone can code in a font family. In the body tag, heading tags, paragraph tags, or anywhere else that text will display. The manner of writing the code is very similar, as demonstrated below. Body: When a font attribute is added to the body tag, the chosen font family will be used throughout the page as the default font. ◦ Headings: When a font attribute is added to a heading tag (,, etc.), paragraph or other text, the chosen font family will overwrite any default font families until the closing tag. ◦

Conclusion It is important to be able to distinguish between serif and sans-serif fonts and the manner in which to use them. Serif for print, sans-serif for computer. Coding font families: <style=“font-family: _____”