Fontduet

The technical blog

Bricolage Grotesque for headings · Lora for body · JetBrains Mono for code — all three set live below.

Display · Bricolage Grotesque 700

Details make the difference

Body · Lora 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 · JetBrains Mono 400
function pair(display, body, mono) {
  return { display, body, mono }; // three roles, one system
}

Why these three

A technical blog wants a distinctive voice up top, a genuinely readable body, and code that never trips the reader. Bricolage Grotesque gives post titles a hand-cut, slightly quirky personality that stands apart from generic tech blogs. Lora carries the article itself with a calligraphic warmth and a reading-friendly x-height that makes even a 2,000-word deep dive comfortable. JetBrains Mono sets the code blocks with its wide, unambiguous glyphs and ligature-ready design, keeping snippets crisp against Lora's softer, humanist body text.

Copy the CSS

CSS — all three roles
:root {
  --font-display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Lora', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, 'Courier New', 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: Bricolage Grotesque · Lora · JetBrains Mono

Choosing type for this? Fonts for blogs →