Typography
Foundation's brand is represented by a classic type which prioritizes clear messaging over personality.
Typeface
Foundation's brand typeface is Suisse Int'l. It combines classic style with cutting edge design quality. The Suisse typeface forms the centerpiece of the Swiss Typefaces library.
Usage guidelines
Do
Keep headings brief for legibility and impact. This means there should be a maximum of 3 to 5 words in each line of text.
Use $black70
(or darker) to meet Foundation's accessibility standards for contrast ratios.
Don't
Never use $semibold
or $medium
for paragraph text.
Font sizes
There are 10 font sizes available in total organised in a numeric size scale with the tokens ranging from $0
to $9
.
Token: $9 — Font size: 76px
The quick brown fox jumps over the lazy dog
Token: $8 — Font size: 64px
The quick brown fox jumps over the lazy dog
Token: $7 — Font size: 56px
The quick brown fox jumps over the lazy dog
Token: $6 — Font size: 40px
The quick brown fox jumps over the lazy dog
Token: $5 — Font size: 32px
The quick brown fox jumps over the lazy dog
Token: $4 — Font size: 24px
The quick brown fox jumps over the lazy dog
Token: $3 — Font size: 20px
The quick brown fox jumps over the lazy dog
Token: $2 — Font size: 16px
The quick brown fox jumps over the lazy dog
Token: $1 — Font size: 14px
The quick brown fox jumps over the lazy dog
Token: $0 — Font size: 12px
The quick brown fox jumps over the lazy dog
Font weights
There are three font weights available which should serve most use cases – Book, Medium and Semibold. To use them, reach for the $regular
, $semibold
and $medium
tokens respectively.