Clarity uses the geometric sans-serif font, Metropolis.

Text Styles

Header Styles

Using Typography

Clarity includes several SASS variables, collections, mixing, and functions for working with typography. These are described below:

$clr-font

This SASS variable points to our default text font, Metropolis.

$clr-altFont

This SASS variable is only used for our headers (H1..H6). Currently, it also points to Metropolis.

$clr-font-size

This SASS variable sets our default font size to 14px.

$clr-font-weight-light

This SASS variable defaults to 200. It is used in very large display text (p0) and headers 1 through 4.

$clr-font-weight-regular

This SASS is the default font weight for Clarity. It defaults to 400.

$clr-font-weight-semibold

This SASS variable is the default bold font-weight of Clarity. It is Metropolis semi-bold (500).

$clr-font-weight-bold

This SASS variable defaults to 600. It is used in very small text (p4 and p6).

The Metropolis Font

Metropolis has clear, simple letters with rounded forms.
This gives the font a friendly and modern appearance.

Metropolis light, regular, medium, and semibold

Font Weights in Clarity

To maintain a light, clean look, Clarity does not use a weight stronger than semibold.

Metropolis light, regular, medium, and semibold

Use the Built-in Styles

The Clarity team determined the optimal height and weight of the text for each component. Some components also have line wrapping built-in. If not, text should be kept to a single line.

Don’t use text links for a call to action. Buttons are better.