Typography: H 1


Lato is used for all headers and text on the site. Lato was chosen for the following features:

  • it uses tabular figures, which are ideal for tables and numerical data
  • stylistically it’s an unassuming font which doesn’t try to assert too much personality, and remains neutral
  • it offers a good range of weights
  • fast loading times


Three weights of Lato are used on the site: Light (300), Bold (600), and Book (400).

Light is the base weight, the default. Book is an in-between weight used for sticky side navigation, all-caps chart titles, and other occasions where bold would be a little too overpowering.

<div class="h1">h1 header</div>
<div class="{{ className }}">{{ text }}</div>
  "className": "h1",
  "text": "h1 header"