Inria Serif and Inria Sans Font Pairing
Set in Inria Serif 700 and Inria Sans 400
@import url('https://fonts.googleapis.com/css2?family=Inria+Serif:wght@700&family=Inria+Sans:wght@400;700&display=swap');
body {
font-family: 'Inria Sans', system-ui, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Inria Serif', Georgia, serif;
font-weight: 700;
}Inria Serif and Inria Sans are a matched pairing that few sites use, even though it was drawn as one family. The serif sets the headings at weight 700, and the sans carries the body. It feels contemporary and thoughtful, which suits research groups, technology companies, universities and resumes.
Inria Serif & Inria Sans
Headings 700, body text 400
ABCDEFGHIJKLM
abcdefghijklm
0123456789 &?!
Body text has to stay comfortable from the first line to the last.
Why Inria Serif and Inria Sans Work Together
Inria Sans and Inria Serif were created for Inria, a national institute dedicated to digital research, which needed type showing its values at the crossroads of humanity, technology, excellence and creativity. Grégori Vincens and Jérémie Hornus of Black[Foundry] answered with a humanist, unapologetically contemporary sans and a more rational serif. Both come in three weights with matching italics.
Matched pairs can feel safe, but this one has more edge than most. The sans carries the humanist warmth and the serif is the more rational of the two, which reverses the usual roles. Because they were designed together, proportions and rhythm still line up. The result is a page with a clear point of view, and one that readers are unlikely to have seen elsewhere.
Where Inria Serif and Inria Sans Work Best
Research groups and universities suit this pair, since it was made for that world. A lab, journal or think tank gets a credible page that does not look like every other academic site. Technology companies can use it for reports and blogs, and it works well on resumes, where the three-weight range is more than enough and the rarity helps a document stand out.
Weights and Sizes to Use
Each family offers 300, 400 and 700 with italics, so the choices are simple. Set Inria Serif at 700 for headings and Inria Sans at 400 for body text, with 700 for bold. Body text works well at 17 to 18px with a line height near 1.6. Use 300 sparingly, and only at large sizes, as light text fades quickly on screens.
Things to Watch
There is no medium or semibold weight, so the step from regular to bold is a large one. Build your hierarchy with size and spacing as well as weight. The fonts are also less widely tested than the big families, so check any special characters your site needs, such as currency signs and accented letters, before you commit.
Similar Pairings
Pairs with a similar modern feel, each with its own page.
Funnel Display & Funnel Sans
Contrast does the work. When the heading and the body clearly differ, the page tells readers where to look first.
Inter & Inter
The best pairings go unnoticed. Readers remember the story, not the fonts, and that is exactly the point.
Montserrat & Merriweather
Good type disappears into the reading. The heading sets the tone, and the body font carries the story to the last line.