Typography

The University website requires clear and consistent headings and highly legible paragraphs. The Calibre font family is currently used across RUSH University webpages.

CSS Font stack

Calibre, -apple-system, blinkmacsystemfont, Segoe UI, Droid Sans, Helvetica Neue, sans-serif

Text size

spacing units are defined as rem or em units; rather than defining pixel sizes, this allows the elements to scale appropriately.

Heading 1 - Calibre Bold, 3.125rem

Heading 2 - Calibre Bold, 1.875rem

Heading 3 - Calibre Bold, 1.5rem

Heading 4 - Calibre Bold, 1.25rem

Heading 5 - Calibre Bold, 1.125rem

Heading 6 - Calibre Bold, 1rem

Lead text - Calibre, 1.5rem

Normal text - Calibre, 16px

 

This is an introductory paragraph set in Calibre (24/36) 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 Calibre (16/30) 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

 

Colors

Primary Palette

 

Secondary Palette

 

Tertiary Palette

 

Neutral Palette

 

Photography

Image ratios vary slightly across the website to ensure photographs are displayed properly regardless of actual pixel dimension or screen size. Many image specifications for components use 4:3 or 16:9 ratios, review the image specifications to ensure photos are cropped appropriately for their use case. Images at different ratios are also be used in different components; the height will vary while the width will match the container selected in the content management system (CMS). 

Full-width hero images require a minimum width of 1440px 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 heading or description text.