Typography

Typeface

We use a font called Graphik. It was designed by Christian Schwartz and we lease it from Commercial Type.

We use Graphik, a contemporary sans-serif font, because it's very legible (which is important when you're aiming for simplicity). Its geometric twists also support the rounded shapes of our logo and supergraphic.

Bulb typography should be left- aligned because this helps to make the text readable. Centered text should only be used for headlines or short subheadings - it's a rare exception.

We use Graphik Light for big headlines (mostly in print), Graphik Regular for most of the body copy, and Graphik Medium when we need the text to stand out.

Graphik Regular

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890(,.;:?!$&*)

family: 
graphik
style: 
normal
weight: 
400

Graphik Medium

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890(,.;:?!$&*)

family: 
graphik
style: 
normal
weight: 
700

Graphik Light

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890(,.;:?!$&*)

family: 
graphik
style: 
normal
weight: 
300

Graphik Light Italic

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890(,.;:?!$&*)

family: 
graphik
style: 
italic
weight: 
400

Scale

Base font size and container widths are optimised for ideal line length: 50-75 characters

Text sizes are based on a typographic modular scale, with 16px base size and 1.125 ratio. The line height for paragraph text is 150%, for headings - 115%.

Always provide sufficient colour contrast with background: minimum 3.0 colour ratio.

Text size nameviewport < 731px731px < viewport < 1695pxviewport > 1695px
snail
13px
16px
20px
mouse
16px
20px
26px
otter
20px
26px
32px
dolphin
26px
32px
41px
hippo
32px
41px
52px
mammoth
41px
52px
66px
whale
52px
66px
83px

We have two types of typography settings: spacious and dense.

Spacious

Optimised for readability. In typography and image heavy layouts (such as in Bulb Marketing), the font size goes up to the medium size at 668px and the layout stays in one column up until 1024px. This is to focus the user's attention on the content.

Dense

Optimised for scanning. In dense, data and form heavy layouts (such as in Bulb Account), the font size goes up to the medium size at 1025px and the layout stays in one column up until 668px. This is to fit more content in the available screen space.

👀 See also:

The Layout section describes responsive behaviours container widths combined with typography.

Headings

  • Hero headings: whale
  • Page headings: mammoth
  • Section headings: hippo
  • Panel headings: dolphin
☝️ Research insight: The most important piece of information or action for the user should be in the headings. Users tend to scan a page instead of closely reading paragraph text.
👀 See also:

The Publication module combines typographic headings, styles, the spacing between them, and the responsive behaviours.