A worked example
A 16 px base with ratio 1.25 yields 20, 25, 31.25 and 39.0625 px.
Type scale
Generate heading sizes from a base size and ratio, and preview a page hierarchy.
YOUR LITTLE WORKBENCH
ON YOUR DEVICE ✦Type scale
Try a sample on your device’s installed fonts. Settings remain in this page only; export a JSON recipe before switching tools. No remote font requests.
Heading 1 · 48.828 px · 3.052 rem
A little space changes everything.
Heading 2 · 39.063 px · 2.441 rem
A little space changes everything.
Heading 3 · 31.25 px · 1.953 rem
A little space changes everything.
Heading 4 · 25 px · 1.563 rem
A little space changes everything.
Heading 5 · 20 px · 1.25 rem
A little space changes everything.
Body · 16 px · 1 rem
A little space changes everything.
Small · 12.8 px · 0.8 rem
A little space changes everything.
Font rendering depends on what is installed. ch is not an exact character count; exported rem headings assume your chosen root reference. Preview in the actual page before use.
THE METHOD / 01
A clear wayfrom start to finish.
Size at step n = base × ratio^n. Pixel and rem values use an explicitly entered root size.
Keep the assumptions clear
The generated hierarchy is a starting point, not a guarantee of readability on every screen or language.
A FEW USEFUL ANSWERS
Good to know.
Are my inputs uploaded?
No. Processing runs locally in your browser. The host still receives normal requests for website pages and assets.
Can I keep my result?
Use the download controls for the current tool or print from your browser. Seating plans, flashcards and document drafts autosave in this browser; see the privacy page.
Do I need an account?
No sign-up, paid API or subscription is required. Both languages use the same tools. English always opens at the root address.
LETTERKIND / TOOLKIT
A little help for every step.
01
Font comparison
Compare the same sample across safe system-font stacks without requesting remote fonts.
Open tool03
Spacing lab
Adjust font size, line height, letter spacing and text-column width with a live sample.
Open tool04
CSS recipe
Export scoped typography CSS and a validated JSON recipe for reuse.
Open tool