Typography
We use two typefaces: Overused Grotesk for words and CommitMono for values.
Aa
Aa
Aa
Aa
Aa
Overused Grotesk sets all text that a person reads. It has five sizes and one weight, Medium. Size alone shows rank. A heading is always smaller than the heading above it.
A caption is body text at 16 / 24, under the item it names.
On a screen narrower than 1124px, Display, H1 and H2 become smaller. The captions show the sizes for your screen.
Secondary Type
0123
Aa
Aa
CommitMono sets values: a number, a date, a code or a hex value. If you say it as a sentence, set it in Overused Grotesk. If you say it as a figure, set it in CommitMono.
All digits in CommitMono have the same width, so you can compare figures easily. CommitMono has one weight.
Usage
Do
Align text to the left. Keep body copy between 50 and 80 characters a line.
Don't
Justify text, or set body copy across the full width of the page.
Do
Use sentence case. Type the words in normal case, and let the badge or label style make the caps.
Don't
Type words in caps, or use caps outside badges and the label style.
Do
Set full ink to make a word stand out. Let the scale set the size and the letter spacing.
Don't
Make text bold, or add letter spacing by hand.
Do
Use an en dash for a range, as in 2010–2020.
Don't
Use an em dash, not even as a separator.