We use a combination of Quincy (in two weights) and Sofia Pro (in three weights) to establish a charming and inviting tone with our typography. See type styles below for reference. If you need additional type styles, please do so in collaboration with the Koala marketing team so we can maintain consistency as we grow our typographic voice.
Sizes are ratio-driven, starting with the headline as our base value.
For the best harmony with our baseline grid, we recommend common type sizes of 8, 9, 12, 14, 18, 24, 36, 48, 56, 64, 72, 96, etc. and leading derived from multiples of 3.
For example, if your font size is 72px/pt for a headline, your leading would also be 72 beacuse it's the same as the font size, and naturally divisible by 3.
But for a subhead, which in the above scenario would be 24px/pt, the math of 1.1x font size yields 26.4 - not divisible by three. In this case you would simple round up to the nearest multiple of three, so the font size would be 24 and the leading would be 27.
Font Family: Quincy
Weight: Medium or Black
Spacing: 0
Size: 8, 9, 12, 14, 18, 24, 36, 48, 56, 64, 72, 96, etc.
Leading: Same as Font Size
Text Style: Title case with no punctuation, or sentence case with punctuation.
Paragraph Align: Left or Centered
Color: Midnight Blue or Gum Leaf
Font Family: Sofia Pro
Weight: Semi-Bold
Spacing: 0
Size: 0.5 or 0.75 x Headline Size
Leading: 1.1x Font Size
Text Style: Title case with no punctuation, or sentence case with punctuation.
Paragraph Align: Left or Centered
Color: True Blue or Gum Leaf
Font Family: Sofia Pro
Weight: Semi-Bold
Spacing: 0
Size: 1/3 x Headline Size
Leading: 1.1x Font Size
Text Style: Title case with no punctuation, or sentence case with punctuation.
Paragraph Align: Match Headline
Color: Match Headline
Font Family: Sofia Pro
Weight: Regular or Semi-Bold
Spacing: 0
Size: 1/2, 1/3, 1/4, 1/6 x Headline Size
Leading: 1.5x Font Size
Text Style: Sentence case with punctuation.
Paragraph Align: Match Headline
Color: True Blue, Gum Leaf, Midnight Sky or White
Font Family: Sofia Pro
Weight: Bold
Spacing: 200
Size: 1/3, 1/4, 1/6 x Headline Size
Leading: Same as Font Size
Text Style: All Caps
Paragraph Align: Match Headline
Color: True Blue, Gum Leaf, Midnight Sky or White
Font Family: Quincy
Weight: Black
Spacing: 0
Size: 0.5, .75x, 1x Body Copy Size
Leading: 1.5x Font Size
Text Style: Sentence case with punctuation.
Paragraph Align: Match Headline
Color: True Blue, Gum Leaf, Midnight Sky or White
Koala’s website has the body copy base font size of 16px which equates to 1rem. Our type sizes increase or decrease from there. See specific sizes below. Use a line-height of a divisible of 8’s so it stays on the baseline grid of 8px that has been established. For example, 8, 16, 24, 32, 40, 48 and so forth. You can find more details on web typography here.
Use Midnight sky for all type except when on a darker colour then use white. Charcoal can be used for secondary type if needed but should be used sparingly.
