Typography Tool
Font Pairer
Discover beautiful font combinations with live preview. Browse curated heading + body pairings, customize sizes, and copy CSS or Google Fonts link tags instantly.
Live Preview
The quick brown fox jumps over the lazy dog
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line spacing, and letter spacing.
Generated Code
/* Heading: Space Grotesk */
h1, h2, h3 {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 1.2;
letter-spacing: 0em;
}
/* Body: Inter */
body, p {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
letter-spacing: 0em;
}Google Fonts <link>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=Inter:wght@400;wght@400;wght@700&display=swap" rel="stylesheet">Heading ControlsSpace Grotesk
48px
700
1.2
0em
Body ControlsInter
16px
400
1.7
0em
Font Pairings
Tech ForwardSpace Grotesk + Inter
modernEditorial ElegancePlayfair Display + Source Serif 4
classicClean & SharpOutfit + Work Sans
minimalFriendly VoiceFredoka + Nunito
playfulBold StatementArchivo Black + Roboto
boldSwiss PrecisionDM Sans + IBM Plex Sans
minimalLuxury BrandCormorant Garamond + Lato
classicStartup VibesPlus Jakarta Sans + Inter
modernFun & BubblyBaloo 2 + Quicksand
playfulImpact HeaderBebas Neue + Open Sans
boldGeometric DuoPoppins + Karla
modernHeritage SerifLibre Baskerville + Merriweather
classicWhisper SoftJost + Rubik
minimalRounded JoyComfortaa + Varela Round
playfulUltra HeavyOswald + Raleway
boldNeo GrotesqueSora + Outfit
modernOld WorldEB Garamond + Crimson Text
classicAiry MinimalManrope + Figtree
minimal