# Font pairing > Pick a heading font, get body font pairings and preview them on a poster, an app screen and a logo. Famous fonts like Trajan, Helvetica and Impact come with their history and who uses them, and a free Google Fonts match. Web page: https://davidewins.com/fonts Pick a heading font, pick a body font that goes with it, and see the pair on a poster, an app screen and a logo. Every preview uses a free Google Font, so you can use what you see. ## How to use it - **Heading font**: pick one of the fonts below. - **Body font**: pick one of its pairings, each with a note on why it works. - **Use it**: Both fonts are free under the licences on Google Fonts. Add the link to your page head, then set the families in CSS or in a Tailwind v4 theme. The page gives the HTML, CSS and Tailwind v4 code for the pair you picked. ## All fonts ### [Trajan](https://davidewins.com/fonts/trajan) Roman inscription capitals, and the movie poster font. Preview uses Cinzel, the closest free match. Body fonts that go with Cinzel: - [Lato](https://davidewins.com/fonts?heading=trajan&body=lato): Open, even sans shapes keep long text calm under ornate capitals. - [EB Garamond](https://davidewins.com/fonts?heading=trajan&body=eb-garamond): A classical serif with the same Roman roots, quiet enough at text size not to compete. - [Source Sans 3](https://davidewins.com/fonts?heading=trajan&body=source-sans-3): Narrow and plain, so the wide inscriptional caps carry all the character. - [Lora](https://davidewins.com/fonts?heading=trajan&body=lora): Soft, brushy serifs give warmth that the formal caps lack. ### [Helvetica](https://davidewins.com/fonts/helvetica) The Swiss sans that ended up on subway signs and airline logos. Preview uses Inter, the closest free match. Body fonts that go with Inter: - [Source Serif 4](https://davidewins.com/fonts?heading=helvetica&body=source-serif-4): A serif body against a grotesque heading gives clear contrast in structure. - [Inter](https://davidewins.com/fonts?heading=helvetica&body=inter): One family throughout, with weight and size doing the work. - [Merriweather](https://davidewins.com/fonts?heading=helvetica&body=merriweather): Sturdy, large x-height serif that stays readable at small sizes. - [IBM Plex Mono](https://davidewins.com/fonts?heading=helvetica&body=ibm-plex-mono): Monospaced text for a technical, spec-sheet feel. ### [Arial](https://davidewins.com/fonts/arial) Drawn to the same widths as Helvetica, shipped with Windows. Preview uses Arimo, the closest free match. Body fonts that go with Arimo: - [PT Serif](https://davidewins.com/fonts?heading=arial&body=pt-serif): A sturdy serif body with enough contrast to separate it from the plain heading. - [Lora](https://davidewins.com/fonts?heading=arial&body=lora): Curvier serif shapes make up for how neutral the heading is. - [Open Sans](https://davidewins.com/fonts?heading=arial&body=open-sans): Humanist sans with open apertures, easier to read in long passages than a grotesque. ### [Futura](https://davidewins.com/fonts/futura) The 1927 geometric sans of circles and straight lines. Preview uses Jost, the closest free match. Body fonts that go with Jost: - [Crimson Pro](https://davidewins.com/fonts?heading=futura&body=crimson-pro): An old-style serif body against perfect geometry is a classic contrast. - [Lora](https://davidewins.com/fonts?heading=futura&body=lora): Calligraphic serif shapes soften the strict circles of the heading. - [Karla](https://davidewins.com/fonts?heading=futura&body=karla): A grotesque body with a larger x-height, easier at small sizes than a geometric. ### [Gotham](https://davidewins.com/fonts/gotham) Wide geometric capitals taken from New York building signs. Preview uses Montserrat, the closest free match. Body fonts that go with Montserrat: - [Merriweather](https://davidewins.com/fonts?heading=gotham&body=merriweather): A sturdy serif body balances the heavy, wide capitals. - [Source Serif 4](https://davidewins.com/fonts?heading=gotham&body=source-serif-4): Lighter serif with a modern feel, good for long reads under bold headings. - [Open Sans](https://davidewins.com/fonts?heading=gotham&body=open-sans): Humanist sans, narrower than the heading, so the two do not blur together. ### [Impact](https://davidewins.com/fonts/impact) A 1965 Sheffield display face that became the meme font. Preview uses Anton, the closest free match. Body fonts that go with Anton: - [Roboto](https://davidewins.com/fonts?heading=impact&body=roboto): A neutral grotesque that stays out of the way of a loud heading. - [Work Sans](https://davidewins.com/fonts?heading=impact&body=work-sans): Wider letters than the heading, which keeps body text from feeling cramped. - [Source Serif 4](https://davidewins.com/fonts?heading=impact&body=source-serif-4): A serif body makes a heavy condensed heading read like a newspaper. ### [Garamond](https://davidewins.com/fonts/garamond) Sixteenth century Paris type, revived many times since. Preview uses EB Garamond, the closest free match. Body fonts that go with EB Garamond: - [EB Garamond](https://davidewins.com/fonts?heading=garamond&body=eb-garamond): The way books do it: one serif family, with size and italics for hierarchy. - [Source Sans 3](https://davidewins.com/fonts?heading=garamond&body=source-sans-3): A humanist sans with similar proportions, for interfaces where serif body text feels slow. - [Work Sans](https://davidewins.com/fonts?heading=garamond&body=work-sans): A modern grotesque body that makes the old-style heading feel deliberate. ### [Times New Roman](https://davidewins.com/fonts/times-new-roman) Made for a London newspaper in 1932, then shipped with Windows. Preview uses Tinos, the closest free match. Body fonts that go with Tinos: - [Inter](https://davidewins.com/fonts?heading=times-new-roman&body=inter): A screen sans body makes a newspaper serif heading look current. - [Source Sans 3](https://davidewins.com/fonts?heading=times-new-roman&body=source-sans-3): Humanist sans with gentle contrast, so it sits well next to a transitional serif. - [Libre Franklin](https://davidewins.com/fonts?heading=times-new-roman&body=libre-franklin): Franklin Gothic shapes, the classic newspaper sans to go with a newspaper serif. ### [Didot](https://davidewins.com/fonts/didot) High contrast French type, and the look of fashion magazines. Preview uses GFS Didot, the closest free match. Body fonts that go with GFS Didot: - [Lato](https://davidewins.com/fonts?heading=didot&body=lato): A low-contrast sans lets the hairlines of the heading be the only drama. - [Karla](https://davidewins.com/fonts?heading=didot&body=karla): Small and plain, the way magazines set captions under big Didone titles. - [Crimson Pro](https://davidewins.com/fonts?heading=didot&body=crimson-pro): An old-style serif with gentler contrast that holds up at text sizes where Didot breaks down. ### [Baskerville](https://davidewins.com/fonts/baskerville) A Birmingham printer’s sharper, lighter serif from the 1750s. Preview uses Libre Baskerville, the closest free match. Body fonts that go with Libre Baskerville: - [Source Sans 3](https://davidewins.com/fonts?heading=baskerville&body=source-sans-3): A light humanist sans that matches the open, crisp feel of the heading. - [Lato](https://davidewins.com/fonts?heading=baskerville&body=lato): Round, friendly sans that softens a formal serif. - [Libre Franklin](https://davidewins.com/fonts?heading=baskerville&body=libre-franklin): A sturdier grotesque for when the page needs more weight than the heading gives it. ### [Comic Sans](https://davidewins.com/fonts/comic-sans) Drawn in 1994 for the speech bubbles in Microsoft Bob. Preview uses Comic Neue, the closest free match. Body fonts that go with Comic Neue: - [DM Sans](https://davidewins.com/fonts?heading=comic-sans&body=dm-sans): A clean geometric body keeps the joke in the heading only. - [Karla](https://davidewins.com/fonts?heading=comic-sans&body=karla): Slightly quirky grotesque that matches the informal tone without more handwriting. - [Lato](https://davidewins.com/fonts?heading=comic-sans&body=lato): Rounded and friendly, so it agrees with the heading instead of fighting it. ### [Courier](https://davidewins.com/fonts/courier) An IBM typewriter face that screenplays never gave up. Preview uses Courier Prime, the closest free match. Body fonts that go with Courier Prime: - [Inter](https://davidewins.com/fonts?heading=courier&body=inter): A proportional sans body, with the typewriter face kept for headings and labels. - [Source Serif 4](https://davidewins.com/fonts?heading=courier&body=source-serif-4): A serif body gives a document or archive feel. - [IBM Plex Mono](https://davidewins.com/fonts?heading=courier&body=ibm-plex-mono): All monospace, for a terminal or notebook look. ### [Roboto](https://davidewins.com/fonts/roboto) Google's Android system font since 2011. Roboto is on Google Fonts, so the preview is the real thing. Body fonts that go with Roboto: - [Roboto](https://davidewins.com/fonts?heading=roboto&body=roboto): One family throughout, the way Android apps do it. - [Lora](https://davidewins.com/fonts?heading=roboto&body=lora): A warm serif body for editorial pages under a neutral heading. - [Merriweather](https://davidewins.com/fonts?heading=roboto&body=merriweather): Large x-height serif that holds up on small screens.