Typography
Great type is at the core of our branding, and we make good use of our own custom font.
Introduction
We have our own custom font, called Cal Sans. It can be downloaded through GitHub, and should be used in all designs that make use of a heading.
It's important to note that Cal Sans is a display font, meaning that it should exclusively be used for headings and large text.
Here's an excerpt from the GitHub repository:
As this design was created for display, and is currently a single static font, an unusual approach is taken for its texture and default typography. Letters are intentionally spaced to be extremely close for tight headlines “out of the box.” For smaller subheadings, positive letter spacing must be applied. There are currently no other Open Source geometric sanserifs geared as intentionally for “tight but not touching” typesetting—as it is more labor intensive to produce with accurate texture. But for typesetters, if they would letterspace another design as tight as Cal Sans, the results would not be as consistent.
The key thing to note here is that it's ready out of the box for large headings, but if you need to go smaller, you'll need to apply some positive letter spacing so it's not looking too bunched up.
For all other text, we use Inter. A pretty standard choice, but a rock-solid one nevertheless.
Font Sizes
Headings
Type | Font Size |
---|---|
Title 1 | 28px |
Title 2 | 24px |
Title 3 | 20px |
Body Text
Type | Font Size |
---|---|
Large single line text (semibold only) | 16px |
Normal single line text | 14px |
Small single line text | 12px |
Extra small single line text (regular and semibold only) | 10px |
Large muliline text (medium only) | 16px |
Normal multiline text | 14px |
Small multiline text (mono only) | 12px |
Last updated