Roboto × Roboto Serif
Roboto Serif was drawn specifically to complement Roboto, so you get true sans/serif class contrast with guaranteed proportional harmony. Set Roboto as clean headings and Roboto Serif as a warm, highly readable body and...
How Roboto and Roboto Serif score across four checks — class contrast, role clarity, x-height harmony and mood affinity. Higher is better.
Roboto Serif was drawn specifically to complement Roboto, so you get true sans/serif class contrast with guaranteed proportional harmony. Set Roboto as clean headings and Roboto Serif as a warm, highly readable body and the hierarchy is obvious while the two never feel like strangers. It's the in-house way to get an editorial sans-heading / serif-body system.
Where it shines
Long-form content, blogs, editorial and documentation sites that want a serif reading experience without leaving the Roboto family.
Roboto Serif has many optical sizes and grades — pick one body configuration and stick to it, or the page colour gets inconsistent.
Add the fonts, then two rules — Roboto for headings, Roboto Serif for everything you read.
<link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&family=Roboto+Serif:wght@400;500&display=swap" rel="stylesheet">
h1, h2, h3 { font-family: "Roboto", sans-serif; font-weight: 700; letter-spacing: -0.01em; } body, p { font-family: "Roboto Serif", serif; font-weight: 400; line-height: 1.7; }
This is the safest pairing on the list because the two faces share a skeleton — Roboto Slab is Roboto with slab serifs added. The x-heights...
This is the classic 'personality heading, neutral body' pairing. Playfair Display brings dramatic thick-to-thin contrast and a traditional,...
Merriweather is a sturdy serif drawn for screen reading with a tall x-height that lines up with Roboto's, so a Roboto heading over a Merriwe...
Get the pairing notes, weekly.
One short email a week — a new pairing, a specimen, and a tip. No spam.