Fontduet

The developer portfolio

Sora for headings · IBM Plex Sans for body · IBM Plex Mono for code — all three set live below.

Display · Sora 700

Details make the difference

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

Why these three

A developer portfolio wants to feel modern and technical without turning into a terminal. Sora's geometric caps make project names and section headers feel intentional and current, the kind of display face that signals design literacy. IBM Plex Sans handles the case studies and about copy with a neutral, engineered warmth. IBM Plex Mono ties the whole thing together for inline snippets and metadata — same superfamily as the body, so shared proportions and matching x-height keep code and prose visually related rather than pasted-in.

Copy the CSS

CSS — all three roles
:root {
  --font-display: 'Sora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex 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: Sora · IBM Plex Sans · IBM Plex Mono

Choosing type for this? Fonts for portfolios →