Fontduet

The design portfolio

Syne for headings · Manrope for body · Roboto Mono for code — all three set live below.

Display · Syne 700

Details make the difference

Body · Manrope 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 design portfolio earns attention with an unusual display face, then has to stay legible enough to let the work breathe. Syne's wide, slightly eccentric bold makes project titles feel curated and gallery-like. Manrope handles captions and case-study copy with a modern, low-contrast neutrality that never upstages the imagery. Roboto Mono provides the specs — dimensions, tools, dates, credits — in a tidy monospaced column whose mechanical rhythm reads as metadata, giving the layout a clear informational layer beneath Syne's expressive headings.

Copy the CSS

CSS — all three roles
:root {
  --font-display: 'Syne', Verdana, 'Arial Black', sans-serif;
  --font-body: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-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: Syne · Manrope · Roboto Mono

Choosing type for this? Fonts for portfolios →