Web Style Guide

This style guide is meant to be used for the College of Design and program websites.

Required Elements

University header, which includes:

  • U of M Driven to Discover wordmark
  • MyU and OneStop buttons
  • The search bar

College of Design header, which includes:

  • College of Design wordmark
  • Optional program or departmental wordmarks (no logos per the University of Minnesota marketing guidelines)

College of Design footer, which includes:

  • Online privacy statement
  • EEO statement
  • College of Design contact information
  • College of Design social media and blog links
  • Apply and giving links
  • Quicklinks for high traffic portions of the website

Typography

Proxima Nova and Garamond are the typefaces used on the web. The Proxima Nova family is the primary typeface used and Garamond is used sparingly for page titles and other areas where a large display font is desired. If you need help installing these typefaces on your site, please contact Calee Cecconi. Do not use generic typefaces formerly considered web safe, such as Verdana, Helvetica, and Arial.

Headings and Other Type Styles

It is important to correctly format copy on the web to comply with accessibility standards to ensure equal access to web content and to optimize our search engine results. These standards are also good rules for design, so they will help us keep our website looking its best.

Screen readers—When a screen reader is being used to scan a page, it jumps from heading to heading, reading the h1s first, then the h2s, then the h3s and so on. Think of your headings as a page outline and keep the pieces in an order that would make sense for a screen reader.

SEO (Search Engine Optimization)—Heading tags are one way of emphasizing an individual page's keywords to search engines. Heading tags are given much more importance by search engines than regular body text. They should be used to reinforce the page’s overall keyword theme.

Headings should never be used just to achieve a certain font size or color. If needed, the advancement team will add font styles to the style sheet for that purpose. Headings should also never be linked.

No extra space (multiple returns) should be added after the headings or anything else on a page. The only time extra space is needed is when a table has been included in the body of a page. In that instance, you will need to add an extra space after the table.

Heading 2

Above is an <h2> header. Main body <h2> headings use initial caps on every word unless the word is a conjunction. Heading 2 should only be used at the top of the page. Text written in the Heading 2 format is limited to 36 characters including spaces.

Heading 3

Above is an <h3> subheading. Subheadings should capitalize the first word, but lowercase all following words. Subheadings should only be used after <h2>s have already been used.

Heading 4

<h4> sub-subheading. It may be used to call out important text, but should only be used after <h3>s have been used.

Heading 5

<h5> This is to be used on rare occasions when it's necessary to draw attention to a section

Heading 6

Text

Text is predefined in the templates and css files. We are using Proxima Nova delivered from the web server. No one needs to have the font installed on their computers in order to see the font style. Text should not be centered anywhere on the page, including the main content area or in the right or left columns. Do not color text.

Links

Links are automatically set to be maroon and will style themselves. They underline when you hover your mouse over the link. Links can also be formatted by the individual in their browser preferences.

Links should always be descriptive and should not be the URL.

For example, you should not tell people to go to this page: http://www.design.umn.edu/about.

You should direct them to the About the College website instead.

Linking an email address is acceptable. For example, send email to the College of Design at design@umn.edu.

Horizontal Rule

Use a horizontal rule (for example the line above this section) to seperate sections. Please do not overuse the horizontal rule.


Images

72 DPI

jpeg or png

The banner image is 960px by 200px

Images in the main body content area should be no wider than 660px

Images in the right column: 180px

When naming an image do not use spaces, special characters, or dots.

Images are automatically uploaded to your page via Contribute.

Images should always have alt tags, they are required in Contribute when you upload an image. Alt tags provide a short description of the image. Do not give an alt tag ageneric name like "Image". Alt tags are used for screen readers and will show in place of an image if the viewer has images turned off.

Tables

Tables should be used only to display data or when images need to be aligned with text in a tabular style.

Social Media

Links to a social media profile should be included in a discreet, one-line icon/text combination at the bottom of one's contact information.

For example:

social media example

About Menu

College Offices
Employment
Diversity
Facilities
Faculty & Staff
Contact

College of Design Web Resources

The wordmark
Source files

UMN Resources

University Image Library
Stock Content Library
University Style Manual

Contact Information

For content contact Amelia Narigon anarigon@umn.edu

For general web requests, technical support, and hosting requests contact Calee Cecconi chimes@umn.edu