Loading the tool…
Font pairing + modular type scale
The thin/thick contrast in Playfair reads as expensive, and collapses at small sizes. Keep it above 32px and let the sans carry everything else.
The size body text renders at. Every other size on the page is derived from this one by the scale ratio below.
Stroke thickness for headings. Heavier reads as louder; going above 700 on a large display size usually looks worse, not stronger.
Space between wrapped heading lines, as a multiple of the size. Headings are large, so they want less than body text — 1.1 to 1.2 rather than 1.5.
Tightens or opens the gaps between letters. Large type looks loose at default tracking, which is why display headings take a small negative value.
Stroke thickness for body copy. 400 is normal; 300 gets fragile on low-density screens and in dark mode.
Space between lines of body text, as a multiple of the size. This is the single biggest lever on how readable a paragraph is — 1.5 to 1.7 for long text.
Letter spacing for body copy. Usually leave it at 0; small text is the only body case that benefits from opening up.
Gap between paragraphs, in ems. It needs to beat the line height clearly, or paragraph breaks stop registering as breaks.
:root {
--font-heading: 'Playfair Display', serif;
--font-body: 'Source Sans 3', sans-serif;
--text-base: 16px;
/* Type scale (ratio 1.25) */
--text-xs: 10.24px; /* 0.64rem */
--text-sm: 12.8px; /* 0.8rem */
--text-base: 16px; /* 1rem */
--text-lg: 20px; /* 1.25rem */
--text-xl: 25px; /* 1.563rem */
--text-2xl: 31.25px; /* 1.953rem */
--text-3xl: 39.06px; /* 2.441rem */
--leading-heading: 1.15;
--leading-body: 1.6;
--tracking-heading: -0.02em;
--tracking-body: 0em;
--spacing-paragraph: 1.4em;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
line-height: var(--leading-heading);
letter-spacing: var(--tracking-heading);
}
body, p, li, blockquote {
font-family: var(--font-body);
font-weight: 400;
line-height: var(--leading-body);
letter-spacing: var(--tracking-body);
}
p + p { margin-top: var(--spacing-paragraph); }// app/layout.tsx
import { Playfair_Display, Source_Sans_3 } from 'next/font/google'
const heading = Playfair_Display({
subsets: ['latin'],
weight: ['700', '900'],
variable: '--font-heading',
})
const body = Source_Sans_3({
subsets: ['latin'],
weight: ['400', '600'],
variable: '--font-body',
})
// <html className={`${heading.variable} ${body.variable}`}>Keep this pairing. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.
Hoverlab is a living library of pure-CSS effects with live demos and copy-ready code. Buttons, loaders, cards, text effects, backgrounds and more — all crafted to be production-ready. Browse, customize, and copy in seconds.
Paragraph spacing demonstrates the gap between consecutive paragraphs. Adjust the slider to see how readability changes with more or less breathing room between blocks of text.
Designed for designers, by designers. Built with zero dependencies.
Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.
npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json
Ten scales, each a pairing and a ratio that belong together — a 1.125 product scale where hierarchy comes from weight, a 1.618 long-read scale where the body has to breathe more than the headings.
Playfair + Source Sans, Major Third
The default. A serif display over a workhorse sans, at the ratio most editorial sites land on.
Inter, Minor Third
One family, 1.2. The tightest scale that still separates six levels — a product UI, not a landing page.
Fraunces + Inter, Perfect Fourth
1.333 on an 18px base. Big jumps, short pages, loud headings.
Merriweather + Inter, Golden Ratio
1.618 with a 1.75 body leading — a long-read setting, where the body has to breathe more than the headings.
Space Grotesk + IBM Plex, Major Second
1.125 — barely a scale. For dense technical pages where hierarchy comes from weight, not size.
DM Serif + DM Sans, Perfect Fifth
1.5 with tight heading tracking. A marketing scale: three sizes that matter and three that never appear.
Poppins + Roboto, Major Third
Geometric headings on a neutral body, loosened line heights. Reads as approachable rather than serious.
JetBrains Mono + Inter, Minor Third
Monospace headings over a sans body — a documentation scale, at a 15px base.
Cormorant + Mulish, Golden Ratio
A high-contrast display serif at 1.618 with positive body tracking. The fashion-editorial setting.
Lora + Work Sans, Augmented Fourth
1.414 on a 17px base — the awkward ratio, and the one that gives six genuinely distinct steps.
Every one of these is just the address bar. Change anything in the tool above and the URL changes with it — copy it, paste it into a ticket, or commit it in a review, and it opens for anyone with these exact settings. No account, and nothing to save first.