Free Type Scale Generator: Font Sizes for H1–H6

Pick a base size and a ratio to get a full set of font sizes, with an optional fluid mode. Copy the CSS, Tailwind or SCSS.

  • 100% free
  • H1 to H6
  • Fluid clamp() sizes
  • CSS & Tailwind
1
Choose your scaleBase size and ratio.
Body text size.
px
Major third
Fluid sizesScale smoothly between a small and a large screen.
2
Preview your sizesReal text at your scale.
Font
Body, and headings.
Show sizes in
3
Copy the codeChoose a format.

☕ Support ProFigma

Did this tool save you time? Buy me a coffee.

Hi, I'm Mahesh 👋 I build every ProFigma tool myself and keep them free for designers and developers. If one helped you today, a small coffee keeps new tools and features coming.

  • Keeps every tool free
  • Funds new tools & features
  • Supports an indie creator
Buy Me a CoffeeSecure checkout via Gumroad · Any amount
How it works

Build a type scale in three steps

  1. Pick a base size and ratioStart with 16px and a ratio such as 1.25 (major third). Bigger ratios give bigger jumps between headings.
  2. Check the previewSee H1 to H6 and body text at your sizes. Switch on fluid sizing to scale between phone and desktop.
  3. Copy the codeCopy CSS variables, heading styles, a Tailwind config or SCSS.
Why this one

A type scale you can see and copy

Live preview

See real headings and body text at your exact sizes, in the font you choose.

Fluid or fixed

Fixed rem sizes, or smooth clamp() values that scale with the screen.

Common ratios built in

From minor second to golden ratio, or type your own.

Copy-ready code

CSS variables, heading rules, Tailwind or SCSS in one click.

Tips

Tips for better results

  • Start with 16px. It is the browser default and the most readable body size on most screens.
  • Use a smaller ratio on phones. Fluid mode lets you pick a calm ratio for small screens and a bolder one for desktops.
  • Don't use every step. Most designs need 5 or 6 sizes. Pick the ones you need and skip the rest.
  • Tighten large headings. Big text looks better with a line height near 1.1 and slightly tighter letter spacing.
FAQ

Type scale questions

What is a type scale?

A type scale is a set of font sizes that grow by a fixed ratio. Using one keeps headings and text in proportion, so your design feels consistent.

Which ratio should I choose?

1.2 (minor third) is calm and good for apps and dashboards. 1.25 (major third) suits most websites. 1.333 (perfect fourth) and up give bold, editorial headings. On small screens use a smaller ratio.

How are the heading sizes calculated?

Each size is the one below it multiplied by the ratio. With a 16px base and ratio 1.25, H6 is 16px, H5 is 20px, H4 is 25px, H3 is 31.25px, H2 is 39.06px and H1 is 48.83px.

What is fluid typography?

Instead of fixed sizes, fluid type uses CSS clamp() so text grows smoothly between a small and a large screen. The tool gives each size a minimum and a maximum, with no media queries.

px or rem for font sizes?

rem is better. It follows the user's browser font setting. The tool outputs rem by default, with px shown for reference.

What line height should I use?

About 1.5 for body text and 1.1 to 1.3 for large headings. The tool lets you set one for body and one for headings.

Can I use the scale in Tailwind CSS?

Yes. Copy the Tailwind export into your fontSize config, or use the CSS variables with arbitrary values.

Is anything uploaded?

No. Everything runs in your browser.

Read the guideType Scale for Web Design: Font Sizes for H1 to H6Which ratio to choose, and how to make the sizes fluid with clamp().Read more →

QR Code Generator

Custom QR codes for links, Wi-Fi, contacts and WhatsApp, with your logo and colours.

Case Converter

Switch text between 15+ cases in one click.

Image Compressor

Shrink photos up to 90% right in your browser.

Contrast Checker

WCAG 2.2 AA and AAA checks for any colour pair.

UI Grid Maker

Design Figma and CSS grids with a live calculator.

PNG to JPG Converter

Bulk convert images in three steps.