Portfolio font pairing

Choose a font pair that supports the work.

Pick the tone, try the type with your own words, and leave with CSS you can actually use.

Twenty curated Google Font combinations. Preview the exact weights before you add anything to your site.

Step 1

What should the portfolio feel like?

Choose the direction that fits the work, not the one that looks most fashionable.

Quiet and clearLet the work lead.Direct and confidentMake a stronger entrance.Warm and expressiveShow more personality.Crafted and editorialPut the story forward.Systematic and preciseSignal structure and rigor.

Why this direction: Use restrained type when the projects already carry plenty of visual weight.

Step 2

Compare four useful options

Loading type previews…

The safe betHeadingInter + InterSoft and modernHeadingDM Sans + InterGeometric and cleanHeadingOutfit + Source Sans 3ContemporaryHeadingPlus Jakarta Sans + Inter

Step 3

Try it on portfolio content

Inter + Inter

Sarah Chen, product designer

I design systems that scale and experiences people remember. Currently leading design for financial tools.

Your heading

Your supporting copy

Your pick

Inter + Inter

The safe bet

One family with a clear weight change keeps attention on the work. It is familiar, readable, and difficult to misuse.

Heading: Inter 600
Body: Inter 400

Ready to use

Copy the CSS

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

/* Headings */
h1, h2, h3 {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
}

/* Body text */
body, p {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

The pair works. Does the page?

Upload the page for a free First Read. We will check whether the type supports the hierarchy, content, and work around it.

Check this page's typography