Typography
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.
| Type | Style | Usage |
|---|---|---|
| Header 1 | 19px, Regular, General color | Page headers |
| Header 2 | 17px, 800 weight, General color | Section headers |
| Header 3 | 15.5px, 800 weight, General color | Sub headers |
| Header 4 | 14px, 800 weight, General color | Sub headers |
| Normal Text | 14px, Regular, General color | Input text, descriptive paragraphs, buttons, read-only fields |
| Label | 13px, Regular, Label color | Field labels |
| Instruction text | 11px, Regular, Instruction color | Inline instructions |
| Links | 14px, Regular, Link color | Links, button text |
| Error text | 12px, 800 weight, Error color | Inline errors/validation |
| Success text | 12px, 800 weight, Success color | Success/confirmation messages |
Previous topic Spacing Next topic Components