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
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
- family:
- graphik
- style:
- normal
- weight:
- 400
Graphik Medium
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
- family:
- graphik
- style:
- normal
- weight:
- 700
Graphik Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
- family:
- graphik
- style:
- normal
- weight:
- 300
Graphik Light Italic
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 name | viewport < 731px | 731px < viewport < 1695px | viewport > 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.