Fonts
Only one typeface is used to create FedRAMP UI collateral: Source Sans Pro. Be sure to use this and only this typeface.
When applying font weights to headings, use heavier weights for larger text sizes and lighter weights for smaller elements. For example:
- Hero sections and page titles (H1) should use bold (700 weight).
- Main headers (H2) and section titles (H3–H4) should use semi-bold (600 weight).
- Body paragraph text should use regular (400 weight).
- Eyebrow text for breadcrumbs and supplementary information should use semi-bold (600 weight).
The only exception to this font requirement is when working in the Microsoft Office Suite; Arial must be used as Source Sans Pro will not be available.
Source Sans Pro is an open source typeface created by Adobe. It is free for use in products and projects — print or digital, commercial, or otherwise. Visit fonts.google.com or Adobe Fonts for more information and to download files or copy the code to embed.
| Tag | Size | Weight | Use Case |
|---|---|---|---|
| H1 | 48px / 3rem | 700 | Hero section, first title of all pages |
| H2 | 32px / 2rem | 600 | Main header outside of titles/hero |
| H3 | 24px / 1.5rem | 600 | Section and card titles |
| H4 | 18px / 1rem | 600 | 4th header on white backgrounds; can be <p> on dark backgrounds; buttons; card subtitles |
| P | 18px / 1rem | 400 | Paragraph text on white backgrounds |
| Eyebrow | 14px / 0.875rem | 600 | For breadcrumb nav; above H1–H3 headers for date or other relevant information |