Twelve proven heading + body combinations, shown live at real sizes, pick by the feel your project needs.
Editorial / luxury. A high-contrast serif with drama for headlines, and a calm humanist sans doing the reading. The magazine pairing.
Headings: Playfair Display · Body: Source Sans 3
Modern editorial. Geometric, confident headings over a sturdy book serif, blogs and company sites that read like publications.
Headings: Montserrat · Body: Merriweather
Friendly tech. Round geometric headings with the web's most neutral body face. Safe, warm, startup-appropriate.
Headings: Poppins · Body: Open Sans
Bold and clean. Condensed uppercase headlines that shout politely, balanced by an even-tempered text face.
Headings: Oswald · Body: Lato
Contemporary professional. A soft literary serif for display, the interface-standard sans for everything functional. Reports, portfolios, SaaS marketing.
Headings: Lora · Body: Inter
Matched family. Designed as a pair: the serif's charm and the sans's clarity share one skeleton. The lowest-risk choice here.
Headings: DM Serif Display · Body: DM Sans
Classic American. Bookish Baskerville headlines with Franklin Gothic's descendant underneath, newspapers and institutions.
Headings: Libre Baskerville · Body: Libre Franklin
Characterful modern. Fraunces brings soft, wonky personality; Work Sans keeps paragraphs disciplined. Brands with a wink.
Headings: Fraunces · Body: Work Sans
Technical character. Slightly futuristic display type over an engineered text face. Developer tools and hardware brands.
Headings: Space Grotesk · Body: IBM Plex Sans
Elegant minimal. Feather-light fashion serif with a Futura-like geometric sans. Weddings, boutiques, portfolios.
Headings: Cormorant Garamond · Body: Jost
One-family system. Archivo's weights and widths do everything, tight bold headlines, regular text. The single-download answer.
Headings: Archivo · Body: Archivo
Soft corporate. Elegant thin-to-bold headings with a rounded, approachable body face. Health, education, community projects.
Headings: Raleway · Body: Nunito Sans
Pairing type is the highest-leverage design decision most projects make: two well-matched families carry a whole site's typography, and one bad pairing undermines every other choice. The working rules behind this directory's twelve picks: contrast with harmony (a serif display with a sans body, or two sanses from different skeletons, never two similar-but-not-identical faces, which look like a mistake), a body face with a real text cut (the test sentence in each card is set at reading size on purpose), and matched temperament (both faces from the same emotional register, editorial, technical, friendly, elegant).
All twelve are Google Fonts: free, open-licensed, and loadable with one stylesheet link. Practical loading advice that ships with the directory: load only the weights you use (400/700 covers most sites), prefer variable fonts where offered, and always keep a system fallback stack (Georgia behind serifs, system-ui behind sanses) so text renders instantly in a respectable face while the webfont arrives. Previews on this page load from Google Fonts, which is why this directory, unlike most tools here, needs the network for its full effect.
How many fonts should a site use? Two families is the sweet spot; one is fine (see the Archivo system card); three is a smell. Weights and sizes create hierarchy, not more families.
Serif or sans for body text? Both read well at proper sizes today. Serifs suit long-form and editorial; sanses suit interfaces and short-form. The pairing's mood matters more than the category.
Can I use these commercially? Yes, Google Fonts are distributed under open licenses (mostly OFL) permitting commercial use, including in logos and print. Keep the license file with big projects as a courtesy to future maintainers.