University of Minnesota
University Relations
http://www.umn.edu/urelate
612-624-6868
myU OneStop


 

Go to eCommunication Standards home.

Text Standards

Fonts for Web graphics

The font used in the Photoshop Web header graphic artwork files is Neutraface. Use Neutraface, or substitute any font in any size you'd like.

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, make sure the font you choose is legible once the graphic has been saved. Test it in your browser for readability. This is particularly important for type that is smaller than 14 pixels.

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. The new templates use Arial.

Alternative fonts

Alternative fonts for HTML typography include Arial and Helvetica. Trebuchet, Tahoma, and Lucida Grande are also widely available for both PC and Mac users, but be sure to specify a more common font as an alternative just in case. A comprehensive style sheet should specify at least three fonts for each style, beginning with your preferred style, for example:
font-family: "Trebuchet MS", Verdana, sans-serif;

Yahoo User Interface

The text.css style sheet included with the templates uses the Yahoo User Interface (YUI) fonts sizing chart to modify a number of tags. This, coupled with the reset.css style sheet, will help you keep your font sizes consistent across browsers and platforms.

For more information about these style sheets, see YUI Reset CSS and the Yahoo User Interface site.

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.

Driven to Discover fonts

The font used in the Photoshop files is Neutraface; available for purchase here:

Neutraface Text Demi

Neutraface Text Bold

Neutraface Text Demi Italic

Neutraface Text Bold Italic

All four Neutraface fonts