Typography

Headings and text

A well-defined information hierarchy is essential for a user to find their way around an application. One important factor in creating this hierarchy is the use of distinct header styles that help the user make sense of the content being presented.

All text in Pega applications uses the Open Sans font.

TypeStyleUsage
Header 1 19px, Regular, General colorPage headers
Header 2 17px, 800 weight, General colorSection headers
Header 3 15.5px, 800 weight, General colorSub headers
Header 4 14px, 800 weight, General colorSub headers
Normal Text 14px, Regular, General colorInput text, descriptive paragraphs, buttons, read-only fields
Label 13px, Regular, Label colorField labels
Instruction text 11px, Regular, Instruction colorInline instructions
14px, Regular, Link colorLinks, button text
Error text 12px, 800 weight, Error colorInline errors/validation
Success text 12px, 800 weight, Success colorSuccess/confirmation messages

Last updated: Jul 2018

Next: Avatars