Typography

Headings and text

A well-defined information hierarchy is essential for a user to find their way around an application.

typefaces used in the Cosmos Design System

A critical factor in creating this hierarchy is the use of distinct header styles that help the user make sense of the presented content. All text in Pega applications uses the Open Sans font. When designing hierarchy, use the following typographic styles are stated:

H1: Use for page headers and for summary and preview panels.
Size: 22px | 1.375rem
Line Height: 30px | 1.875rem
Weight: 700 Bold
Letter-spacing: Auto

H2: Use for summary and peek panel tabs.
Size: 18px | 1.125rem
Line Height: 24px | 1.5rem
Weight: Can be either 400 Regular or 700 Bold depending on state
Letter-spacing: Auto

H3: Use for card headers.
Size: 18px | 1.125rem
Line Height: 24px | 1.5rem
Weight: 600 Semibold
Letter-spacing: Auto

H4: Use for object names, table headers, segmented control, and notifications.
Size: 14px | 0.875rem
Line Height: 19px | 1.1875rem
Weight: 700 Bold
Letter-spacing: Auto

Default: Use for standard copy, controls, and Pulse content.
Size: 16px | 1 rem
Line Height: 22 px | 1.375 rem
Weight: 400 Regular
Letter-spacing: Auto

Secondary: Use for labels, metadata, lifecycle staging, and notification links.
Size: 14px | 0.875 rem
Line Height: 19px | 1.1875 rem
Weight: Can be 400 Regular, 600 Semibold, or 700 Bold
Letter-spacing: Auto

Link: Use for links and buttons.
Size: 16px | 1rem
Line Height: 22px | 1.375rem
Weight: 400 Regular or 700 Bold depending on state
Letter-spacing: Auto

Graphic Text Extra-Large: Use for KPIs (Key Performance Indicators) and prediction cards.
Size: 40px | 2.5rem
Line Height: 55px | 3.4375rem
Weight: 600 Semibold
Letter-spacing: Auto

Graphic TextLarge: Use for KPIs (Key Performance Indicators) and prediction cards.
Size: 30px | 1.875rem
Line Height: 41px | 2.5625rem
Weight: 600 Semibold
Letter-spacing: Auto

Badge: Use for badge states.
Size: 12px | 0.75rem
Line Height: 17px | 1.0625rem
Weight: 700 Bold
Case: All Caps
Letter-spacing: Auto

Helper Text: Use for input fields, controls, and prompts.
Size: 12px | 0.75rem
Line Height: 17px | 1.0625rem
Weight: 400 Regular
Letter-spacing: Auto

Side Nav: Use for object names, list items, and metadata.
Size: 22px | 1.375rem
Line Height: 30px | 1.875rem
Weight: 600 Semibold
Letter-spacing: Auto

Icon Font: This is a Pega-font used throughout the entire library.
Typeface: Pega-icon-font
Size: 18px | 1.125rem
Line Height: 18px | 1.125rem
Letter-spacing: Auto

Last updated: Aug 2019