Loading…
Loading…
Try curated Google Fonts pairings (or any two families) on real headings and paragraphs, then copy the embed code and CSS.
Also covers: Google Fonts pairing · Font combination tool
The preview uses fallback fonts until you load the real ones from Google Fonts.
Loading them sends a request (including your IP address) to Google. Nothing else on this site uses Google Fonts.
Good typography disappears. The heading sets the tone, the body text does the work: comfortable size, generous line height, lines of 45–75 characters. Pair two families that differ in one clear way — serif and sans, or heavy and light — and share proportions such as x-height.
Bold body text and italic body text (if the family has an italic, otherwise the browser slants it).
Editorial
Playfair Display + Source Sans 3
High-contrast Didone headlines over a calm, open sans: the classic magazine combination.
<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=Playfair+Display:wght@700&family=Source+Sans+3:wght@400;600;700&display=swap">body { font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; font-weight: 400; line-height: 1.6;} h1, h2, h3 { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 700; line-height: 1.15;}For privacy and speed you can also self-host: download the families from fonts.google.com (they're under the SIL Open Font License) and serve them with @font-face.
From curated pairs, or type any two Google Fonts families.
Load the real fonts (optional) and see headings and paragraphs, light or dark.
The <link> tags and CSS.
Fetching from Google Fonts shares your IP address with Google, so the tool waits for you to choose to load them.
One clear contrast (serif vs sans, heavy vs light) plus shared proportions such as x-height, and a body face that stays readable at small sizes.
Yes — Google Fonts families are under the SIL Open Font License. Download them from fonts.google.com and serve them with @font-face.
Colour
Pick any colour with a saturation/brightness square, from anywhere on your screen (EyeDropper), or from a photo — and get it in HEX, RGB, HSL, OKLCH and more.
Colour
Convert any colour between HEX, RGB, HSL, HSV, HWB, CMYK, Lab, LCH, OKLab and OKLCH, with the nearest CSS colour name.
Palettes
Build a palette from one colour — a 50–950 shade scale or complementary, analogous, triadic and other harmonies, worked out in OKLCH — and export CSS, Tailwind, SCSS or JSON.
Colour
Pull the main colours out of a photo or logo, with how much of the image each covers, and export them as CSS variables or JSON.
Accessibility
Check text and background colours against WCAG 2.2 AA and AAA, see the exact contrast ratio, and get the closest colour that passes.
CSS
Design linear, radial and conic CSS gradients with any number of colour stops and vivid OKLCH blending, and copy the CSS.