Fontduet

The data report

Archivo for headings · PT Serif for body · Roboto Mono for code — all three set live below.

Display · Archivo 700

Details make the difference

Body · PT Serif 400

Good type pairing is quiet craft: a display face with character, a body face that gets out of the way, and a monospace that keeps code honest. Set them together and a page finds its rhythm — headings announce, paragraphs settle, and the details stay precise.

Mono · Roboto Mono 400
function pair(display, body, mono) {
  return { display, body, mono }; // three roles, one system
}

Why these three

A data-heavy report needs a solid headline face, a readable serif for the analysis, and a mono that lines numbers into honest columns. Archivo's grotesque bold gives section titles and figure headers a newspaper-like authority. PT Serif carries the written findings with sturdy, screen-tested serifs that keep methodology sections readable. Roboto Mono sets the tables and inline figures — its steady, tabular rhythm aligns decimals and thousands separators cleanly, so a column of results scans as a column rather than a jumble, which is the whole point of putting numbers in mono.

Copy the CSS

CSS — all three roles
:root {
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'PT Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'Roboto Mono', 'Courier New', Courier, monospace;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
}

code, pre, kbd {
  font-family: var(--font-mono);
  font-weight: 400;
}
From the same deskKeychord— keyboard shortcuts for every app

Read more

More about each face: Archivo · PT Serif · Roboto Mono

Choosing type for this? Fonts for magazines →