Type

Playfair Display Regular and Italic This type should be used for headlines and introductory copy. Italic should be used for emphasis.
HK Grotesk Light, Regular, and Bold This type should be used for all body copy, including quotes and sub- or category-headlines.

Download Playfair Display

Download HK Grotesk

 

The SU “Editorial” Style

When formatting body copy, take care to maintain the SU “editorial” style of presentation. It begins with a pirate yellow anchor bar at the top and flush with the headline and body copy.

Below the anchor bar is what we refer to as the Wayfinder. The Wayfinder orients the reader to the department, office or topic of the presented material. The Wayfinder plays an important role within our new look and feel. It eliminates the need to include this information in the main headline, leaving us free to write more creative and compelling headline copy. 

Spacing is key to establishing this editorial look.  Spacing between the anchor bar and Wayfinder should be at least two widths of the Wayfinder type size. Spacing between the Wayfinder and the main headline should be at least three widths of the Wayfinder type size.  Finally, the spacing between each line of the main headline should be about half the width of the uppercase letters of the main headline.

1. Wayfinders are descriptors that help the reader quickly identify the subject of the section of content that follows. Wayfinders are set in HK Grotesk Bold, slate gray (or white when on dark backgrounds), and in all caps. Wayfinders should be no more than 5 words and be set on a single line. Wayfinders are marked with a horizontal yellow bar above.
2. The space after the wayfinder should be approx. 2.5x.
3. Primary headlines are set in Playfair Display Regular, black (or white when on dark backgrounds), and in sentence casing where appropriate. Formatting is flush left, non-justified. Line spacing is set at approximately 1.5x.
4. The space after the primary headline should be approx. 3x the body copy.
5. Body copy is set in HK Grotesk Regular, black (or white when on dark backgrounds), and at approximately 50% of the size of the headline. All copy is formatted flush left, non-justified. Line spacing is set at approx. 1.5x.
6. The space before the call to action should be approx. 3x the body copy.
7. The Call To Action (CTA) provides the reader with the expected result of the section of preceding content. It is set apart from the body copy, and not inline as a hotlink. CTAs are set in HK Grotesk Bold, black (or white when on dark backgrounds), center justified, and in all caps. CTAs are bounded by a yellow box approximately 1.5x the type size.