Fonts

Headlines

  • Sofia Pro Medium | All caps, extra tracking (100)
  • ABCDEFG

Body Copy

  • Sofia Pro Light | Sentence case, extra tracking (25)
  • Aa Bb Cc Dd Ee Ff Gg

Body Copy Callouts

  • Sofia Pro Light Italic | Sentence case, extra tracking (25)
  • Aa Bb Cc Dd Ee Ff Gg

Font Substitution

Sofia Pro is available for purchase from MyFonts.com or Adobe Fonts (included with most Adobe Creative Cloud plans). If you cannot obtain a license for Sofia Pro, Century Gothic is available on many PCs, and can work as a reasonable substitute.

Font Legibility

Remember, it doesn't matter what the copy says if it isn't legible. Use 11 point font size as a default. Our audiences include patients with low vision, and older adults. To improve legibility, use white space to provide relief. Generous margins help. Add extra tracking (100 for headlines; 25 for body copy) and extra leading for body copy (11/17; 10/16; and never less than 8.5/14). Avoid bold typefaces in body copy to keep apertures open and characters distinguishable.

Typeface adjustments may be needed for legibility in certain platforms or contexts, such as billboards and video. In these scenarios, you may substitute Sofia Pro Light with a stronger Sofia Pro typeface.

Headline Treatments

Headline Treatment #1
Headline Treatment #2
Headline Treatment #3
Headline Treatment #4

The headline treatment for this brand is bold, confident, and clean. Headlines should always be set in all-caps. Depending on the size, use either Sofia Pro Light or Sofia Pro Regular. To highlight certain words visually, use a Sofia font that is two grades bolder. For Sofia Pro Light, use Sofia Pro Medium for emphasis. For Sofia Pro regular, use Sofia Pro Semi Bold for emphasis. You can indent the last word in the headline to give emphasis to the headline, as well as a feeling of forward movement. Headlines should be typeset in 90% gray; white when necessary, such as when used on top of a photograph; and rarely in red.

Body Copy

Body Copy #1
Body Copy #2
Body Copy #3
Body Copy #4

U of U Health body copy should feel legible, crisp, and contemporary—never crowded. Use force justification with extra tracking where possible. Use left justification in magazines, websites and lengthy documents. Use the typeface Sofia Pro Light, or if you want to call out specific phrases or an introductory paragraph, Sofia Pro Medium. Use extra line leading and tracking up to 25.

Body copy is always set to 90% gray, never black. Placing body copy on the U of U Health gradient allows it to pop off the page and remain legible, without sitting on stark white. While body copy should never be red, sub headlines and compartmentalized content may be.

Brand Colors

Core Colors

  • PMS 187
  • C:07 M:100 Y:82 K:26
  • R:172 G:22 B:44
  • HEX: AC-16-2C

University red is the primary color in the U of U Health brand. Using it further reinforces the overall University of Utah brand, and helps us stand out to a worldwide audience.

  • C:00 M:00 Y:00 K:90
  • R:65 G:64 B:66
  • HEX: 41-40-42

Black adds depth and nuance to the U of U Health brand. We actually use 90% grey rather than solid black. Use this for both graphics and typography—including headlines and body copy.

  • C:00 M:00 Y:00 K:00
  • R:255 G:255 B:255
  • HEX: ff-ff-ff

White is an important background color to help content pop and be legible. It provides a canvas to bring our rich, vivid, human-centric photography and messages to life.

Use a light grey gradient when a little extra tone is needed. It can be used as a background color instead of white or to help segment different areas of a layout.

Gradient composition: 15% black fading to 5% black or solid white.

Using Core Colors

Core colors are standard for majority of communications for use in U of U Health:

  • Advertising
  • Marketing
  • Outreach

See examples of the core colors in use

Primary Colors

Pantone 186 CP
CMYK = 2,100,85,6
RGB = 200,16,46
Hex = #c8102e

Pantone 5483 CP
CMYK = 65,11,25,27
RGB = 79,134,142
Hex = #4f868e

Pantone 7471 CP
CMYK = 37,0,17,0
RGB = 126,221,211
Hex = #7eddd3

40% Black
CMYK = 0,0,0,40
RGB = 167,169,172
Hex = #a7a9ac

Secondary Colors

Pantone 486 CP
CMYK = 0,50,42,0
RGB = 228,147,123
Hex = #e4937b

Pantone 1575 CP
CMYK = 0,59,90,0
RGB = 227,122,65
Hex = #e37a41

Pantone 123 CP
CMYK = 0,16,89,0
RGB = 239,192,65
Hex = #efC041

Pantone 7724 CP
CMYK = 81,3,64,10
RGB = 0,135,85
Hex = #149b74

Pantone 360 CP
CMYK = 63,0,84,0
RGB = 20,155,116
Hex = #6cc24a

Pantone 7707 CP
CMYK = 95,23,11,38
RGB = 0,99,121
Hex = #006379

Pantone 667 CP
CMYK = 52,58,8,8
RGB = 131,108,142
Hex = #836c8e

Using Primary and Secondary Colors

Primary and secondary colors may be used minimally where appropriate. They are not to usurp the core palette, but are used to:

  • Have consistent charts & graphs
  • Unify infographics
  • Enhance unique needs (t-shirts, races and events, seasonal events)
  • Enhance publications and consumer content

See examples of the primary colors in use

See examples of the secondary colors in use

Examples in Use

Core Colors

Primary Colors

Secondary Colors