Main Side Navigation
Download Toolkit

Web Guidelines

University of Utah website guidelines are a distributed effort, based on the principles of our core brand pillars. When creating a university site you should have consistency and inclusivity in mind, with each component designed and built to be accessible to all, regardless of ability or situation.

Colors

Colors used on your University of Utah website should not vary from our core color palette.

Accent colors should be used sparingly and are generally used for small color variations in web components. These accent colors should not be used for headings, anchor tags or major design elements.

Accessibility: Colors and contrast are of great importance to creating accessible websites and web components. Use of color should not cause interference with the ability to view the content on a page. Read more about using color with accessibility.

Required Components

Header and Footer

All sites should use the University’s approved header and footer. The website's header should prominently display the University of Utah logo with links to the University’s homepage as well as departmental/organization names.

Header Example
Footer Example

Navigation

All sites should use the approved University navigation and should be intuitive, accessible, and easy to use, ensuring that visitors can quickly find the information they seek.

Navigation Example

Primary Web Fonts

These are the preferred fonts for all University websites and digital publications. Apply these preferred fonts for web content, ensuring readability and consistency. Use headings, subheadings, and body text styles consistently to organize content logically.

Accessibility: Follow web accessibility guidelines (WCAG) to ensure that the website copy is accessible to all users, including those with disabilities.

Montserrat

Web Headlines

Montserrat is recommended for use with large titles and headlines on University websites or digital ads.

Download Font from Google Fonts

Vitesse

Web Alternative Headlines

Vitesse Black is recommended for use with large titles and headlines in the marquee section of University websites

Due to licensing restrictions, we are unable to provide copies of this typeface.

Source Sans Pro

Web Body Copy

Source Sans Pro is recommended for use with body copy on University websites or digital ads.

Download Font from Google Fonts

Interactive Features & Responsiveness

Interactive Features

Implement interactive features, such as contact forms and search functionality, that enhance user experience and engagement.

Ensure that interactive elements are user-friendly and accessible.

Mobile Responsiveness

Ensure that sites are fully responsive, providing an optimal viewing experience on various devices, including smartphones and tablets.

Animation of Web Responsiveness

Images for the Web

Image Sizing

Since image use cases vary from page to page, images can range from a wide variety of sizes. Images should be of high-quality and align with the brand's visual style.

Images used on the web should rarely exceed 1MB and will likely need to be optimized for the web by an experienced content-creator, designer, developer or photographer.

Accessible Images

To keep images accessible to screen-readers and other web accessibility tools images should always include an Alt tag (alt="Description of my image") with an appropriate description of the image.

Text within an image should be avoided and replaced with an acceptable use of layering HTML elements using live text.

Lab Students making a breakthrough

Get Started

Download Web Toolkit
Get started with your web design or digital app by using these guidelines.
Download Toolkit
Partner with UMC
Need help to design or strategize your next project?
Contact UMC