Return to: U of M Home
- Template Downloads
- Templates in UMContent
- Template Change Log
- Resources
- Contact Us
- Web Depot Home
- Web Standards:
Using the Templates 
Why
Use
Templates?- Template
Elements - All-CSS
- Table-based
- Graphic, Text, &
Color Standards - Coding Standards
& Best Practices - Policy Compliance
- Accessibility
Graphic, Text & Color Standards
The University Web templates incorporate all elements required by policy and follow all online standards.
Electronic publication standards are outlined below. Contact Web Depot with questions about electronic standards not covered here.
Wordmark
The University wordmark is the official logo and must appear on all electronic University publications. Because it is incorporated in the Web template header, using the template takes care of this requirement and the wordmark does not need to—and indeed should not*—appear anywhere else on a site [see unit logos for more information].
The wordmark graphic has been recently updated. The letters have been cleaned up and are easier to read on a screen, and the maroon background is now #7A0019. For template users, the size and name of the Web graphic has not changed, making it easier to update any current sites with the new graphic.
* Note: The wordmark may be used within a Web page when combined with the Driven to Discover campaign. See the question and answer templates on the Brand Guidelines site for more information.
Minimum size and buffer space
The Web templates incorporate the wordmark at its minimum size for use on electronic publications—220 pixels wide. Standard buffer space requirements around the wordmark have been adjusted for Web template use.
Use of the wordmark on other electronic publications should leave a buffer space the height of the letter "N" between the wordmark and other graphic elements or the edge of the screen.
Placement
University Web sites must have the wordmark at the top of their pages to comply with University policy and maintain consistency and recognition as a University site. Placement of the wordmark at the bottom of a Web page is a violation of University Web publishing policy. Use of the templates ensures proper placement of the wordmark.
On all other electronic publications, the wordmark should be prominent and visible on the first screen. This typically means placement at the top of the "page," but, when appropriate, can mean placement at the bottom, as seen on the PowerPoint templates on the Images Library.
Color
For Web, always use the wordmark included with the template downloads—a white wordmark on maroon background. Never change the color of the wordmark, the background color, or create alternate versions of the template header.
The official electronic maroon and gold in combination with white must be used for all electronic versions of the wordmark. An RGB file of the wordmark is available on the Images Library for use with various electronic applications. Acceptable color combinations include:
- gold wordmark on maroon background
- white wordmark on maroon background
- maroon wordmark on white background
Block M
The block M graphic has been updated since the last release of the Web templates. The M is a solid, flat gold (vs the "extruded M" from past templates), and the maroon background has been changed to #7A0019. The size and name of the M graphic have not changed, making it easier to update any current sites with the new graphic.
Use the block M in addition to the wordmark, not as a substitute for it (this excludes student organizations, which may not use the wordmark).
Use of the block M in other locations on Web pages and any electronic publications should follow the guidelines below.
Minimum size and buffer space
The Web templates incorporate the block M at its minimum size for use in electronic publications—37 pixels wide. Standard buffer space requirements around the block M have been adjusted for Web template use.
Use of the block M in electronic publications beyond the Web templates should leave a buffer space the height of the letter "N" between the block M and other graphic elements or the edge of the screen.
Placement
In the Web templates, the block M must be on the left side of the wordmark. See Accessibility for an explanation of the "skip to main content" link associated with the block M.
Color
For Web, always use the block M included with the template downloads—a gold M on maroon background. Never change the color of the M, the background color or create alternate versions of the template header.
An RGB file of the block M is available on the Images Library for use in various electronic publications other than the Web templates. The official electronic maroon and gold must be maintained.
Block M as a Graphic Element
University Relations must approve any electronic design that uses the block M as a graphic element. This includes designs that:
- Use the block M in a pattern.
- Crop, screen or otherwise alter the logo.
Driven to Discover
A new feature in the Web template header, Driven to Discover has been added to reinforce the University's initiative to convey the benefits of a public research university to the state and help the U reach its goal of becoming one of the top three public research universities in the world. The graphic should be used 'as is' in the template header. The graphic size, position, and use of the service mark (SM) have all been balanced for use according to University graphic standards.
Driven to Discover must always be combined with the wordmark. Use for electronic publications other than Web should follow the guidelines on the Brand Guidelines site. Driven to Discover and wordmark combinations are available on the Images Library.
Web header graphics
Layered Photoshop header graphic artwork files with University images can be dowloaded from the Web Depot and used to design your site's headers. Units that choose to make their own header designs are encouraged to use maroon and gold as the prominent colors. For more information, see the template color palette.
Ideas for header graphics (beyond what you'll find in the Photoshop download) can be seen in this example. If you choose to use a background image that does not incorporate maroon or gold, do not carry that image's color into the color scheme for the rest of your site. For example, if you use a background image with a blue sky, do not use that same blue in your text headers.
Design change
The original University templates featured a seconday header that spanned the entire width of the page. This design made the left navigation jump down when linking from the site's home page to a secondary page. The new design allows you to eliminate that jump by using the 610-pixel-wide header graphics on your home page and all secondary pages.
For more information about how to use header graphics with the templates, see Header Graphics in the Template Elements section.
Unit logos
Placement of a unit logo on a Web site will depend on the design, but should follow these rules based on use of the templates:
- Unit
logos that have been designed to incorporate the wordmark should
have the wordmark removed from their unit logo/wordmark combination
for online use. The wordmark should appear in the template header
only—do not repeat the wordmark.
- Unit
logos may not be incorporated into the template header.
- Unit
logos may be incorporated into the graphic header or serve as a
graphic link back to your home page and be positioned
where your unit home link would typically go in the left
navigation. See these examples:
- Unit name on a home page in left navigation
- Unit name on a secondary page in left navigation
- Unit name on a home page in graphic header
- Unit name on a secondary page in graphic header
Unit logos for other electronic publications
When using the wordmark and your unit's logo for electronic publications beyond the templates, refer to the standards for print in the Graphic Standards Manual.
Electronic color palette
Primary colors—Maroon or gold or both should be prominent in any electronic publication color scheme. The official colors are:
Secondary colors—Shades of tan or gray are the recommended secondary colors for electronic use. The colors below have been tested on various screens and monitors for maximum consistency.
Light and dark versions of the electronic maroon and gold can be used as secondary colors. When using white text on maroon backgrounds, be sure to test on various browsers, platforms, and monitors for readability. Text in the samples below is Verdana.
Units may incorporate other colors into their electronic publications, but may not change the maroon background behind the wordmark or the maroon and gold block M combination in the Web templates.
Fonts for 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.
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;
On this page
- Wordmark
- Block
M
- Driven to Discover
- Web
header
graphics
- Unit
logos
- Electronic
color palette
- Fonts for graphics
- HTML typography
Electronic publications
Electronic publications include, and are not limited to:
- Web sites
- E-mail
- Video
- Electronic signage
- PowerPoint presentations
