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.
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.
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.
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.
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.
Get Started
Download Web Toolkit
Get started with your web design or digital app by using these guidelines.
