Font pairing
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.
- 13 well-known fontsPreviewed with free Google Fonts
- See the pairOn a poster, an app screen and a logo
- Code to pasteHTML link, CSS and Tailwind v4
- Where it came fromHistory and who uses it, sourced
Heading font
Baskerville with Libre Franklin
Preview uses Libre Baskerville, the closest free match.
Some roads only go one way.
The Long Way Home
Two brothers, one borrowed car and a thousand miles of coast between them and the funeral. In cinemas this spring.
Body font
Pairings for Libre Baskerville, and why they work.
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.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Libre+Franklin:wght@400;700&display=swap">h1, h2, h3 {
font-family: 'Libre Baskerville', serif;
font-weight: 700;
}
body {
font-family: 'Libre Franklin', sans-serif;
}@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Libre+Franklin:wght@400;700&display=swap");
@import "tailwindcss";
@theme {
--font-heading: 'Libre Baskerville', serif;
--font-body: 'Libre Franklin', sans-serif;
}
/* Then use the font-heading and font-body classes. */About Baskerville
A Birmingham printer’s sharper, lighter serif from the 1750s.
History
- John Baskerville (1706 to 1775) designed it in Birmingham, England, in 1757.[1]
- He became printer to Cambridge University in 1758 and printed his folio Bible there in 1763.[1]
- Libre Baskerville, by Pablo Impallari, is tuned for screens with a taller x-height and lower contrast.[1]
Who uses it
- The Government of Canada "Canada" wordmark, in a modified form[1]
- Documents from the University of Birmingham[1]
- Northeastern University and the ABRSM, in a modified form[1]
Sources
Baskerville on its own pageAll fonts
Trajan
Roman inscription capitals, and the movie poster font.
Helvetica
The Swiss sans that ended up on subway signs and airline logos.
Arial
Drawn to the same widths as Helvetica, shipped with Windows.
Futura
The 1927 geometric sans of circles and straight lines.
Gotham
Wide geometric capitals taken from New York building signs.
Impact
A 1965 Sheffield display face that became the meme font.
Garamond
Sixteenth century Paris type, revived many times since.
Times New Roman
Made for a London newspaper in 1932, then shipped with Windows.
Didot
High contrast French type, and the look of fashion magazines.
Baskerville
A Birmingham printer’s sharper, lighter serif from the 1750s.
Comic Sans
Drawn in 1994 for the speech bubbles in Microsoft Bob.
Courier
An IBM typewriter face that screenplays never gave up.
Roboto
Google's Android system font since 2011.