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

Graphik Medium

Graphik Light

Graphik Light Italic

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.

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.