Usercentrics - CONFIDENTIAL

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

Version 1 Next »

READY

 Process

Step

Assigned

Status

1

Draft

Chris Rubisch

(error)

2

Content

(error)

3

Approval

(error)

4

Ready for Online

(error)


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

Product NOT READY

To be defined.

  • No labels