Since launching a new homepage and top-level landing page design in early 2016, the Marketing & Communications Division is reviewing all web policies and standards.
If you're creating a site outside of the university's content management system, please contact the Online Strategy team directly.
Content Management System
The university provides support for official units to develop and maintain their own web sites. Computing Services and University Advancement offer a free Content Management System (CMS) that helps to ensure consistent design and navigation across university websites. Each page has assigned areas for text, images, navigation, callout boxes and breadcrumbs. By using the CMS, all fonts and colors are already coded and decided. Visit the Content Management System website to learn more. You can also contact the CMS team in Computing Services for help.
All of the information within these web guidelines are in agreement with the web templates, and vice versa. So, if you're using the templates, the typography, fonts, colors and navigation are already defaulted to the correct settings. Questions about the web guidelines? Don't hesitate to contact us.
General Purpose & Non-CMS Web Templates
The wordmark should appear in a prominent position on every web page. The best position is the top left corner.
The name of a school, department or any other entity must appear below, never above, the university wordmark.
If you are using the web template designs and currently have an university unitmark, we advise you to use the recommended "CMS mark" by itself in the space provided (exhibit A). This way it does not appear to be repetitive with the CMU wordmark. If you are using the web template designs and currently have an university unitmark within a named college, we advise you to use the recommended "CMS Two-Tier mark" by itself in the space provided (exhibit B). This way it does not appear to be repetitive with the CMU wordmark. If you have a logo that falls outside of the identity system templates, place it in the space provided (exhibit C). For all other options, please contact the Communications Design and Photography Group.
Acceptable file types include JPG, GIF, PNG and SVG. Use JPG for photos and PNG or GIF for charts and logos.
Images should have a resolution of 72dpi (dots per inch). Use RBG or indexed color modes. If the colors of your image look inverted, then it's in CMYK (print) color mode.
Do not resize images using HTML. Images displayed on a page should be actual size; resizing should be done in a photo editing application such as Adobe® Photoshop®. Unless you are using photography, please stay within the suggested web color palette.
Below are the majority of colors used on www.cmu.edu and its sister sites. The primary university web colors are red (hexadecimal #990000) and dark gray (hexadecimal #464646). The secondary colors are only used to support the primary colors. Please stay within these colors for any graphics/text/backgrounds used on your site.
|Primary Web Colors||Secondary Web Colors|
|red #990000||light grey #d4d4d4|
|dark grey #464646||light tan #f3f0e9|
For body copy, the recommended faces for the web, in order of preference, are Verdana, Arial and Helvetica. The browser should use Verdana first; if it is not available, use Arial and then Helvetica. If none are available, use another sans serif font.
Example: font-family: Verdana, Arial, Helvetica, sans-serif;
Navigation & Style
Please only use the styles provided in the CSS document given to you or link to the university's common template CSS document.
Links within your own website should open in the smae window. Other sites should open in a new window.
PDF files should open in a new window and be labeled [pdf]. For example:
Linked text should be relevant and meaningful. Do not link words like "here" or "this page." For examle:
For more video, watch our YouTube playlist. Correct
Watch our YouTube playlist here. Incorrect
If you have the ability to implement an RSS feed, it should be updated at least once a week. The RSS and RSS rollover images are located in the home images folder.