941-685-8851

April, 2009

Web Design and font usage

Core fonts for the Web

In modern web design production, people are often unaware about the limited selection of fonts that can be displayed on a website consistently across browsers, operating systems,  computers, and other Internet devices.

In print design, a font is permanently printed into the paper medium. A PDF document is the digital equivalent to a real world print document, as fonts on the author’s computer can be permanently embedded into the PDF document. Such font embedding insures that the  PDF document will be displayed as the author intended on any computer that has the Adobe Acrobat software installed.

A web page is much different than an Adobe PDF document. A web page does not store any fonts at all, rather it uses the fonts installed in the operating system of  the users computer. Computers have a core set of web fonts installed by default. Assorted print fonts are also installed on computers, which are intended for use in text documents, etc. Each operating systems installs the same core fonts, but the print fonts are usually different with each operating system. For example, a computer running Windows XP, may not have the same fonts installed as a computer running Windows Vista and vice-versa. A computer running Windows 7 will not have the same fonts as the Windows Xp or Vista. And a Macintosh computer will not have the same fonts as any of the Windows operating systems. So using print fonts on a web page may display correctly on your computer, but a large percentage of visitors to your website will experience display problems because that font will not be present on their systems. That is why most all computers have core web fonts installed.

When a web designer creates a web page, a list of multiple fonts are defined to accommodate multiple operating systems. For example, the most common font set on the Internet is “Arial, Helvetica, sans-serif”. Arial is a common Internet font used by Windows computers. Helvetica is a common Internet font used by Macintosh computers. The san-serif definition will allow the Internet browser to use any san-serif font, should neither Arial nor Helvetica exist on the user’s computer.

Core fonts provide web designers with a standardized minimum list of fonts to select from. By selecting from the core web fonts list, a web designer can be confident that the web page text will display as expected across all Internet platforms.

The same methods apply to serif fonts. A common serif web font set is “Times New Roman, Times, serif”, which defines a common Windows serif font, a common Macintosh serif font and a generic serif definition.

Selecting a custom font for a website can lead to unexpected inconsistencies in how the text is displayed on one computer opposed to another. For example, a web page using the custom fonts “Arial Rounded MT” or  “Helvetica Nue”, will only display those fonts if they are installed on the user’s computer and/or supported by the user’s Internet browser. If no core font substitution is defined for the web page, the Internet browser will typically substitute the custom font for the computer’s default Internet font. This can sometimes cause unexpected and undesirable results.

If a custom font is required, it will be rendered to an image, which can then be accurately rendered by any Internet browser regardless.

Here is a list of the core web fonts for Microsoft operating systems.

Font embedding is a technique where fonts are downloaded from the web server when the web page is viewed. This ensures that the fonts specified by the web designer are available to the user, and allows web designers to use fonts which are not commonly installed on most computers. This technique is controversial because most implementations do not validate whether it is legal to embed the font, and allows the font to be freely downloaded, resulting in copyright infringement and illegal proliferation through the web. Therefore, font companies resist the standardization of this technique. Font embedding is not widely used on the web, but with evolving Internet browser releases, its usage is may increase.

In the meantime, however, most web designers will continue to use the default set of core web fonts.

reference:  http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

Share