Return to: U of M Home
- About Standards and Templates
- Web Standards
- Web Templates
- E-mail Standards
- E-mail Templates
- PowerPoint Standards
- Social Networking Guidelines
- Resources
- Contact Us
- eCommunication Standards Home
Text Standards
Fonts for Web graphics
The font used in the Photoshop Web header graphic artwork files is Arial; a font that is common between PC and Mac and is typically preinstalled on your computer.
Substitute any font in any size you'd like for the Arial used in the Photoshop documents. If you plan to use small caps in your graphics, be sure you use a font that has a version of small caps. Using Photoshop's small caps function distorts the font.
In general, when deciding on a font to use in your Web graphics, make sure the font you choose is legible once the graphic has been saved and test it in your browser for readability. This is particularly important for type that is smaller than 14 pixels.
See Header Graphics in Template Elements for more information on how to use the graphics in the Web templates.
HTML typography
The Web templates use standard, widely available fonts for HTML typography. The font recommendation included with the original release of the templates was Verdana. Verdana is still the first choice for HTML, but other fonts have been added to the list as alternates or to accompany Verdana. This site uses Verdana for the body text and Trebuchet for headings and left navigation links.
Heading tags have been styled based on heading hierarchy.
The following table shows what tags have been redefined for the Web templates. This means that the tag does not need a "class" associated with it in order to display the style. The template styles differ slightly from the styles used on this site; differences are noted below.
| Tag | Size | Comments |
<body> |
70% | This style is the base for body text. *Modifications for the Web Depot site
include a body tag setting of 75% with an 18 pixel line height. |
<h1> Headline |
1.4 em | This style is modified for page headlines. The style <homehead> can be used in combination with <h2> headers on home pages to make those headings the same size as the <h1> headings on secondary pages. See use of heading tags for more information. *Font was changed to Trebuchet for this site. |
<h2> Headline |
1.3 em | |
<h3> Headline |
1.2 em | |
<h4>, <h5>, <h6> Headlines |
1 em bold | |
<a> |
All link styles are modified. |
Alternative fonts
Alternative fonts for HTML typography include Arial and Helvetica. Trebuchet,
Tahoma, and Lucida are also widely available for both PC and Mac
users, but you should be sure to specify a more common font as an
alternative just in case. For example, a comprehensive style sheet
specifies at least three fonts for each style, beginning with your preferred
style, such as:
font-family: "Trebuchet MS", Verdana, sans-serif;
Keep text accessible
When making decisions about text use on graphics, remember that people will not be able to change the size of the text in a graphic. This means that people who increase text size in order to read what's on your Web site may not be able to read the text on the graphics if it's too small.
