Typography Guidelines
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.
-
Red Hat Display
-
-
Recommended uses: Large sizes, headings/headlines, subheadings
-
-
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
color: var(#121212);
font-family: "Red Hat Display";
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: normal;
-
Heading 2 - 20px / weight 500 / Red Hat Display
color: var(#121212);
font-family: "Red Hat Display";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.15px;
-
Heading 3 - 18px / weight 600 / Red Hat Display
color: var(#121212);
font-family: "Red Hat Display";
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.5px;
- Body Text
-
Body Text - 16px / weight 400 / Red Hat Text
-
color: var(#121212);
font-family: "Red Hat Text";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.5px;
-
-
Body Text - 16px / weight 600 / Red Hat Text
-
color: var(#121212);
font-family: "Red Hat Text";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.5px;
-
-
Body Text - 16px / weight 700 / Red Hat Text
-
color: var(#121212);
font-family: "Red Hat Text";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.5px;
-
Button - 16px / weight 500 / Red Hat Text
color: var(--sky-lighter, #FFFFFF);
text-align: center;
font-family: "Red Hat Text";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
letter-spacing: 1.25px;
- Table
- Table header - 14 or 16px / weight 600 / Red Hat Text
color: var(#121212);
font-family: "Red Hat Text";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.5px;
color: var(#121212);
font-family: "Red Hat Text";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.5px;
-
- Table content - 14px / weight 400 / Red Hat Text
color: var(#121212);
font-family: "Red Hat Text";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.25px;
Typography examples:
