Typography

Page Contents

Typography is a key differentiating element of Fred Hutch's brand, reflecting our professionalism, clarity and innovative spirit. Consistent use of our font hierarchy and styles ensures a cohesive brand experience across all print and digital materials. This section outlines the guidelines for using our typefaces effectively.

Our Font System

Our Fonts

Fred Hutch's visual system uses Tiempos Headline for the display type and Circular for all other type. They work side-by-side to convey information in a harmonious manner.

Tiempos Headline

Tiempos Headline should be used for display type and headlines.

Typography example of Tiempos Headline

Circular

Circular should be used for subheads, information and body copy. This typeface is used in the wordmark of the logo, which will create a seamless connection between the logo and any supporting text.

Typography example of Circular
Purchasing Font Licenses

Tiempos Headline can be purchased from Klim Type Factory and Circular can be purchased from Lineto.

Do not use Circular Std font located on free sites as this is not the correct Fred Hutch brand font. 

Please email brand@fredhutch.org if you would like assistance in purchasing the brand fonts for your desktop.

Alternative Fonts

If you do not have licenses to our brand fonts, you may use Times New Roman in place of Tiempos Headline, and Aptos or Arial in place of Circular for general documents.

Alternative font example showing Times New Roman and Circular

Best Practices

Below are some tips for improving legibility and readability of text-based documents.

Left Align Text

Left alignment is recommended for most instances as it aligns with the natural reading flow of left-to-right text, making the user experience more intuitive. It also facilitates easier scanning and improves accessibility for readers with dyslexia or other reading difficulties.

Example of text aligned left

Tracking/Letterspacing

Tracking, or letter spacing, is the space between characters and is essential for readability and balance. 
A well-designed typeface shouldn’t need much, if any, tracking in body copy. However, adding a bit of tracking to all-caps text can improve legibility, especially with bold fonts, by creating a more comfortable buffer between letters and preventing a cramped appearance.

Example showing text tracking/letterspacing

Leading/Line Height

Leading, or line spacing, is the space between lines of text and plays a key role in readability. Tighter leading for headlines keeps bold, all-caps text impactful and easy to scan, while looser leading for body copy enhances readability and flow. Set leading to 115–170% of the font size, with headlines on the lower end and body copy on the higher end.

Example showing line height in text

Line Length

Line length is crucial for readability, influencing both speed and comprehension. If lines are too narrow, frequent breaks can disrupt the reading flow and hinder comprehension. If they're too wide, it can be difficult to locate the start of the next line and slow down the reader. 

The optimal line length strikes a balance, ideally between 45–75 characters, with 65 being ideal.

Paragraph of text with too short line length and too long line length indicated

Typography and Accessibility

To make color and typography ADA compliant, avoid using color alone to convey meaning or prompt actions. Important text instructions or calls to action should not rely solely on color. To ensure font colors have good contrast with their backgrounds for readability, refer to the following approved color pairings with a range of background fills. 

View Color Guidelines for Accessibility
Navy background with white text
White text on Fred Hutch Navy
Teal background with white text
White text on Teal
Light grey background with navy text
Navy text on light grey
White background with navy text
Navy text on white

Font Size for Printed Materials

For printed materials, font size plays a crucial role in ensuring accessibility and readability. These font size guidelines help make printed materials more inclusive, ensuring that all readers can engage with the information comfortably and effectively.

For patient education pieces

  • Use at least a 12pt font to ensure the content is easy to read for all audiences, including those with varying levels of vision.

For non-clinical documents

  • A minimum of 10pt font is recommended to maintain clarity and accessibility. 

Things to Avoid

Example of typography - don't use all all capitals in text
Avoid using all caps. To add emphasis, opt for a bold or black weight of one of our brand fonts.
Example of typography - don't bold paragraph text.
Do not use paragraph text or long bodies of copy in a bold weight font.
Example of typography - don't justify text paragraph.
Do not justify align any copy as it leads to akward spacing and reduces readability.
Example of typography - don't use unapproved fonts and colors
Do not use unapproved typography or color combinations.
Example of typography - don't have text too close to visual elements
Ensure sufficient contrast and negative space to create visual balance and establish clear hierarchy.
Example of typography - don't use text with white drop shadow effect
Do not apply a drop shadow or offset text shadow.
Example of typography - don't use ampersands in text paragraph
Do not use an ampersand in copy and content; always write out "and".
Example of typography - don't use color to emphasize text
Do not rely on color alone to highlight text or express emotion through text.
Example of typography don't showing Fred Hutch Cancer Center across two lines
Do not break "Fred Hutch" or "Fred Hutch Cancer Center" onto two lines unless necessary. If this causes typographic issues, such as a widow (a single word left alone on a new line) or an uneven rag (an unbalanced text edge), you may break the name onto two lines for better flow.
Example of typography don't showing text with widow
Avoid widows (single words left at the end of a paragraph) and orphans (a word or phrase left alone at the beginning of a new page or column).

Approved Typographic Examples

Examples of typography in use

Contact Us

Questions regarding our typography and these guidelines can be directed to brand@fredhutch.org.