The minimal portfolio
Instrument Serif for headings · Instrument Sans for body · JetBrains Mono for code — all three set live below.
Details make the difference
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.
function pair(display, body, mono) {
return { display, body, mono }; // three roles, one system
}Why these three
A minimal portfolio leans on contrast between just a few faces, so each has to be deliberate. Instrument Serif brings a tall, elegant display voice with real personality at large sizes — perfect for a name or a single statement headline on an otherwise sparse page. Instrument Sans, its sibling, keeps the body copy quiet and modern with matching design sensibility. JetBrains Mono handles the small print — email, links, project years — where its even monospaced rhythm gives the sparse layout a precise, intentional footnote layer without adding visual weight.
Copy the CSS
:root {
--font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
--font-body: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
}
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 400;
}
body {
font-family: var(--font-body);
font-weight: 400;
}
code, pre, kbd {
font-family: var(--font-mono);
font-weight: 400;
}Read more
More about each face: Instrument Serif · Instrument Sans · JetBrains Mono
Choosing type for this? Fonts for portfolios →