Typography Accessibility and Usability Information

This doc summarizes the typography guidelines the Center for User Experience follows for app development.

The Center for User Experience (CUE) complies with Typography guidelines from UW–Madison's official brand guide. Please follow the typography specifications below for visual consistency across the UW–Madison systems. 

UW–Madison has two primary typefaces: Red Hat Display and Red Hat Text.

  1. Red Hat Display

    • Recommended uses: Large sizes, headings/headlines, subheadings

  1. Red Hat Text (better legibility at smaller sizes compared to Red Hat Display)

    • Recommended uses: Small sizes, paragraphs (body copy) 

Typography CUE team is using:

  • Heading 1 - 24px / weight 400 / Red Hat Display

  • Heading 2 - 20px / weight 500 / Red Hat Display

  • Heading 3 - 18px / weight 600 / Red Hat Display

  • Body Text

    • Body Text - 16px / weight 400 / Red Hat Text

    • Body Text - 16px / weight 600 / Red Hat Text

    • Body Text - 16px / weight 700 / Red Hat Text

  • Button - 16px / weight 500 / Red Hat Text

A button style example

  • Table
    • Table header - 14 or 16px / weight 600 / Red Hat Text

    • Table content - 14px / weight 400 / Red Hat Text

Typography examples:

Visualized typography examples in the development environment


Keywords:
Typography Guidelines
Doc ID:
150841
Owned by:
Dani C. in IT Accessibility and Usability
Created:
2025-05-14
Updated:
2025-05-22
Sites:
IT Accessibility and Usability