---
name: Typography
menu: Patterns
parent: Styles
route: /styles/typography
---

# Typography

## Typography principles

- Base font size and container widths are optimised for ideal line length: 50-75 characters
- Left align all paragraph text and headings when they appear with paragraph text. Centred alignment is ok for standalone headings and short subheadings only.
- Always provide sufficient colour contrast with background: minimum 3.0 [colour ratio](http://contrast-ratio.com/).

## Scale

Text sizes are based on a typographic [modular scale](http://www.modularscale.com/?16&px&1.125), with 16px base size and 1.125 ratio. The line height for paragraph text is 150%, for headings - 115%.

```specimen-react
<DocTable>
  <thead>
    <tr>
      <th>Text Size Name</th>
      <th>narrow: {'<'} 667</th>
      <th>medium: 668 {'-'} 1694</th>
      <th>wide: 1695+</th>
    </tr>
  </thead>
  <tbody>
    {typography.map(typographyStep => (
      <tr key={typographyStep.title}>
        <td>{typographyStep.title}</td>

        {typographyStep.breakpoints.map(breakpoint => (
          <td key={breakpoint}
            style={{
              fontSize: breakpoint,
            }}
          >
            {breakpoint}
          </td>
        ))}
      </tr>
    ))}
  </tbody>
</DocTable>
```

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.

```specimen-see-also
The [Layout](/styles/layout) section describes responsive behaviours container widths combined with typography.
```

## Headings

- Hero headings: `whale`
- Page headings: `mammoth`
- Section headings: `hippo`
- Panel headings: `dolphin`

```specimen-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.
```

## Typeface

The Bulb brand typeface is Graphik, designed by Christian Schwartz. It's a contemporary sans serif with geometric twists that supports rounded shapes of the logo and the supergraphic. Only use regular and medium weights to ensure best readability. [Download Graphic here](https://drive.google.com/open?id=1BsncpPBjY7YcL3Xk9ylzK1eYfAXg6TRX).

### Graphik Regular

```specimen-typography
fontFamily: graphik
fontStyle: normal
fontWeight: 400
```

### Graphik Medium

```specimen-typography
fontFamily: graphik
fontStyle: normal
fontWeight: 700
```

### Graphik Light

```specimen-typography
fontFamily: graphik
fontStyle: normal
fontWeight: 300
```

### Graphik Light Italic

```specimen-typography
fontFamily: graphik
fontStyle: italic
fontWeight: 400
```

```specimen-see-also
The [Publication](/patterns/publication) module combines typographic headings, styles, the spacing between them, and the responsive behaviours.
```
