eCommunication Standards.

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.
Uses Verdana Regular in templates. Set at 70%, this style ultimately controls the size of all text on your site.* See Clagnut: How to style text using ems for more.

*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.
Uses Verdana in templates.*

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.
Links are set to gray and turn maroon on hover.

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;

Tips

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.

Go to top of page.