Font Families

The Solstice Design System uses the Encode Sans and Open Sans font families.

Use only these provided font families. Both have good readability, are widely supported, and are in alignment with the University of Washington's brand guides.

Please visit Heading and Paragraph pages for more details and code snippets.

Encode Sans

Encodes Sans is only used for larger headings.

Open Sans

Open Sans is used for body text, smaller headings, and most UI components (e.g. alert messaging, form labels, buttons).

Guiding Principles

• Maintain consistency across pages. Use the same fonts, sizes, and spacing for similar elements (e.g., headings, body text, buttons) across all pages to create a unified experience.
• Avoid overriding the default font styles. Default styles for each HTML element and Bootstrap component are established in the Solstice and Bootstrap stylesheets.
• Large text will likely be an HTML heading. If you emphasize something using large text, a heading tag should be used to call out the information to screen readers.

Styling & Decoration

Color

• Colors are defined in the Solstice style sheet. You shouldn't need to change the color of text, as it is defined in the Solstice style sheet and is an inherited property of HTML elements and/or Solstice and Bootstrap themes. Review the comprehensive Color page for more guidance.
• Text color and value pairings are accessible. All color choices in the Solstice Design System adhere to the accessibility requirements of UW, further outlined in WCAG Contrast guide, and are dark mode compatible.
• Keep text greyscale. We strongly recommend not using brand colors (beige, purples, accent palette) for any headings. Brand colors in headings adds unnecessary visual complexity to a page and can be misinterpreted as having a semantic meaning.

Decoration

• Bold and italic styles draw attention, and can also communicate semantic meaning. Italicizing words or strings, however, can decrease readability. Both should be used sparingly so as to not diminish their effectiveness. It's best to use <strong> and <em> to ensure the semantic meaning is being conveyed. In the very rare case where you only want a stylistic change and don't need to convey semantic meaning, <b> <i> can be used.
• Underlining text can conflict with link styling. Avoid underlining text as it may falsely indicate that text is interactive.
• Strikethrough affects readability. Avoid using the strikethrough style on text. If you need to indicate that there has been a change to content, try do so in another way.
• Instead of outlining text, use bold or italic styles. Text should never be outlined. While outlining text may seem like a way to make text bolder, the characters and character spacing don't account for the outline; this results in bloated and hard to read text. Instead, utilize font weights or styles like bold and italic to create emphasis.
• Text should always remain static. Motion graphics should never be applied to text. The only situations where text “moves” are when scaling/rearranging due to responsive design or if a user activates an optional action.

Case

• Use sentence case in most situations and AVOID all caps. Headings may use title case, especially an <H1>/Page title. Review Labels for more details.

Alignment & Spacing

Text alignment

• Left-align text within content headings and paragraphs. This supports the “F” shaped scanning pattern that most western readers use. Deviating from left alignment slows readers down.
• Text should never be set to “justify”. Justifying (aligned to both the left and right margins) text results in inconsistent spacing between words and affects readability.

Text layout

• Text lines should ideally be limited to 45-85 characters. Review the Layout page for more details.

Truncation

• Avoid truncation, in any text elements. Review Labels for more details.

Technical Implementation

Define text sizes in REM. This ensures fonts will scale or display the same in mobile and desktop formats.