Pick a heading font. Get 3-5 body pairings with reasoning, live preview, and copy-ready CSS.
Body copy sets the rhythm of a page. It should read cleanly at 16–18px, step out of the way of the heading, and still feel like part of the same family of voices. When the pairing works, you stop noticing the type and start noticing the words.
Smaller supporting copy — captions, metadata, footnotes — should keep the same voice, just quieter.
Body paragraph at 17px with 1.6 line-height. This is where the bulk of reading happens; make sure it sits comfortably below every heading level in the scale.
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
body {
font-family: "Inter", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display", serif;
}/* Self-host — download from fonts.google.com/specimen/Playfair-Display and fonts.google.com/specimen/Inter */
@font-face {
font-family: "Playfair Display";
src: url("/fonts/playfair-display.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("/fonts/inter.woff2") format("woff2");
font-display: swap;
}
body {
font-family: "Inter", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display", serif;
}Upload an image and extract 3-16 dominant colors via k-means. Export as CSS variables, Tailwind config, or JSON. Runs on canvas, client-side.
WCAG AA / AAA contrast ratio for normal text, large text, and UI components. Live sample preview and a lightness slider to find the nearest passing shade.
Pick a heading font. Get 3-5 body pairings with reasoning, live preview, and copy-ready CSS.
Body copy sets the rhythm of a page. It should read cleanly at 16–18px, step out of the way of the heading, and still feel like part of the same family of voices. When the pairing works, you stop noticing the type and start noticing the words.
Smaller supporting copy — captions, metadata, footnotes — should keep the same voice, just quieter.
Body paragraph at 17px with 1.6 line-height. This is where the bulk of reading happens; make sure it sits comfortably below every heading level in the scale.
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
body {
font-family: "Inter", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display", serif;
}/* Self-host — download from fonts.google.com/specimen/Playfair-Display and fonts.google.com/specimen/Inter */
@font-face {
font-family: "Playfair Display";
src: url("/fonts/playfair-display.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("/fonts/inter.woff2") format("woff2");
font-display: swap;
}
body {
font-family: "Inter", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display", serif;
}Upload an image and extract 3-16 dominant colors via k-means. Export as CSS variables, Tailwind config, or JSON. Runs on canvas, client-side.
WCAG AA / AAA contrast ratio for normal text, large text, and UI components. Live sample preview and a lightness slider to find the nearest passing shade.