Fontduet

The personal blog

Playfair Display for headings · DM Sans for body · Roboto Mono for code — all three set live below.

Display · Playfair Display 700

Details make the difference

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

Why these three

A personal blog wants a headline with warmth and taste, a body that disappears, and a mono for the rare code note or link snippet. Playfair Display's high-contrast serifs give post titles a literary, blog-of-record elegance that feels personal rather than corporate. DM Sans keeps the writing itself light and unobtrusive, letting the words lead. Roboto Mono handles the occasional inline command or footnote reference — a plain, widely recognized mono that reads as a quiet aside against Playfair's expressive display and DM Sans's soft body, without demanding a whole developer aesthetic.

Copy the CSS

CSS — all three roles
:root {
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', '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: Playfair Display · DM Sans · Roboto Mono

Choosing type for this? Fonts for blogs →