Typography
Our typography is part of our system of communication. Each font conveys the appropriate sentiment to assist our users through each stage of their journey.
Download our fonts from the font library
Usercentrics font stack
Brand typography
We use our custom font, Montserrat and Nunito Sans, for almost everything brand and marketing—from banner ads to billboards. It was designed to be incredibly versatile with lots of range in terms of tone and playfulness. It can be quirky and expressive when it needs to be, or neutral when the situation calls for something a bit more serious. On rare occasions, we also use native typography for selected elements.
Product typography
We use native typography for all in-product experiences. This ensures that the UI is optimized to be highly legible, performs well, and is frictionless as you move between Usercentrics products and the rest of the system.
Font stacks
We use sans serif fonts for most of our type in-product, the exception being when you want to display code then you should defer to monospace fonts.
Usage
Keeping typography consistent and sticking to logical hierarchies ensures that elements in the UI are clear and easily recognizable when scanning the page. Text sizes, styles, and layouts were selected to balance content and UI and to foster familiarity.
The default appearance of typography in Usercentrics Design System uses the UI properties. The use of long form properties is up to individual products.
Styles
TYPESTYLE | SPACING | WEIGHT | SIZE | LINE |
---|---|---|---|---|
Header 1 | 0% | Semibold | 48px | 64px |
Header 2 | 0% | Semibold | 38px | 48px |
Header 3 | 0% | Semibold | 26px | 34px |
Header 4 | 0% | Semibold | 20px | 30px |
|
|
|
|
|
Paragraph Header | 0% | Bold | 20px | 32px |
Paragraph Large | 0% | Regular | 20px | 32px |
Paragraph Medium | 0% | Regular | 18px | 32px |
Paragraph Small | 0% | Regular | 16px | 27px |
OVERLINE | 24% | Regular | 14px | 32px |