Visual Style

Typography

The University website requires clear and consistent headings and highly legible paragraphs. We’ve employed a font system that uses one open-source typeface, Merriweather, and one licensed typeface, Frutiger. Both typefaces are designed for extended reading, can adapt to a variety of contexts, and have been designed or adjusted for on-screen use.

Frutiger

Frutiger is the official typeface for the Rush University Brand in print and on the web. It is named after its Swiss designer, Adrian Frutiger. Frutiger is a humanist sans-serif typeface, intended to be clear and highly legible at a distance or at small text sizes. We use it for headlines, quote attributions and image captions. myfonts.com/fonts/linotype/frutiger

Merriweather

Merriweather was designed to be a text face that is pleasant to read on screens. We use Merriweather for large headlines, paragraph copy and links. Merriweather is designed to be used freely across the Internet by web browsers on desktop computers, laptops and mobile devices. Merriweather is used as our primary serif typeface on the web. fonts.google.com/specimen/Merriweather

 

Headline 2 - Frutiger Bold 32px
Headline 3 - Frutiger Bold 26px
Headline 4 - Frutiger Bold 24px
Headline 5- Merriweather Light 22px
Headline 6 - Frutiger Bold 19px

 

This is an introductory paragraph set in Merriweather Regular (18/27) that uses a typographic style that allows a writer to make a bold statement or highlight a primary idea or them. This paragraph is set in larger type to distinguish it from the running copy.

 

This is a paragraph set in Merriweather Regular (16/24) that uses a typographic style useful for running copy. This text is set in a smaller type size to distinguish it from intro text and allow for longer stories and ease of reading.

List Styles

This is a pullquote that would allow for the featuring of an excerpt from the page copy.

Author Name

Color

Primary Palette

Typography Color

Background Color

Text Link Color

Alert Color

Photography

We recommend a consistent image ratio across the website to ensure photographs are displayed properly regardless of actual pixel dimension or screen size. Using a consistent 4:3 ratio makes updating content easy. Images at different ratios can also be used; the height will vary while the width will match the container selected in the content management system (CMS). 

To ensure a high-quality representation at multiple sizes, use an image of at least 640px wide. The image will size proportionately based on the container. Do not include image dimensions in mark-up, the CMS will automatically handle image sizing.

Full-width hero images require a minimum width of 1920px and special editorial consideration and planning.

Choose images that have the greatest visual impact and clearly relate to page content. Test hero images to ensure critical parts of the picture are not obstructed by overlapping text boxes.