Fonts

A font is a specific collection of characters, usually with a consistent design, used to display text on a screen and when printed. There are a variety of font technologies in use, depending on the specific computer system being discussed. However, all fonts are defined by some basic properties.

Font Characteristics

There are a number of features that define how a font looks when it is displayed. Two of the most important are:

  1. whether the font is serif or sans-serif
  2. whether the characters are monospaced or proportional.
sans-serif font
serif font

Fonts that are sans-serif have character designs that are cleaner than serif fonts, which add small embelishments to the designs. The two examples on the right show the same letters in both a sans-serif font (top) and a serif font (bottom). The images also link to pages on Wikipedia describing these types of font. Serif fonts are typically used in printed media, but their extra details are sometimes considered too fussy to display clearly on low resolution computer displays. Because of this many web designers prefer to use a san-serif font for their main text.

Proportional vs Monospaced typeIn fonts that are monospaced (sometimes called "fixed pitch" or "fixed width" fonts) all the characters take up exactly the same horizontal space, regardless of the letter. That is the letter "i" takes up as much space as the letter "m" in a monospace font. In a proportional spaced font, the letter "i" will take up less room than the letter "m". The graphic on the right shows two relevant examples and links to the relevant page on Wikipedia.

Bradley Hand ITC FontIn addition to these traditional font characteristics, there are many fonts in use now that have a more "decorative" appearance. Some of these fonts are Curlz MT Fontintended to mimic handwriting, such as "Bradley Hand ITC". These are usually called cursive fonts. Other fonts, such as "Curlz MT" are even more ornate, and are usually called fantasy fonts.

Specific Fonts

The font that is used to display the text on a web site has a big impact on the appearance and readability of the site. There are a number of basic font choices that Dreamweaver gives you. The following examples show the same piece of text in different fonts. The size of the text has been increased slightly to make the font differences clearer. Note that each font is displayed at the same size, namely 16pt, but some fonts still look larger than others. This is due to the design of the typeface, and you should be aware of these differences when specifying a font on your web pages.

You can use the input below to set a size for the displayed fonts so you can see how they look (this feature works in Firefox, Chrome, Opera and Safari, not in Internet Explorer before v9. For an insight into the JavaScript used to get this font size change to work, click here):

 

  • Arial
  • Courier
  • Georgia
  • Helvetica
  • Times New Roman
  • Verdana
  • Bradley Hand
  • Curlz MT

The font that is used to display the text on a web site has a big impact on the appearance and readability of the site. There are a number of basic font choices that Dreamweaver gives you. The following examples show the same piece of text in different fonts. The size of the text has been increased slightly to make the font differences clearer.

This tab shows the Arial font. This was one of the core fonts for the web. It is a sans serif font with proportionally spaced characters.

http://en.wikipedia.org/wiki/Arial

The font that is used to display the text on a web site has a big impact on the appearance and readability of the site. There are a number of basic font choices that Dreamweaver gives you. The following examples show the same piece of text in different fonts. The size of the text has been increased slightly to make the font differences clearer.

This tab shows the Courier New font. This was one of core fonts for the web. It is a serif font with monospaced characters.

http://en.wikipedia.org/wiki/Courier_New

The font that is used to display the text on a web site has a big impact on the appearance and readability of the site. There are a number of basic font choices that Dreamweaver gives you. The following examples show the same piece of text in different fonts. The size of the text has been increased slightly to make the font differences clearer.

This tab shows the Georgia font. It is a serif font with proportionally spaced characters.

http://en.wikipedia.org/wiki/Georgia_(typeface)

The font that is used to display the text on a web site has a big impact on the appearance and readability of the site. There are a number of basic font choices that Dreamweaver gives you. The following examples show the same piece of text in different fonts. The size of the text has been increased slightly to make the font differences clearer.

This tab shows the Helvetica font. It is a sans serif font with proportionally spaced characters.

http://en.wikipedia.org/wiki/Helvetica

The font that is used to display the text on a web site has a big impact on the appearance and readability of the site. There are a number of basic font choices that Dreamweaver gives you. The following examples show the same piece of text in different fonts. The size of the text has been increased slightly to make the font differences clearer.

This tab shows the Times New Roman font. It is a serif font with proportionally spaced characters.

http://en.wikipedia.org/wiki/Times_Roman

The font that is used to display the text on a web site has a big impact on the appearance and readability of the site. There are a number of basic font choices that Dreamweaver gives you. The following examples show the same piece of text in different fonts. The size of the text has been increased slightly to make the font differences clearer.

This tab shows the Verdana font. It is a sans serif font with proportionally spaced characters.

http://en.wikipedia.org/wiki/Verdana

The font that is used to display the text on a web site has a big impact on the appearance and readability of the site. There are a number of basic font choices that Dreamweaver gives you. The following examples show the same piece of text in different fonts. The size of the text has been increased slightly to make the font differences clearer.

This tab shows the Bradley Hand ITC font. It is a cursive font with proportionally spaced characters.

http://www.microsoft.com/typography/fonts/family.aspx?FID=83

The font that is used to display the text on a web site has a big impact on the appearance and readability of the site. There are a number of basic font choices that Dreamweaver gives you. The following examples show the same piece of text in different fonts. The size of the text has been increased slightly to make the font differences clearer.

This tab shows the Curlz MT font. It is a fantasy font with proportionally spaced characters.

http://lmnop.blogs.com/lauren/2006/10/americas_most_f.html

 

Clearly care should be used when using the more decorative fonts as they become very hard to read if they are used for large bodies of text!

Font Families

One problem that designers for the web face is that they cannot guarantee what fonts the user will have available on their computer. Designers used to working with print media sometimes have difficulty getting used to this aspect of web design.

For example, the fonts typically installed on a Windows PC are different to those installed on a Mac. This is important because the web browser can only use the locally installed fonts when it is displaying a page. To solve this problem, designers specify a font-family when they are creating type on a page.

For example, the font-family used to specifiy the type style on this site is:

Verdana, Arial, Helvetica, sans-serif

This says to the web browser that it should use the Verdana font to render the page if it is installed on the user's computer. If that is not installed, then it should use Arial (a typical Windows equivalent) and if that is not installed it should use Helvetica (a typical Apple equivalent) and finally, if none of those fonts can be found, it should use any available sans-serif font.

You can compare these fonts using the tabs above. On a Windows PC the Helvetica font will actually probably be rendered using Arial, whislt on an Apple computer the reverse will be true - the Arial font will probably be rendered using Helvetica.

The Code Style web site has an excellent glossary of font-family terminology here:

http://www.codestyle.org/css/font-family/Glossary.shtml

Web Safe Fonts

Just as there is the idea of a web safe colour, so there are web safe fonts. These are the fonts that you can be reasoanbly confident will be available on every computer. The W3 Schools site has a page showing the web safe font families:

http://www.w3schools.com/cssref/css_websafe_fonts.asp

Note that they include a number of fonts that Dreamweaver does not include in its default font-family settings. You can also find some good font comparisons on the following page:

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Font Face

The latest version of CSS introduces a new feature called @font-face, which is intended to solve the problems with fonts on the web and, eventually, remove the need for the idea of web safe fonts. This new mechanism allows the web designer to specify the web location of a font. Then, if your user does not have a required font installed locally on their machine and, if the font-face feature is supported by your user's browser it will download the necessary font from the specified location and display the page correctly.

However, this is still not completely straight forward. At the time of writing, Internet Explorer supports fonts in the .eot (Embedded OpenType) format, whilst the other browsers all support the more commonly available .ttf (TrueType Font) format. This means that you will have to specify two separate download locations for the two font formats.

But, things will probably change, there is a third format, .woff, (Web Open Font Format) which is gaining support and will almost certainly be standardized by the W3C. This format is already supported by all the most recent versions of the browsers.

You can read more about using font face here...