Typography Sizes for Websites: The Complete 2026 Size Guide for Every Element

Typography is the one design decision that every visitor notices before they read a single word. If your font sizes are wrong, the content feels cramped, the hierarchy is unclear, and the page looks amateur. If they are right, everything reads effortlessly. This guide breaks down the exact typography sizes that work for websites in 2026, based on the carousel by @itsdesignare.

Post by @itsdesignare.

Typography size guide for websites. Image: @itsdesignare via Instagram.

The body text baseline: 16px minimum

Body text is the foundation. Get this wrong and nothing else matters. The minimum readable size for body text on the web is 16px. That is not a suggestion, it is the default that every browser ships with, and it is the size that assistive technologies expect.

Body text: 16px minimum, 18px for long-form reading. Image: @itsdesignare.

For text-heavy pages like blog posts or articles, bump it to 18px. The extra 2 pixels reduce eye strain significantly on longer reads. If your design calls for smaller text in a specific context (like a caption or a data table), never go below 14px, and always pair it with increased line height.

H1: The page title

Your H1 is the first thing a visitor scans. It needs to be large enough to establish the page's purpose at a glance. The recommended range is 32px to 48px for desktop, with 40px being the sweet spot for most layouts.

H1: 32-48px, bold weight. Image: @itsdesignare.

Keep H1 at a bold weight. A semibold or regular H1 looks weak and fails to anchor the page. Use one H1 per page for both design and SEO reasons.

H2: Section headers

H2 headers break the page into scannable sections. They should be clearly larger than your body text but noticeably smaller than your H1. The range is 24px to 28px, with 26px being a common choice.

H2: 24-28px, semibold. Image: @itsdesignare.

Use semibold weight for H2s. They need to stand out from body text without competing with the H1. The jump from body (16px) to H2 (26px) should be obvious: roughly 1.6x the body size.

H3: Subsection headers

H3 headers sit within H2 sections and organize content at the detail level. They should be around 20px to 22px, just slightly larger than body text.

H3: 20-22px, medium or semibold. Image: @itsdesignare.

Medium weight works well for H3s. They need to be distinguishable from body text but should not shout. If your H3 is too close in size to your body text, it will not function as a header at all.

H4 and smaller: Inline headers

H4 through H6 are for inline headers and minor labels. Keep them at 16px to 18px, the same size as body text, but use weight (semibold or bold) to differentiate them. Size alone cannot create enough contrast at this level.

H4-H6: same size as body, differentiated by weight. Image: @itsdesignare.

Line height: The spacing between lines

Line height (also called leading) is just as important as font size. The general rule is 1.5 to 1.6 times the font size for body text, and 1.2 to 1.3 for headings.

Line height: 1.5 for body, 1.2 for headings. Image: @itsdesignare.

For 16px body text, that means a line height of 24px (1.5 x 16). For a 40px H1, a line height of 48px (1.2 x 40). These are not arbitrary numbers: they are the values that produce comfortable reading across different screen sizes.

Letter spacing: Tight for large, loose for small

Letter spacing (tracking) follows a simple rule: large text gets tighter spacing, small text gets slightly looser spacing. For headings, use -0.02em to -0.03em. For body text, keep it at 0 (the font's default). For uppercase labels and small caps, add +0.05em to +0.1em.

Letter spacing: tight for headlines, neutral for body, loose for caps. Image: @itsdesignare.

Mobile typography: Scale down intelligently

On mobile, your 40px H1 needs to come down, but not to 20px. The minimum readable size on mobile is still 16px for body text. Scale headings proportionally: H1 to 28-32px, H2 to 22-24px, H3 to 18-20px.

Mobile sizes: scale down but never below 16px for body. Image: @itsdesignare.

Use CSS clamp() for responsive type that scales smoothly between mobile and desktop without media query jumps:

h1 { font-size: clamp(28px, 5vw, 40px); }
h2 { font-size: clamp(22px, 4vw, 26px); }
body { font-size: clamp(16px, 2vw, 18px); }

The complete size reference

Full size reference: every element at a glance. Image: @itsdesignare.

| Element | Desktop | Mobile | Weight | Line Height | | - | - | - | - | - | | H1 | 32-48px | 28-32px | Bold | 1.2 | | H2 | 24-28px | 22-24px | Semibold | 1.3 | | H3 | 20-22px | 18-20px | Medium | 1.4 | | Body | 16-18px | 16px | Regular | 1.5-1.6 | | Small/Caption | 14px | 14px | Regular | 1.5 | | Button | 15-16px | 16px | Medium/Semibold | 1.2 | | Label (uppercase) | 12-14px | 12-14px | Medium | 1.4 |

Three rules that override everything

1. Consistency beats creativity. Pick a type scale and stick to it across every page. A consistent 1.25x or 1.5x ratio between heading levels creates a rhythm that users feel even if they cannot articulate it.
2. Test on real devices. Sizes that look perfect in Figma at 100% zoom can look different on a 13-inch laptop screen or a budget Android phone. Always check on actual hardware.
3. Readability is not optional. If a user has to pinch-zoom to read your body text, the size is wrong. No design justification overrides this.

---

Original carousel by @itsdesignare on Instagram.

Want to build a website with typography this clean without writing code? Try Base44 and start from a design prompt.