Inter and Inter: A One-Font Pairing

Inter and Inter is the pairing this site uses: one family for both headings and body text. Headings are set at weight 690 with slightly tightened spacing and paragraphs at 400 with normal spacing, so a single font does two jobs. It suits business sites, online shops, portfolios and resumes that want a clean, consistent voice.

Why One Font Can Be Enough

Inter, designed by Rasmus Andersson, is a variable sans serif on Google Fonts with a weight axis that runs from 100 to 900 and an optical size axis from 14 to 32. That range is what makes a one-font pairing work. Instead of switching typefaces, you build contrast with weight, size and spacing: a heading at 690 and 40px looks firm and compact, while the same family at 400 and 18px reads as calm, open body text.

One family also removes the risk of two fonts quietly clashing. Letter widths, x-height and punctuation match everywhere, so headings, buttons, tables and captions feel like parts of one system. The trade-off is personality. A single neutral sans will never feel as editorial as a serif heading over a sans body, so this pairing works best where clarity matters more than character.

Where Inter and Inter Work Best

It is a natural choice for a software or services website, an online shop with many product names, prices and filters, documentation, a dashboard or a one-page resume. fontography.com uses it for its own pages because the fonts on show should stand out, and a quiet interface font leaves them room.

Weights and Sizes to Use

On this site, page titles are 40px at weight 690 with letter spacing of -0.02em and a line height of about 1.1, section headings are 28px at 690, and body text is 18px at 400 with a line height of 1.7 and normal letter spacing. On phones, titles drop to 28px and body text to 17px. Use 600 or 700 for bold words inside paragraphs and 500 for buttons and labels. Because Inter is a variable font, one file covers every weight on that list.

Things to Watch

All the contrast has to come from size and weight, so do not let them drift too close: a 20px heading at 600 over 18px body text at 400 looks like a mistake rather than a hierarchy. Tighten letter spacing only on large headings, since Inter is already spaced for reading at body sizes. If the page starts to feel generic, add character through colour, layout or imagery rather than reaching for a second font.