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-xl">Para-xl is used for large introductory text, to make a page more inviting.</div>
<div class="{{ className }}">{{ text }}</div>
{
  "className": "para-xl",
  "text": "Para-xl is used for large introductory text, to make a page more inviting."
}