Typography

Font

Our typography system is based on the Circular font. The font is used for all types of texts: headings, body copy, UI components, etc.

How to get the font?

Office and alternative font

Arial should be used where our font cannot be used like in Office documents or apps with limited font customization.

Font stack

For web-based projects the font stack should use native sans-serif fonts as a fallback:

"Circular", "Helvetica Neue", Arial, Helvetica, sans-serif

Usage

Interfaces and communication are text before all. Keeping typographic size and styles consistent and hierarchized makes it easier for people who learn once how to navigate an experience, to apply their knowledge to new experiences they come across.

The following sizes, styles, and layouts are selected to provide clarity and foster familiarity while staying flexible. Although they are provided for screen design they can be extrapolated for any support.

Styling

Bold formatting is used to distinguish headings and to highlight content within the body text. It is also used to highlight primary interactions in interactive elements.

Medium font-weight is used for interactive elements. It can also be used to provide additional granularity in styling communication material.

Italic should be used sparingly when mentioning foreign words, or to denote content from its surrounding text without highlight it. Avoid using italic on a large group of words, and don't use italic in headings, captions, or interface elements.

Line length

The right amount of characters on each line is key to the readability of your text. Otherwise, it makes it harder for people to focus. There is no perfect width, but a good goal is to aim for 60 to 90 characters per line (including spacing).

It's not always easy to manage line lengths as our audience can use different devices, apps, or browsers to access the content. You should design for an ideal range under normal circumstances that is flexible enough to embrace other contexts.

Colors

The body text relies on the Neutral Darker color for comfortable reading on white background. Headings and graphic texts can use on our brand blue or any appropriate contrasting color depending on usage.

Hyperlinks

Links within text paragraphs should always have an underline to denote it is clickable. The default link color can be replaced by the text color when links don't need to be emphasized.

Sizes

The following size guidelines provide consistent text dimensions across our screen-based content.

• s is the default font size for web-based apps like our Dashboard.
• m is the default font size for anything on mobile and communication material like our website.
• The line-height is always a multiple of 5 to match with our 5-pixel grid.
• The default space between paragraphs is s (15px). It can be adjusted to fit the visual composition.
• The larger sizes will adjust depending on the screen size.

Headings

The heading sizes are identical to text sizes. They have a default bottom margin corresponding to their size.

The styling of headings (weight, margins, and colors) can be adjusted to fit appropriately with the content hierarchy and visual composition.

Uppercase headings

Uppercase headings can be used to group content on screen, or as an eyebrow for titles.