Typography
Guidelines for consistent typography accross apps and websites.
Font families
The design system provides the following font families. The sans font family
is used by default. The mono font family is used for snippets of code.
Font family tokens
| Token | Family |
|---|---|
'sans' |
'Public Sans', 'Arial', sans-serif |
'mono' |
'Roboto Mono', 'SFMono-Regular', 'Consolas', monospace |
Using font family tokens
| Context | Usage | Example |
|---|---|---|
| SCSS function | font-family(family) |
font-family('sans') |
| SCSS mixin | @include font-family(family); |
@include font-family('mono'); |
| CSS class | .uw-font-family-family |
.uw-font-family-mono |
Font sizes
The design system uses a major second type scale. The body font size is set to
16px.
To maintain consistency, font sizes shouldn’t be set to a size not represented by this type scale. In order to make it easy to use the font sizes in this scale, the design system provides SCSS utilities and CSS classes that implement the font sizes in the type scale.
Font size tokens
| Token | Size (rem) |
Example |
|---|---|---|
'xxs' |
0.790rem |
Design System |
'xs' |
0.889rem |
Design System |
'sm' |
1rem |
Design System |
'md' |
1.266rem |
Design System |
'lg' |
1.602rem |
Design System |
'xl' |
2.027rem |
Design System |
'xxl' |
2.566rem |
Design System |
Using font size tokens
| Context | Usage | Example |
|---|---|---|
| SCSS function | font-size(size) |
font-size('sm') |
| SCSS mixin | @include font-size(size); |
@include font-size('md'); |
| CSS class | .uw-font-size-size |
.uw-font-size-lg |
Using responsive font sizes
Combining a font size with a breakpoint will only apply that font size when the screen is as large or larger than the breakpoint.
| Context | Usage | Example |
|---|---|---|
| SCSS mixin | @include font-size(size, breakpoint); |
@include font-size('md', 'sm'); |
| CSS class | .uw-font-size-size-breakpoint |
.uw-font-size-lg-md |
Line heights
Appropriate line heights make text more readable. Larger line heights should be used with longer sections of text.
Line height tokens
| Token | Value | Usage |
|---|---|---|
'xs' |
1 |
Buttons, navigation, and other short bits of text not meant to break over a line. |
'sm' |
1.15 |
Headings, text less than 2 or 3 sentences |
'md' |
1.35 |
Captions, text less than 1 paragraph |
'lg' |
1.62 |
Long passages of text |
'xl' |
1.75 |
Pullquotes, short text meant to be distinguished |
Using line height tokens
| Usage | Example | |
|---|---|---|
| SCSS function | line-height(height) |
line-height('sm') |
| SCSS mixin | @include line-height(height); |
@include line-height('md'); |
| CSS class | .uw-line-height-height |
.uw-line-height-lg |
Line lengths
The readability of text can benefit from limiting the maximum number of characters per line. The design system provides a number of presets that can be used to prevent text elements from becoming too wide.
The line lengths in the design system are set using the somewhat unusual
CSS ex unit.
The ex unit has a width equivalent to the x-height of the current font. This
is a better approximation for the width of a character than more common relative
units like rem and em.
Line length tokens
| Token | Value |
|---|---|
'sm' |
48ex |
'md' |
64ex |
'lg' |
80ex |
'none' |
no upper limit (useful for overriding previously applied limits) |