logo-mark Shape arrow-right arrow-right arrow-right Group Group chevron-vertical Created with Sketch. chevron-vertical Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Created by FontForge 20170731 at Tue Dec 2 15:06:59 2014 By Aleksey,,, Copyright (c) 2014 by Cruzine. All rights reserved.

Typography

We use typography to organise content and create clarity between users and interfaces.

Typefaces

Bitter

We use Bitter to create bold headlines that complement our illustrative style.
@import url('https://fonts.googleapis.com/css?family=Bitter:400,400i,700');

font-family: "Bitter", serif;
IBM Plex Serif Pro
We use IBM Plex Serif for editorial storytelling.
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Serif');

font-family: 'IBM Plex Serif', serif;
System (San Francisco, Segoe UI, Roboto)
We use system fonts for UI elements to improve performance and create consistency across devices.
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
Type Scale
We use a 6px baseline grid to define hierarchy and create visual harmony between the interface and our typography.

48px, 1.125

42px, 1.25

32px, 1.35

27px, 1.35

18px, 1.45
Article, 18px, 1.58
Body — System, 15px, 1.45
  • Extend the scale to your requirements 60px, 72px...
  • Use multiples of the baseline (3px) to create additional font sizes (9px, 15px, 27px).
Type Color
Titles
Title text color should always be #333333 on light backgrounds or #ffffff on dark backgrounds.

Title #333333

Title #ffffff

  • Add an underline to a title if it is also a link.
  • Title (link)

  • Change the color of a title if it is also a link.
  • Title (link)

Body
Body text is often used in conjunction with a title. Therefore a lighter color is used to create contrast and visual heirarchy.

Body Text: #6E7687

Body Text: #a7adb4

Links
To contrast with surrounding content links should always be underlined. Links should always be #158443 on light backgrounds or #ffffff on dark backgrounds.

Typeface Package

Download the font files for our digital products (Bitter & IBM Plex Serif).

Download