MSU Web Standards

1. Introduction

A visitor’s first impression of Michigan State University online must be a positive one. Perceptions of MSU’s quality, value, and standing are affected by the visitor’s experience when browsing university websites, reading content, accessing information, and using web-based services.

MSU Web Standards provide guidance on web elements and practices that are required for every institutional web page.

MSU campus street light at night.
Figure 1-1 Sample page showing the main components of the MSU web page layout: MSU Masthead, Search Tool, site name, content area, and Standard Footer, as well as web typography (font styles) - view full resolution

1.1 Recommended Elements and Practices Checklist

Create intuitive, useful, and positive web experiences for audiences by including these elements and practices in every MSU web-based communication and interface:

2. Layout (HTML) and Style (CSS)

MSU campus street light at night.
Figure 2-1 Sample MSU layout and required elements - view full resolution

2.1 Checklist: MSU Masthead and Search Tool

  • Make the Masthead and Search Tool 60 pixels tall (measure from top of page down).
  • Align them with the top margin of the web layout.
  • Vertically center the MSU Masthead and Search Tool within the 60 pixels.
  • Align the MSU Masthead with left web page content margin.
  • Align the Search Tool with right web page content margin.
  • Do not place any additional elements within or above this region.
  • Do not fill the top 60 pixels of the web page with a background color or image that is different from the background used in the website’s design.

2.2 Checklist: Standard Footer

  • Make 73 pixels tall
  • Place below the web layout
  • Align with left web page content margin
  • No additional elements within or below this region

2.3 Style (CSS)

IMPORTANT: Sample code is provided as a guideline in implementing the technical requirements indicated in the MSU Web Standards for the MSU Masthead, Search Tool, and Standard Footer. Website owners may have to modify the sample code in order to achieve the desired results and correct responsive behavior.

CSS sample code does not include styles that enable responsive behavior (as each website will vary) but can be used for legacy (non-responsive) websites with little or no changes:

/*****************************************************************************************************/
/*                                                                                                   */
/*  Branding - MSU Masthead, Search Tool and Standard Footer                                         */
/*  Verify your website’s font size/weight/color to current branding styles for lines marked "V2.0"  */
/*                                                                                                   */
/*****************************************************************************************************/

/* #Set Page Width
================================================== */

.MSUwrapper {
    width: 100%; 
    max-width: 940px; 
    min-width: 940px; 
    margin: 0 auto; 
    clear: both;
    /* Branding styles */
    /* The following allows the Masthead and Footer to use Gotham font without affecting the rest of the site.  */
    /* If the site is already using Gotham font, the following (or similar CSS) should be moved to the body CSS */

    font-family: 'Gotham SSm A', 'Gotham SSm B', arial, sans-serif;    /* V2.0 */
    font-weight: normal;    /* V2.0 */
    font-size: 16px;        /* V2.0 */
    font-size: 1rem;        /* V2.0 */
    -webkit-font-smoothing: antialiased;                   /* Fix for webkit rendering  */
    -moz-osx-font-smoothing: grayscale;                    /* Fix for firefox rendering */
 }

/* You may have to adjust the max-width and min-width to fit the width of your site. 
If the margin is set differently for your site, fix the margin here to reflect that. */

/* #MSU Masthead
================================================== */

#MSUheader {
    height: 60px;
}

#MSUmasthead {
    width: 50%;
    float: left; 
    position: relative;
}

#MSUmasthead img.msugraphic-green {
    padding-top: 12px;
    display: block;
}
#MSUmasthead img.msugraphic-white {
    padding-top: 12px;
    display: none;
}

#MSUmasthead img.print-msugraphic {
    display: none;
}

/* Search Tool */

#MSUSearchTool form .hide {
    position: absolute;
    left: -9999px;
}

#MSUSearchTool {
    width: 50%; 
    float: left;
    position: relative;
    margin-top: 14px;
}

#MSUSearchTool #search-tool-box {
    height: 28px;
    width: 319px;
    float: right;
    border: 1px solid #999;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-family: 'Gotham SSm A', 'Gotham SSm B', arial, sans-serif;
}

#MSUSearchTool.white-fill #search-tool-box {
    background: #fff;
}

#MSUSearchTool.no-fill #search-tool-box {
    background: transparent;
}

#MSUSearchTool #btn_search {
    height: 28px;
    width: 34px;
    cursor: pointer;
    outline: 0px none;
    border: 0px none;
    float: right;
    margin: 0 auto;
    text-indent: -9999px;
    text-transform: capitalize;
    -webkit-border-radius: 0px 3px 3px 0px;
    -moz-border-radius: 0px 3px 3px 0px;
    border-radius: 0px 3px 3px 0px;
}

#MSUSearchTool.white-fill #btn_search {
    background: #fff url(../images/icon-search.png) no-repeat center;
}

#MSUSearchTool.no-fill #btn_search {
    background: transparent url(../images/icon-search.png) no-repeat center;
}

#MSUSearchTool #btn_search:hover {
    -moz-box-shadow: inset 0 0px 60px rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 0 0px 60px rgba(0,0,0,0.3);
    box-shadow: inset 0 0px 60px rgba(0,0,0,0.3);
}

#MSUSearchTool input[name="q"] {
    width: 258px;
    background-color: transparent;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    color: #666;
    font-size: 12px;
    font-weight: normal;
    float: left;
    height: 28px;
    outline: none;
    padding-left: 12px;
    padding-top: 0px;
}

/* #MSU Footer 
================================================== */

#MSUstandardFooter {
    height: 170px;
    font-family: 'Gotham SSm A', 'Gotham SSm B', arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#MSUstandardFooter .fourMSUcolumns {
    width: 221px;
    float: left;
    position: relative;
    margin-right: 18px;
}

#MSUstandardFooter .fourMSUcolumns img {
    width: 100%;
    margin-top: 8px; 
}

#MSUstandardFooter .thirteenMSUcolumns {    /* V2.0 */ 
    width: 660px; 
    float: left;
    position: relative; 
    margin: 5px 0px 0px 0px;
}

/* Website information with Call Us/Telephone (Footer line 1) */

#MSUstandardFooter #standard-footer-site-links ul {
    margin: 0px;
    padding: 0px;
    height: 22px; 
    border-bottom: 1px dotted #808080;
    float: left;
    clear: right;
}

#MSUstandardFooter #standard-footer-site-links ul li {
    display: inline-block;
    padding-left: 4px;
    font-size: 12px;    /* V2.0 */
    font-size: 1rem;    /* V2.0 */
    margin-left: 0px;
    margin-right: 0px;
}

#MSUstandardFooter #standard-footer-site-links ul li:first-child {
    padding: 0px;
}

#MSUstandardFooter #standard-footer-site-links ul li:nth-child(2) a {
    padding: 0px 8px 0px 8px;
}

#MSUstandardFooter #standard-footer-site-links ul li:last-child a {
    border-right: none;
}

#MSUstandardFooter #standard-footer-site-links ul li a {
    text-decoration: none;
    padding-right: 8px;
    font-weight: 500;     /* V2.0 */ 
}

#MSUstandardFooter #standard-footer-site-links ul li a:hover {
    text-decoration: underline;
}

#MSUstandardFooter.light-background #standard-footer-site-links {
    color: #18453b;
}

#MSUstandardFooter.light-background #standard-footer-site-links a {
    color: #18453b;
    border-right: 1px solid #18453b;
}

#MSUstandardFooter.light-background #standard-footer-site-links ul li:nth-child(2) a {
    border-left: 1px solid #18354b;
}

#MSUstandardFooter.dark-background #standard-footer-site-links{
    color: #fff;
}

#MSUstandardFooter.dark-background #standard-footer-site-links ul li:nth-child(2) a {
    border-left: 1px solid #737373;
}

#MSUstandardFooter.dark-background #standard-footer-site-links a {
    color: #fff;
    border-right: 1px solid #737373;
}

/* Website information - no Call Us/Telephone (Footer line 1) */

#MSUstandardFooter #standard-footer-site-nocall-links ul {
    margin: 0px;
    padding: 0px;
    height: 22px; 
    border-bottom: 1px dotted #808080;
    float: left;
    clear: right;
}

#MSUstandardFooter #standard-footer-site-nocall-links ul li {
    display: inline-block;
    font-size: 12px;    /* V2.0 */
    font-size: 1rem:    /* V2.0 */
    padding-left: 4px;
}
#MSUstandardFooter #standard-footer-site-nocall-links ul li:first-child {
    display: inline-block;
    font-size: 12px;    /* V2.0 */
    font-size: 1rem;    /* V2.0 */
    padding-left: 0px;
}

#MSUstandardFooter #standard-footer-site-nocall-links ul li a {
    padding: 0px 8px 0px 8px;
}
#MSUstandardFooter #standard-footer-site-nocall-links ul li a:first-child {
    padding: 0px 8px 0px 0px;
}

#MSUstandardFooter #standard-footer-site-nocall-links ul li a {
    padding-right: 8px;
    text-decoration: none;
    font-weight: 500;     /* V2.0 */
}

#MSUstandardFooter #standard-footer-site-nocall-links ul li a:hover {
    text-decoration: underline;
}

#MSUstandardFooter.light-background #standard-footer-site-nocall-links {
    color: #18453b;
}

#MSUstandardFooter.light-background #standard-footer-site-nocall-links ul li a {
    color: #18453b;
    border-right: 1px solid #18354b;
}
#MSUstandardFooter.light-background #standard-footer-site-nocall-links ul li:last-child a {
    border-right: none;
}

#MSUstandardFooter.dark-background #standard-footer-site-nocall-links{
    color: #fff;
}

#MSUstandardFooter.dark-background #standard-footer-site-nocall-links ul li a {
    color: #fff;
    border-right: 1px solid #737373;
}
#MSUstandardFooter.dark-background #standard-footer-site-nocall-links ul li:last-child a {
    color: #fff;
    border-right: none;
}

/* MSU information (Footer lines 2-3) */ 

#MSUstandardFooter #standard-footer-MSU-info {
    font-size: 9px;          /* V2.0 */
    font-size: 0.5625rem;    /* V2.0 */
    margin-top: 2px; 
    padding-top: 0px;
    float: left;
    clear: right;
}

#MSUstandardFooter #standard-footer-MSU-info ul {
    margin: 0px;
    padding: 0px;
    height: 16px;
    font-size: 9px;          /* V2.0 */
    font-size: 0.5625rem;    /* V2.0 */
}

#MSUstandardFooter #standard-footer-MSU-info ul li {
    margin-bottom: 0px;
    line-height: 10px;
    display: inline;
    border-right: 1px solid #999;
    padding: 0px 8px 0px 4px;
    margin-left: 0px;
    margin-right: 0px;
}

#MSUstandardFooter #standard-footer-MSU-info ul li.spartans-will {
    text-transform: uppercase;
    font-weight: 600;    /* V2.0 */
}

#MSUstandardFooter #standard-footer-MSU-info ul li:first-child {
    padding-left: 0px;
}

#MSUstandardFooter #standard-footer-MSU-info ul li:last-child {
    border-right: 0px;
}    

#MSUstandardFooter #standard-footer-MSU-info ul li a {
    text-decoration: none;
}

#MSUstandardFooter #standard-footer-MSU-info ul li a:hover {
    text-decoration: underline;
}

#MSUstandardFooter.light-background #standard-footer-MSU-info{
    color: #18453b;
}

#MSUstandardFooter.light-background #standard-footer-MSU-info a, #MSUstandardFooter.light-background #standard-footer-MSU-info .msu-phone {
    color: #4c7e00;    /* V2.0 */
}

#MSUstandardFooter.dark-background #standard-footer-MSU-info {
    color: #fff;
}

#MSUstandardFooter.dark-background #standard-footer-MSU-info a, #MSUstandardFooter.dark-background #standard-footer-MSU-info .msu-phone {
    color: #81d300;     /* V2.0 */
}

#standard-footer-MSU-wordmark img.print-msuwordmark {
    display: none;
}

/* #Print Styles
================================================== */
@media print {

    #MSUmasthead img.print-msugraphic, #standard-footer-MSU-wordmark img.print-msuwordmark {
        display: block;
    }

    #MSUmasthead img.msugraphic-green, #MSUmasthead img.msugraphic-white {
        display: none;
    }
    #standard-footer-MSU-wordmark img.msuwordmark-green, #standard-footer-MSU-wordmark img.msuwordmark-white {
        display: none;
    }

    #MSUSearchTool #search-tool-box{
        margin-right: 12px;
    }

}

/* End of Branding - MSU Masthead, Search Tool and Standard Footer */
/********************************************************************/

3. Michigan State University Masthead

The Michigan State University Masthead comprises the Spartan helmet graphic and the text “Michigan State University” using the Gotham typeface.

The MSU Masthead is designed to enable the Spartan helmet graphic and MSU text to display over the top of any web page background or image.

  • Required on every institutional web page
  • Variation without the Spartan helmet available
  • Placement instructions detailed in Layout (HTML) and Style (CSS)
  • CSS for responsive and legacy (non-responsive) websites is available in Layout (HTML) and Style (CSS) - Section 2.3. To use this CSS code, copy and paste it at the end of your website's main CSS file.
  • Exemption: Intercollegiate Athletics
Image of Michigan State University Masthead
Figure 3-1 Michigan State University Masthead

IMPORTANT: Sample code is provided as a guideline in implementing the technical requirements indicated in the MSU Web Standards for the MSU Masthead, Search Tool, and Standard Footer. Website owners may have to modify the sample code in order to achieve the desired results and correct responsive behavior.

HTML sample code does not include styles that enable responsive behavior (as each website will vary) but can be used for legacy (non-responsive) websites with little or no changes.,/p>

Where "q" is used in your CSS to reference input box name, be sure to change any reference of input#q to input[name="q"].

<!-- CSS class that hides the Search button text -->
.hide {
  position: absolute;
  left: -9999px; }


<!-- MSU Masthead and Search Tool ================================================== --> <div class="MSUwrapper" id="MSUheader"> <div id="MSUmasthead" role="banner"> <a href="http://www.msu.edu"> <!-- if using a dark background change the img src to images/masthead-helmet-white.png--> <img class="screen-msugraphic" alt="Michigan State University masthead graphic" src="images/masthead-helmet-green.png"/> <!-- MSU Web Standards indicate the MSU masthead graphic should be printed black --> <img class="print-msugraphic" alt="Michigan State University masthead graphic" src="images/masthead-helmet-black.png"/> </a> </div> <!-- If you prefer to have a transparent fill in the search box, replace the class 'white-fill' with 'no-fill' --> <div id="MSUSearchTool" class="white-fill" role="search"> <div id="search-tool-box" > <form action="//u.search.msu.edu/index.php" method="get"> <input name="client" type="hidden" value="My Site Name" /> <input name="sitesearch" type="hidden" value="mysite.msu.edu" /> <input name="analytics" type="hidden" value="UA-12345678-9" /> <label><span class="hide">Search Tool</span> <input name="q" placeholder="Search..."/><br /> </label> <button id="btn_search" type="submit"><span class="hide">Search</span></button> </form> </div> </div> </div>

3.1 Use

  • Use approved, unaltered versions only. (See Resources and Downloads)
  • Always link to http://msu.edu.
  • Do not place more than one on a web page.
  • Do not combine with any other marks, graphic elements, or words.

3.2 Unacceptable Masthead Variations

  • Do not reconfigure or resize the MSU Helmet image.
  • Do not alter font weight or bolded text on individual words in the MSU text.
  • Do not split the MSU text onto multiple lines.
  • Do not underline the MSU text.
  • Do not place the MSU Masthead on a background (other than over the top of web page).
  • Do not add "drop shadow" effects on the MSU text.

3.3 Approved MSU Masthead Variations

3.3.1 Masthead For Light-Colored Backgrounds or Images

  • Masthead graphic and text color is MSU green (#18453B)
  • When printed, masthead graphic and text color is black (#000000)
Image of MSU masthead on a light-colored background.
Figure 3-3 MSU Masthead on light-colored background
Image of MSU masthead on a light-colored photograph.
Figure 3-4 MSU Masthead on light-colored photograph
Image of MSU masthead when printed
Figure 3-5 MSU Masthead when printed

3.3.2 Masthead For Dark-Colored Backgrounds or Images

  • Masthead graphic and text color is white (#FFFFFF)
  • When printed, masthead graphic and text color is black (#000000)

Image of MSU masthead on a dark-colored background.
Figure 3-6 MSU Masthead on dark-colored background
Image of MSU masthead on a dark-colored photograph.
Figure 3-7 MSU Masthead on dark-colored photograph
Image of MSU masthead when printed
Figure 3-8 MSU Masthead when printed

4. Search Tool

The Search Tool consists of a search box, the text “Search…” and a search button/icon shaped like a magnifying glass.

  • Required on every institutional web page
  • Search results for the current website displayed first
  • Search results screen enables searching across every university web page
  • Placement instructions detailed in Layout (HTML) and Style (CSS)
  • CSS for responsive and non-responsive websites is available in Layout (HTML) and Style (CSS) - Section 2.3. Copy and paste CSS code at the end of the website's main CSS file.
  • Exemption: Intercollegiate Athletics

The search tool is 319 pixels wide by 28 pixels tall, with a roundness of 3 pixels.

The magnifying glass icon is 16 pixels x 16 pixels.

Sample code is provided in Section 3.

4.1 Search Box Style Variations

  • Standard: white fill and 1 pixel stroke set to #666666
  • Semi-transparent: no fill, 1 pixel stroke set to #FFFFFF, and 50% transparent white search button/icon
Image of Search Tool
Figure 4-1 Search Tool

4.2 Use

  • Use approved, unaltered versions only. (See Resources and Downloads)
  • Use u.search.msu.edu to display search results.
  • Do not place more than one search tool on a web page.
  • Verify and adjust background image to ensure accessibility color contrast when using the semi-transparent search box.
  • Do not combine with any other marks, graphic elements, or words.

4.3 Exceptions

  • Please work with CABS if you have questions about required elements.
  • You may request an exception to display additional search tools. For example, tools for searching a course catalog, knowledge base, or library book/journal.

4.4 Related Resources

For technical implementation details, refer to the Search Tool Implementation Guide.

4.5 Unacceptable Search Tool Variations

  • Do not reconfigure or resize the Search icon.
  • Do not alter the placeholder text inside the Search box.
  • Do not change the size of the Search box.
  • Do not remove the Search box border.
  • Do not change the style, width, or color of the Search box border.
  • Do not add "drop shadow" effects to the Search box.
Image of unacceptable Search Tool variations.
Figure 4-2 Samples of unacceptable Search Tool variations - view full resolution

5. Web Typography (Fonts)

5.1 Overview of Gotham Fonts

5.1.1 Typeface and Fonts

Typeface is the design of the letters and characters, including shape, stroke weight, serifs, length of ascenders and descenders, and other characteristics that make the typeface recognizable.

A font is a digital representation of a typeface in one size, one style, and one weight. Style is the vertical angle of the characters (normal, italics). Weight is the thickness of the characters (light, regular, bold, black) in relation to their height.
Example of a font: Courier 12px normal bold

A font family is a collection of all font size and style combinations of a typeface.

5.1.2 MSU’s Gotham Font License

Gotham is the primary typeface selected for MSU websites. The MSU Brand website explains why MSU’s primary fonts were chosen and lists acceptable font substitutions.

Communications and Brand Strategy (CABS) has purchased a license to use the Gotham fonts, allowing the entire MSU community to use the fonts free of charge in any websites containing university content. Gotham fonts are owned by Hoefler and Company (website http://typography.com/).

5.1.3 Choosing Web Fonts

The website designer or developer determines which sizes, styles, and weights of Gotham web fonts are to be used for the website’s standard content, page title, headings, links, etc. The MSU Web Standards dictate sizes, styles, and weights for the MSU Masthead and Standard Footer.

A combination of the following Gotham fonts can be used together in the website.

Gotham fonts:

  • Primarily used for print media
  • Also used on the web when font sizes larger than 18 pixels are needed

Gotham ScreenSmart fonts:

  • These fonts are optimized for the web.
  • They render on the screen with better clarity and precision than Gotham fonts.
  • Optimal viewing sizes are from 9-18 pixels. For larger sizes, use Gotham fonts.

Gotham Narrow ScreenSmart fonts:

  • Similar to Gotham ScreenSmart fonts, they were developed for optimal web viewing.
  • Characters are closer together than with Gotham ScreenSmart fonts, making them ideal for long passages of text.
  • Optimal viewing sizes are from 9-18 pixels. For larger sizes, use Gotham fonts.

5.2 Using Web Fonts

5.2.1 Font Requirements

Required: Gotham font for MSU Masthead and Standard Footer
Recommended: Gotham font (or an acceptable substitute font) for headings, copy, and hyperlinks

The recommended typeface for use on MSU websites is Gotham (sans serif) all weights. See The MSU Brand – Typography in the MSU Brand website for additional fonts that may be substituted. Note that Californian should not be used for web content.

5.2.2 Font Substitutions

For a list of acceptable fonts that may be substituted for Gotham fonts in content other than the MSU Masthead or Standard Footer, refer to typography information at The MSU Brand - Design and Visual Identity.

5.2.3 Request and Install Gotham Web Fonts

To request Gotham web fonts for your website, fill out and submit the Gotham web font request form.

There is no cost to you for using Gotham or Georgia with your MSU website.

Gotham fonts are available to everyone but do require an installation in conjunction with a CABS developer. This process takes about 10-15 minutes. Once you have submitted the online Gotham request form, a CABS developer will contact you and provide the customized font files you will install on your web server.

Gotham font files use the OpenType format.

Note: Print media, slide shows, videos, and other non-web applications utilize desktop fonts – contact Communications and Brand Strategy to obtain these fonts.

Once installed, you will be provided with an HTML <link> statement that allows your web pages to use Gotham fonts.

To implement Gotham fonts in your website:

  • Add Gotham fonts to your CSS file where appropriate.
    Gotham A and Gotham B should be specified as indicated. Your customized fonts are split into two font files (A and B). This allows the fonts to be downloaded simultaneously when a browser renders the fonts. Always include a fallback font in your font-family.
    CSS example:
    body {
        font-family: 'Gotham SSm A', 'Gotham SSm B', arial, sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 15px;
    }
  • Add your custom <link> statement to the HEAD section of each web page where Gotham fonts are used.

Georgia may be added to a website using cascading style sheets:

body { font-family: Georgia, serif; weight: normal;}

5.2.4 Resources

Gotham font overview:
http://www.typography.com/fonts/gotham/overview/

Gotham fonts:
http://www.typography.com/fonts/gotham/styles/

Gotham ScreenSmart fonts:
http://www.typography.com/fonts/gotham/styles/screensmart/

How Web Fonts Work:
http://www.typography.com/cloud/how-it-works/

Font Comparison Tool:
View sample content in various fonts and sizes of your choosing. Compare Gotham fonts with other font families in sample content.
http://www.typography.com/fonts/gotham/webfonts/gothamssm-book/

5.3 Type Specimens and Detailed Information

Samples of the Gotham (eight weights) and Georgia (one weight) typefaces are shown in figure 5-1.

Image Gotham and Georgia type specimens.
Figure 5-1 Type Specimens for Gotham and Georgia

For detailed specimen sheets and information, please visit:

5.4 Additional Typography Information

Further resources on Michigan State University’s Typography Brand Standards may be found on the Communications and Brand Strategy website.

6. Other Logos and Marks

6.1 Use of Logos and Marks

The use of college, department, center, unit, and program logos or marks is not permitted on external communications, including websites.

6.2 Exceptions

  • National laboratories (e.g., Facility for Rare Isotope Beams, National Superconducting Cyclotron Lab)
  • Externally facing, revenue-generating units (e.g., MSU Health Team, MSU Press, Kellogg Hotel and Conference Center)
  • Cultural entities (e.g., Broad Art Museum, Wharton Center)

6.3 Social Media Icons and Buttons

Follow social media network guidelines for displaying icons and buttons:

Information on guidelines for social networks not listed above are commonly found in the “about” and “guidelines” sections of the company’s website.

6.4 Related Resources

7. Standard Footer

The Standard Footer is designed to enable the text links, standard text, and MSU wordmark to display over the top of any web page background or image.

Image of Standard Footer with Telephone Number
Figure 7-1 Standard Footer with website Telephone Number - view full resolution
Image of Standard Footer no Telephone Number
Figure 7-2 Standard Footer - no website Telephone Number - view full resolution

7.1 Use

  • Use approved, unaltered versions of graphics. (See Resources and Downloads)
  • Sample code is provided if you need a starting point.  HTML code need not be the same in each website but the visual rendering of the footer should look the same in every website.  Your code's visual end result should comply with the Standard Footer specifications.
  • Link MSU wordmark graphic to http://msu.edu.
  • Links in line 1 should appear in the sequence indicated and with the indicated link text: Contact Information, Site Map, Privacy Statement, Site Accessibility.
  • Omit site map link if desired as long as the web user has at least two ways in which to navigate to every page in the website. This is covered in WCAG 2.0 Guideline 2.4.5 Multiple Ways. For more information, see the W3C WCAG 2.0 techniques for providing a site map at https://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS-20071218/G63.html.
  • Do not combine with any other marks, graphic elements, or words.

7.2 Footer Elements

7.2.1 MSU Wordmark Graphic

The MSU Wordmark graphic is 221 x 47 pixels and is a hyperlink to the MSU website home page. The Wordmark is available in black, white, and MSU Green. It can be downloaded from the MSU Brand website Logos page.

7.2.2 Website Information

Your website information area in the Standard Footer should include:

  • Call us: (517) XXX-XXXX: the telephone number associated with your office or college. Including this element is recommended but not required. Note: Replace "XXX-XXXX" with an actual telephone number.
  • Contact Information: hyperlink this text to a page in your website that provides street address, phone and fax numbers, and e-mail address contact information for your website.
  • Site Map: hyperlink this text to a page in your website that provides an outline structure of every section in your website. In order to be accessible, a site map has certain requirements. For example, every page in the site map must have a link to the site map, and every page can be reached by following a set of links that start at the site map. Site map may be omitted if desired as long as the web user has at least two ways in which to navigate to every page in the website. This is covered in WCAG 2.0 Guideline 2.4.5 Multiple Ways. For more information, see the W3C WCAG 2.0 techniques for providing a site map at https://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS-20071218/G63.html.
  • Privacy Statement: hyperlink this text to a page in your website that describes and documents information collected via your website, how the information is used, and how visitors can opt out. For sample language, visit Using Google Analytics with Web Sites at Michigan State University - TB15485 (login required).
  • Site Accessibility: hyperlink this text to a page in your website that describes and documents the functionality and standards your website uses to provide people with disabilities access to information and services.

7.2.3 Horizontal Rule

The website information and MSU information areas are separated using a 1-pixel, dotted rule (#999999) equal to the width of the website information element.

7.2.4 MSU Information

The MSU information area should include:

  • MSU Telephone Number: University operator’s phone number
  • Visit msu.edu: hyperlink to the MSU website home page
  • Equal-opportunity employer statement
  • SPARTANS WILL.
  • Notice of Nondiscrimination: link to the Office of Institutional Equity (OIE) website, link destination is http://oie.msu.edu
  • Copyright statement

7.2.5 Typography and Color

Font size is specified here in both absolute and relative measurements. Pixels are an absolute size where 1px = 1/96th of an inch. Rems are relative to the root (html) element font size. CSS best practice is to provide both units so that browsers that do not support rem will use the fallback pixel property value.

For example, assuming that a browser's default font size is 16px:
1 rem = 16 px | 0.875 rem = 14 px | 0.75 rem = 12 px | 0.625 rem = 10 px | 0.5625 rem = 9 px | 0.5 rem = 8 px | etc.

In this example, the resulting CSS is:

html {
    font-size: 16px;
    font-size: 1rem;
}
.size1 {
    font-size: 32px;
    font-size: 2rem;
}
.size2 {
    font-size: 14px;
    font-size: 0.875rem;
}
...

IMPORTANT: Colors shown here have been tested for accessibility-compliant color contrast. However, because your website's text and background colors may differ from the colors shown and especially if using a dark background, you should test your website colors for acceptable contrast ratio. This can be done by using an online contrast ratio tool or by manually calculating the contrast ratio yourself. Ideally, the color contrast ratio in your content is 4.5:1 (AA compliance) or higher. Adjust the foreground or background colors as needed until color contrast is acceptable.

W3C Techniques for Testing Contrast Ratio:
https://www.w3.org/TR/WCAG20-TECHS/G18.html

MSU Web Accessibility Evaluation and Validation - online tools:
http://webaccess.msu.edu/Help_and_Resources/evaluation-validation.html

7.2.6 Sample Code Notes

HTML code for light-colored and dark-colored backgrounds is identical except that:

  • Light background footers use CSS class "light-background" to set link colors (dark colors and a specific green for light backgrounds) and a green MSU wordmark image.
  • Dark background footers use CSS class "dark-background" to set link colors (white and a specific green for dark backgrounds) and a white MSU wordmark image.

Sample code does not include styles that enable responsive behavior (as each website will vary) but can be used for legacy (non-responsive) websites with little or no changes.

IMPORTANT: Sample code is provided as a guideline in implementing the technical requirements indicated in the MSU Web Standards for the MSU Masthead, Search Tool, and Standard Footer. Website owners may have to modify the sample code in order to achieve the desired results and correct responsive behavior.

7.3 Standard Footer for Light-Colored Backgrounds or Images

Image of Standard Footer with Telephone Number
Figure 7-3 Standard Footer for light-colored backgrounds or images - view full resolution

HTML sample code for light-colored backgrounds with website telephone number:

<div class="MSUwrapper light-background" id="MSUstandardFooter" role="contentinfo">    <!-- class ’light-background' sets link colors -->
    <div class="fourMSUcolumns" id="standard-footer-MSU-wordmark">
        <a href="http://www.msu.edu">    <!-- Use green MSU wordmark -->
            <img alt="Michigan State University Wordmark" class="screen-msuwordmark" src="/_files/images/msu-wordmark-green-221x47.png" height="47" width="221" />
            <img alt="Michigan State University Wordmark" class="print-msuwordmark" src="/_files/images/msu-wordmark-black-221x47.png" height="47" width="221" />
        </a>
    </div>
    <div class="twelveMSUcolumns">
    <!-- change the css to using nth child instead of classes!!!!!!-->
        <div id="standard-footer-site-links">
            <ul>
                <li>Call us: <strong>(517) 355-7505</strong>
                <li><a href="/contact">Contact Information</a>
                <li><a href="/site-map">Site Map</a>
                <li><a href="/privacy-statement">Privacy Statement</a>
                <li><a href="/accessibility">Site Accessibility</a>
            </ul>
        </div>
        <div id="standard-footer-MSU-info">
            <ul>
                <li>Call MSU: <span class="msu-phone"><strong>(517) 355-1855</strong></span></li>
                <li>Visit: <strong><a href="http://msu.edu">msu.edu</a></strong></li>
                <li>MSU is an affirmative-action, equal-opportunity employer.</li>
                <li><a href="http://oie.msu.edu/"><strong>Notice of Nondiscrimination</strong></a></li>
            </ul>
            <ul>
                <li class="spartans-will">Spartans Will.</li>
                <li>� Michigan State University</li>
            </ul>
        </div>
    </div>
</div>
<!-- ================================================== -->

7.3.1 MSU wordmark graphic

  • Image size 221 x 47 pixels, color Color swatch MSU Green #18453B (MSU green)

7.3.2 Website Information - footer line 1 (above horizontal rule)

  • Text ("Call us:"):
    • font-size: 12px, 0.75rem
    • font-weight: 400 (Gotham Book, also called "Normal" or "Regular")
    • color: Color swatch MSU Green #18453B (MSU green)
  • Telephone number:
    • font-size: 12px, 0.75rem
    • font-weight: 700 (Gotham Bold)
    • color: Color swatch MSU Green #18453B (MSU green)
  • Hyperlinks and separator bars:
    • font-size: 12px, 0.75rem
    • font-weight: 500 (Gotham Medium)
    • color: Color swatch MSU Green #18453B (MSU green)

7.3.3 MSU Information - footer lines 2-3 (below horizontal rule)

  • Text ("Call MSU:", "Visit:", Affirmative Action statement, and Copyright statement):
    • font-size: 9px, 0.5625rem
    • font-weight: 400 (Gotham Book)
    • color: Color swatch MSU Green #18453B (MSU green)
  • MSU Telephone Number:
    • font-size: 9px, 0.5625rem
    • font-weight: 700 (Gotham Bold)
    • color: Color swatch green #4C7E00 (green)
  • MSU URL hyperlink:
    • font-size: 9px, 0.5625rem
    • font-weight: 700 (Gotham Bold)
    • color: Color swatch green #4C7E00 (green)
  • Non-Discrimination hyperlink:
    • font-size: 9px, 0.5625rem
    • font-weight: 700 (Gotham Bold)
    • color: Color swatch green #4C7E00 (green)
  • Text "SPARTANS WILL." (all upper case):
    • font-size: 9px, 0.5625rem
    • font-weight: 600 (Gotham Bold)
    • color: Color swatch MSU Green #18453B (MSU green)

7.4 Standard Footer for Dark-Colored Backgrounds or Images

Image of Standard Footer for dark background
Figure 7-4 Standard Footer for dark-colored backgrounds or images - view full resolution

HTML sample code for dark-colored backgrounds with no website telephone number:

<div class="MSUwrapper dark-background" id="MSUstandardFooter" role="contentinfo">    <!-- class ’dark-background' sets link colors -->
    <div class="fourMSUcolumns" id="standard-footer-MSU-wordmark">
        <a href="http://www.msu.edu">    <!-- Use white MSU wordmark -->
            <img alt="Michigan State University Wordmark" class="screen-msuwordmark" src="/_files/images/msu-wordmark-white-221x47.png" height="47" width="221" />
            <img alt="Michigan State University Wordmark" class="print-msuwordmark" src="/_files/images/msu-wordmark-black-221x47.png" height="47" width="221" />
        </a>
    </div>
    <div class="twelveMSUcolumns">
    <!-- change the css to using nth child instead of classes!!!!!!-->
        <!-- "Call us" and Telephone are removed --> 
        <div id="standard-footer-site-nocall-links">
            <ul>
                <li><a href="/contact">Contact Information</a>
                <li><a href="/site-map">Site Map</a>
                <li><a href="/privacy-statement">Privacy Statement</a>
                <li><a href="/accessibility">Site Accessibility</a>
            </ul>
        </div>
        <div id="standard-footer-MSU-info">
            <ul>
                <li>Call MSU: <span class="msu-phone"><strong>(517) 355-1855</strong></span></li>
                <li>Visit: <strong><a href="http://msu.edu">msu.edu</a></strong></li>
                <li>MSU is an affirmative-action, equal-opportunity employer.</li>
                <li><a href="http://oie.msu.edu/"><strong>Notice of Nondiscrimination</strong></a></li>
            </ul>
            <ul>
                <li class="spartans-will">Spartans Will.</li>
                <li>� Michigan State University</li>
            </ul>
        </div>
    </div>
</div>
<!-- ================================================== -->

7.4.1 MSU wordmark graphic

  • Image size 221 x 47 pixels, color #FFFFFF (white)

7.4.2 Website Information - footer line 1 (above horizontal rule)

  • Text ("Call us:"):
    • font-size: 12px, 0.75rem
    • font-weight: 400 (Gotham Book)
    • color: #FFFFFF (white)
  • Telephone number:
    • font-size: 12px, 0.75rem
    • font-weight: 700 (Gotham Bold)
    • color: #FFFFFF (white)
  • Hyperlinks and separator bars:
    • font-size: 12px, 0.75rem
    • font-weight: 500 (Gotham Medium)
    • color: #FFFFFF (white)

7.4.3 MSU Information - footer lines 2-3 (below horizontal rule)

  • Text ("Call MSU:", "Visit:", Affirmative Action statement, and Copyright statement):
    • font-size: 9px, 0.5625rem
    • font-weight: 400 (Gotham Book)
    • color: #FFFFFF (white)
  • MSU Telephone Number:
    • font-size: 9px, 0.5625rem
    • font-weight: 700 (Gotham Bold)
    • color: Color swatch green #81D300 (bright green)
  • MSU URL hyperlink:
    • font-size: 9px, 0.5625rem
    • font-weight: 700 (Gotham Bold)
    • color: Color swatch bright green #81D300 (bright green)
  • Non-Discrimination hyperlink:
    • font-size: 9px, 0.5625rem
    • font-weight: 700 (Gotham Bold)
    • color: Color swatch bright green #81D300 (bright green)
  • Text "SPARTANS WILL." (all upper case):
    • font-size: 9px, 0.5625rem
    • font-weight: 600 (Gotham Bold)
    • color: #FFFFFF (white)

8. Coding Guidelines

8.1 Accessibility

8.2 Code Validation

8.3 Broken Link Maintenance

  • Check regularly for broken links that confuse and frustrate visitors.
  • Use free automated link-checking tools to identify broken links:
    Xenu Link Sleuth for Windows 
    Integrity for OSX
  • Manually check links quarterly to locate broken links automated tools can’t identify.

8.4 Favicons

  • Favicons are 16x16 icons displayed by browsers to the left of the URL bar and for bookmarks to websites.
  • Favicons for all MSU websites should feature the MSU helmet. (See Resources and Downloads)

8.5 Descriptive Page Headings

  • Include at least one <h1> HTML tag that describes the main subject of the web page.
  • Include <h2> through <h6> HTML tags for longer, complex documents.
  • Include key words and phrases in headings to describe content.
  • Use clear language that is easy to comprehend.
  • Use the fewest words possible.

8.6 Descriptive Link Titles

  • Include common key words or phrases in links that describe the content on linked pages.
  • Use link text like “learn how to apply to MSU,” “sign up to receive MSU news updates,” and “visit the Office of the President website.”
  • Do not use link text like “more information,” “click here,” and “learn more.”

8.7 Opening New Windows and Tabs from a Link

  • Do not configure your links to automatically open in a new window or tab. Doing so can confuse and frustrate visitors to MSU websites.
  • Using a new browser window resets the back button in that window. The back button is the second most used navigation function (after following hyperlinks).

8.8 Phone Numbers

  • Format phone numbers this way: (517) 355-1855.

9. Standards for Social Media and Meta Tags

Social media networks and search engines use a web page’s Open Graph, Twitter Card, and meta tags when displaying summaries of and links to individual web pages.

Links to institutional web pages encountered via social media and search are easier for potential visitors to understand and evaluate when well-written Open Graph, Twitter Card, and meta tags have been included.

  • Include the Open Graph and meta tags on every institutional web page.
  • Include Twitter Card meta tags on featured/important MSU articles, media releases, multimedia elements, and information pages.
  • Place Open Graph and meta tags between HTML <head></head> tags.

9.1 Open Graph (OG)

Open Graph is a standard commonly used by Facebook.

Image of link shared via open graph on Facebook
Figure 9-1 Sample of Open Graph link shared on Facebook

9.1.1 OG: Title Tag

Include the text that should appear by default when a link to a web page is shared via social media.

9.1.2 OG: Description

Include a one to two sentence summary describing the contents of your web page.

9.1.3 OG: Type Tag

Specify the kind of object/content being linked. For example, <meta property=“og:type” content=“website”/> is used when linking to a website.

9.1.4 OG: Image Tag

Include a URL for the graphic to be used when displaying a thumbnail preview along with a link to the web page via social media.

9.1.5 OG: URL Tag

Include the URL of the web page being linked. The URL serves as the permanent link to the content (i.e., link directly to a story, not a home page featuring a link to the story).

9.1.6 Additional Information

Visit Open Graph: ogp.me

9.2 Basic Summary Twitter Card

A Twitter Card makes it possible to attach media experiences to tweets that link to content. Simply add a few lines of HTML to web pages and users who tweet links to content will have a "card" added to their tweet that is visible to all of their followers.

Image of a basic summary Twitter Card
Figure 9-2 Sample of a "basic summary" Twitter Card

9.2.1 Twitter: Card

Set to a value of “summary.”

9.2.2 Twitter: Title

Be concise. Use 70 characters or fewer.

9.2.3 Twitter: Site

Include the Twitter @username used by the website.

9.2.4 Twitter: Creator

Include the @username of the content creator.

9.2.5 Twitter: Description

Summarize the content of the page. Use 200 or fewer characters.

Do not reuse the title or use this field to describe the general services provided by the website.

9.2.6 Twitter: Image

Include a URL for a unique image representing the content of the page that uses a square aspect ratio of 120 pixels x 120 pixels minimum and is less than 1MB in size.

Do not use a generic graphic or image used as the Twitter image for other pages in your website.

9.2.7 Validating a Twitter Card

Validate a Twitter Card prior to use.

To test a Twitter Card, visit dev.twitter.com/docs/cards/validation/validator.

9.2.8 Twitter Card Analytics

Measure the performance and results of each Twitter Card. For full details, visit dev.twitter.com/docs/cards/analytics.

9.2.9 Additional Twitter Card Information

For complete details on the seven Twitter Card types that can be attached to tweets, visit dev.twitter.com/docs/cards.

9.3 Meta Tags

Image of search results screen displaying title and description data.
Figure 9-3 Sample search engine result screens with title and description text

9.3.1 Title Tag

Well-written titles can generate more visits to a web page and improve search engine visibility.

  • Clearly summarize the content or benefit of the web page.
  • Include key words and phrases that visitors would use when searching for information contained within the web page.
  • Use 70 characters or fewer.

9.3.2 Description Tag

The content of the description tag should contain an abstract of what information is contained on an individual web page.

  • Use text that is easy to read.
  • Include important keywords related to the content on the page.
  • Provide context for the information the visitor will find by following the link to the page.
  • Use 155 characters or fewer.

9.3.3 Thumbnail

Image of sample search results screen with thumbnails.
Figure 9-4 Sample search results screen with thumbnails

A thumbnail image for a page can be manually specified.

Add a thumbnail meta tag to the <head> section of your web page (replace the URL with the path to your thumbnail image):

<meta name="thumbnail content="http://url.msu.edu/thumbnail.jpg" />

9.3.4 Additional Information

10. Maintain a Website Content Plan

MSU websites that have accurate, timely, and engaging content enable visitors to understand and form a positive opinion of the university's academic programs, services, research innovations, faculty, staff, and more.

In addition, keeping website content up to date can boost user experience and search engine optimization.

10.1 Website Content Audits

When preparing to redesign a website or integrate new features or functionality:

  • Familiarize yourself with what your website currently includes by reviewing pages, sections, images, photographs, and multimedia.
  • Check for broken links (outbound links to other websites often change).
  • Review content performance by analyzing server logs and web analytics.
  • Identify content that is out of date, under performing, or low quality (e.g., images with visible compression artifacts, video unavailable in an HD format).
  • Update or archive content that does not meet standards for content performance, quality, and accessibility.
  • Conduct a fit/gap analysis of what content or materials you will need to meet your new website goals.
  • Consider how your team will add and review new content over time.

10.2 Create a Content Plan

After you complete an audit, develop a content plan to ensure that website content remains up to date.

Your plan should include details about what new content will be added over time, who will produce it, required elements (e.g. a headline, 250 words, photographs, and contact information), and search engine optimization tags and headings (see Standards For Social Media and Meta Tags in Section 9).

Be sure to be realistic with your content plan in order to make the most of your budget and resources so that the plan will be sustainable long term.

10.3 Best Practices

  • Tailor your content plan to fit your goals and resources.
  • Boost visitor engagement by publishing fresh content at regular intervals.
  • Improve website search engine optimization by publishing content over time versus all at once.
  • Prevent your website from appearing dated by publishing new content at least once per month.

11. Web Design Examples

The Michigan State University Masthead, Search Tool, and Standard Footer were designed to provide a high level of flexibility for web designers and developers.

Each element can be integrated easily with existing MSU websites without extensive redevelopment or coding. Examples of properly branded websites are provided below.

Complete design files, web-ready graphics, and code examples are available for download. (See Resources and Downloads)

11.1 What to Do When Updating a Website

  • Place the site name text below the MSU Masthead.
  • Make the site name stand out by using 48px (3rem) Georgia typeface. For site names that are long or span multiple lines, reduce the font size but do not go smaller than 28px (1.75rem).
  • Check the text color contrast for accessibility compliance.
  • Explore interesting, new web design directions by leveraging how the MSU Masthead and Standard Footer were designed to display well over solid colors as well as rich photos and illustrations.

[Removed all web design examples (sections 11.2 thru 11.7)]

Website examples:

12. Designing for Mobile Devices

The Recommended Elements and Best Practices Checklist identified in the Introduction also applies to MSU web-based communications and interfaces designed for mobile devices.

Mobile and tablet screen aspect ratio and resolution vary across devices and operating systems. The layout and spacing information in this section provides guidance on placement and presentation of required elements on mobile devices.

12.1 Mobile Layout

CABS website mobile MSU Masthead.
Figure 12-1 The CABS website's mobile MSU Masthead - Visit the CABS website to view the entire site.

12.1.1 Checklist: Mobile MSU Masthead and Search Tool

  • Align with top margin of the web layout.
  • Vertically center the MSU Masthead and Search Tool in masthead region.
  • Align MSU Masthead with left web page content margin.
  • Align a Search Tool button with right web page content margin.
  • Do not place any additional elements within or above this region.
  • Do not fill the area behind the MSU Masthead and Search Tool with a background color or image that is different from the background used in the website’s design.

12.1.2 Checklist: Mobile Standard Footer

  • Place below the web layout.
  • Align your website information and horizontal rule with center of page.
  • Align MSU main campus information with left web page content margin.
  • Align MSU wordmark with center of page.
  • Do not place additional elements within or below this region.
Image of the CABS mobile website's Standard Footer.
Figure 12-2 The CABS website's mobile Standard Footer - Visit the CABS website to view the entire site.

12.2 Alternate Placement of Search Tool For Mobile

You may place the search box below the MSU Masthead in place of the search button.

Image of alternate search box placement below MSU masthead
Figure 12-3 Alternate search box placement for mobile layouts

12.3 Mobile Design Best Practices

  • Start with mobile layout first when creating a new website design.
  • Place essential information and actions in upper portions of your layout.
  • Style navigation and heading consistently on mobile and desktop.
  • Style and position text and user interface to be visually distinct from one another.
  • Use simple interfaces and interactivity.
  • Make user interface large enough to touch (48x48 pixels minimum).
  • Evaluate and test download speeds (more fonts and images mean slower load time).

12.4 Creating New Mobile MSU Designs

  • Creating new and innovative mobile designs is encouraged.
  • MSU Web Standards will be updated regularly to include new solutions.
  • Please work with CABS if you have questions about required elements.

13. Updates to Web Standards

13.1 Adoption of New Standards, Questions, and Assistance

  • Please work with CABS if you have questions about these standards, recommendations, or required elements.
  • Campus web managers are requested to integrate the Footer Non-Discrimination link (as specified in MSU Web Standards Version 2.0) with each MSU website by February 2017 (within one year of the February 2016 announcement).
  • If you require assistance, please contact Communications and Brand Strategy at contact@cabs.msu.edu or (517) 355-7505.

13.2 Future Updates and Releases

  • MSU Web Standards will be updated regularly to include new solutions.
  • Updates will be presented at UCN meetings and published in the UCN minutes in the CABS website at http://cabs.msu.edu/communicators-network/portal/ (available to campus communicators with login).

13.3 Related Resources

For further resources related to MSU Web Standards:

14. Web Page Change History

Version 2.1 (April 25, 2016) - Summary of Changes

  • Sections 2 and 3 - Changed sample Search Tool CSS and code to fix accessibility issue in search input box.
  • Section 14 - Added Change History for the MSU Web Standard web page.

Version 2.0 (March 30, 2016) - Summary of Changes

  • Revised sample HTML and CSS code and provided two sources:
    • Code is displayed in the web page for copy/paste – Section 2.3 (CSS), Section 3 (MSU Masthead), Section 7 (Standard Footer)
    • Code is available in downloadable zip archives – Resources and Downloads (top of page)
  • Section 5 – Expanded information about typography and Gotham fonts
  • Section 7 – Changed Standard Footer specifications for Notice of Nondiscrimination link
  • Sections 7.1 and 7.2.2 – Corrected accessibility requirement for Site Map
  • Section 7.2.5 – Added accessibility requirement for color contrast ratio
  • Section 8.1 – Added coding guidelines and evaluation tools
  • Sections 11.2 through 11.7 – Removed website examples specific to 2015 Masthead, Search, and Footer branding changes
  • Section 12.5 – Removed responsive “lorem ipsum” prototype website
  • Section 13.2 – Clarified how revisions to Web Standards are announced and published