Typography
Clarity uses the geometric sans-serif font, Clarity City.
Text Styles
Style Name | Attributes | Selectors | Used For |
---|---|---|---|
Body text |
| p, .p1 |
|
Section header |
| .p2 |
|
Table, grid, and form text |
| .p3 |
|
Form labels and column headers |
| .p4 |
|
Table footers and chart data |
| .p5 |
|
Small headers |
| .p6 |
|
Tags and labels |
| .p7 |
|
Badges |
| .p8 |
|
|
| pre. |
|
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 Clarity City Font
Clarity City has clear, simple letters with rounded forms. This gives the font a friendly and modern appearance.
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
1234567890
Font Weights in Clarity
To maintain a light, clean look, Clarity does not use a weight stronger than semibold.
Clarity City Light
Clarity City Regular
Clarity City Medium
Clarity City 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.
Use Text Links for Navigation
Don’t use text links for a call to action. Buttons are better.