Roboto Slab + Open Sans

modernfriendlyclassic

Grumpy wizards make toxic brew

A standfirst set in Open Sans, one size up — where a pairing starts earning trust.

The five boxing wizards jump quickly over the lazy dog, mixing jugs of quiet vodka while the jury watches. Click anywhere in this preview and type your own text to try the pairing.

“Type is a beautiful group of letters, not a group of beautiful letters.”

— Matthew Carter

Fig. 1 — Roboto Slab over Open Sans, in the wild.

Roboto Slab 700 / Open Sans 400 — click any section and type your own copy.

Why it works

Roboto Slab's squared serifs give headlines a grounded, no-nonsense authority, and Open Sans — looser and more open than Roboto — keeps paragraphs friendlier than a pure Roboto system would. The two share a similar neutral, screen-first sensibility, so the pairing reads coherent rather than collaged. A long-running favourite for content marketing sites and blogs that want structure up top and easy reading below.

More about each face: Roboto Slab · Open Sans

Use this pairing

HTML — Google Fonts embed
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
CSS
h1, h2, h3 {
  font-family: 'Roboto Slab', 'Roboto', Georgia, serif;
  font-weight: 700;
}

body {
  font-family: 'Open Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 400;
}
Next.js — next/font
import { Roboto_Slab, Open_Sans } from "next/font/google";

const heading = Roboto_Slab({
  subsets: ["latin"],
  weight: "700",
  variable: "--font-heading",
});

const body = Open_Sans({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-body",
});
From usKeychord— keyboard shortcuts for every app

Related pairings