Typography

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.

<!-- H 1 -->
<div class="h1">h1 header</div>

<!-- H 2 -->
<div class="h2">h2 header</div>

<!-- H 3 -->
<div class="h3">h3 header</div>

<!-- H 4 -->
<div class="h4">h4 header</div>

<!-- H 5 -->
<div class="h5">h5 header</div>

<!-- Para Xl -->
<div class="para-xl">Para-xl is used for large introductory text, to make a page more inviting.</div>

<!-- Para Lg -->
<div class="para-lg">Para-lg is the default type size.</div>

<!-- Para Md -->
<div class="para-md">Para-md is medium-sized text.</div>

<!-- Para Sm -->
<div class="para-sm">Para-sm is small.</div>

<!-- H 2 Bar -->
<div class="h2-bar">h2-bar</div>

<!-- H 3 Bar -->
<div class="h3-bar">h3-bar</div>

<!-- Chart Title Large -->
<div class="chart-title-large">chart-title-large</div>

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

/* H 2 */
{
  "className": "h2",
  "text": "h2 header"
}

/* H 3 */
{
  "className": "h3",
  "text": "h3 header"
}

/* H 4 */
{
  "className": "h4",
  "text": "h4 header"
}

/* H 5 */
{
  "className": "h5",
  "text": "h5 header"
}

/* Para Xl */
{
  "className": "para-xl",
  "text": "Para-xl is used for large introductory text, to make a page more inviting."
}

/* Para Lg */
{
  "className": "para-lg",
  "text": "Para-lg is the default type size."
}

/* Para Md */
{
  "className": "para-md",
  "text": "Para-md is medium-sized text."
}

/* Para Sm */
{
  "className": "para-sm",
  "text": "Para-sm is small."
}

/* H 2 Bar */
{
  "className": "h2-bar",
  "text": "h2-bar"
}

/* H 3 Bar */
{
  "className": "h3-bar",
  "text": "h3-bar"
}

/* Chart Title Large */
{
  "className": "chart-title-large",
  "text": "chart-title-large"
}