Typeface

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

Weights

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="para-sm">Para-sm is small.</div>
<div class="{{ className }}">{{ text }}</div>
{
  "className": "para-sm",
  "text": "Para-sm is small."
}