EB Garamond and Inter Font Pairing
Set in EB Garamond 600 and Inter 400
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@600&family=Inter:wght@400;700&display=swap');
body {
font-family: 'Inter', system-ui, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'EB Garamond', Georgia, serif;
font-weight: 600;
}EB Garamond at 600 paired with Inter for body text sets a classic Renaissance serif above one of the most screen-friendly sans serifs available. Headings feel literary and established, while Inter's tall x-height keeps paragraphs crisp on any device. Choose it for a resume that should look considered, a writer's or researcher's portfolio, or a blog with a bookish voice.
EB Garamond & Inter
Headings 600, body text 400
ABCDEFGHIJKLM
abcdefghijklm
0123456789 &?!
Body text has to stay comfortable from the first line to the last.
Why EB Garamond and Inter Work Together
EB Garamond is a community revival of Claude Garamont’s sixteenth-century humanist types, based on a specimen printed in 1592 known as the Berner specimen. It has the hallmarks of an old-style serif: diagonal stress, modest stroke contrast, a small x-height and graceful, slightly irregular curves. Even in a short heading it signals tradition and care.
Inter, led by Rasmus Andersson, was designed for computer screens, with a tall x-height to help readability in mixed-case and lowercase text. Next to Garamond it looks very neutral: even strokes, large open counters and clean, rational shapes. They differ in x-height, stroke contrast and age, and that strong contrast makes the hierarchy clear. EB Garamond adds personality in small doses; Inter does the reading work.
Where EB Garamond and Inter Work Best
On a one-page resume, set your name and section headings in EB Garamond and everything else in Inter; the page looks professional and slightly distinguished, and stays clear as a PDF or on paper. A writer, architect or researcher can use the same split on a portfolio, with Garamond project titles and Inter case notes. For a blog about books, history or ideas, the pair gives articles a thoughtful tone without losing on-screen clarity.
Weights and Sizes to Use
Use headings at 600. EB Garamond runs from 400 to 800, and its regular weight can look thin as a screen heading; 600 adds just enough body. Because its x-height is small, set headings a little larger than you would a sans serif, with a line height of 1.15 to 1.2. Set Inter at 400 for body and 700 for bold, at 16 or 17px with a line height of 1.6. Inter also has an optical size axis from 14 to 32, which subtly adjusts its shapes for small and large text in the variable version.
Things to Watch
The size gap between the fonts is the main trap. Inter’s tall x-height makes it look larger than Garamond at the same pixel size, so a small Garamond subheading can look weaker than the text below it. Keep a clear step in size between levels. Avoid Garamond for buttons, form labels or small interface text, and keep its italic for short phrases.
Similar Pairings
Pairs with a similar classic feel, each with its own page.
Inter & Tinos
Readers spend most of their time in body text, so it has to stay comfortable from the first paragraph to the tenth.
Piazzolla & Inter
Headlines get a second of attention. The body font has to hold it for minutes, which is why it deserves the most care.
Roboto Slab & Roboto
Contrast does the work. When the heading and the body clearly differ, the page tells readers where to look first.