Open your website. Open the inspector. Look at how many distinct font sizes are in use. If you're a typical founder-built site, the count is somewhere between 8 and 14. Headlines at 36px, then 32px, then 28px, then 24px, plus subheads at 18px and 16px, body at 15px, captions at 13px, fine print at 11px, and one stray 17px somewhere you didn't notice.
This is the single biggest reason founder-built sites look amateur next to professionally-designed sites. The professional sites typically use four sizes. Not three (too restrictive), not seven (too many), four. Here's the system and how to apply it in 10 minutes.
The 4-size system
Every piece of text on your site falls into one of four categories. Each category gets exactly one font size.
Display (44-72px). The biggest text on the page. Hero headlines, section-level marquee text. Use this sparingly. Usually one to three uses per page. The exact size depends on viewport: 64px on desktop, 44px on mobile.
Heading (24-32px). Section headers within a page. The "H2" if you're thinking in HTML terms. Multiple uses per page is fine. Typically 32px on desktop, 24px on mobile.
Body (16-18px). The text you actually read. Paragraphs, list items, most card content. This is the most-used size on your site and the one you should optimize for readability. 16px is the modern web baseline; 18px works well for content-heavy sites.
Detail (12-14px). The smaller, supporting text. Captions, labels, metadata, fine print, button text. Smaller than body, but still readable.
Four sizes. That's the entire type scale. Everything else. H3, H4, subheads, sub-subheads. Should reuse one of these four sizes, just with weight or color variation to differentiate.
How to express hierarchy without adding sizes
The instinct when you need a "sub-heading" is to invent a new size between Heading and Body. Don't. Use one of the four sizes you already have, plus weight or color to signal hierarchy.
Examples that work:
- An H3 that's the same size as body text but in bold (and maybe a slightly different color). The bold weight signals it's a heading; the matching size keeps the hierarchy clean.
- A "section label" eyebrow that's Detail size in uppercase with letter-spacing. The uppercase + letter-spacing makes it feel like a heading despite being small.
- A "lead paragraph" that's Body size but heavier weight, signaling it's the opener of a section without needing a new size.
Weight, color, casing, letter-spacing. These are all hierarchy tools that don't add complexity to your type scale.
The specific sizes I use
If you want a starting scale to copy, this works for most brands:
- Display: 64px desktop / 44px mobile, weight 800, letter-spacing -0.03em
- Heading: 32px desktop / 24px mobile, weight 700, letter-spacing -0.02em
- Body: 17px on both, weight 400, letter-spacing 0, line-height 1.65
- Detail: 13px on both, weight 600 (helps small text stay legible), letter-spacing 0.05em
Adjust by feel for your typeface. Some typefaces want different specifics. A heavier display weight might need slightly looser tracking; a delicate serif body might need slightly more line-height. But the count stays at four.
The 10-minute application
If you're applying this to an existing site, here's the workflow:
Step 1 (2 min): Inspect your site. Note every font size currently in use. Write them down.
Step 2 (2 min): Pick which of your existing sizes is closest to each of the four buckets. The biggest goes to Display, the next-biggest to Heading, the most-common to Body, the smallest to Detail.
Step 3 (5 min): Update your CSS. Replace every font-size in your styles with one of the four. Things that were 28px or 30px become 32px. Things that were 14px or 15px become Body (17px). Things that were 11px or 12px become Detail (13px).
Step 4 (1 min): Look at your site. Anywhere it feels broken (probably because something that needed visual weight lost it when you reduced sizes), add weight or color instead of restoring the unique size.
You're done. The site will feel more cohesive almost immediately. Visitors won't be able to articulate what changed, but their brains will have an easier time scanning, which raises the perceived quality of everything else.
Why this works
Two reasons. First, fewer sizes means clearer hierarchy. When everything is at one of four levels, the reader can scan and know where they are. When there are nine subtly-different sizes, the brain spends mental energy parsing the structure instead of reading the content.
Second, the constraint forces better decisions. When you can't create a new size for every situation, you have to think about why the content needs to feel different and whether there's a better way (weight, color, position) to express it.
The four-size rule is one of those professional design conventions that's hidden in plain sight. Every site you visit that "just looks good" is doing this. Adopting it costs you 10 minutes. The payoff is years of polish.
Your brand kit, ready in 10 minutes.
Five quick taps. Free preview before you pay.
Start building free →