koaliatools · type scale
← back
tools · generator · updated August 20, 2026
frame 00 · the tool

Type scale generator

a type scale is one decision — a base size and a ratio — that answers every “how big should this be?” for the rest of the project. pick the two, read the result in real copy, take the code.

16px
6
2
specimen9 steps · 16px × 1.200
  • 5xl2.986remdesign for what people feel
  • 4xl2.488remthe interface is the product
  • 3xl2.074remthe interface is the product
  • 2xl1.728remevery screen makes a promise
  • xl1.44remevery screen makes a promise
  • lg1.2remGood typography is invisible. It does its work without asking to be noticed, and the reader never stops to admire the letterforms.
  • base1remGood typography is invisible. It does its work without asking to be noticed, and the reader never stops to admire the letterforms.
  • sm0.833remCAPTION · METADATA · 12 SEP 2026
  • xs0.694remCAPTION · METADATA · 12 SEP 2026
css · rem
/* type scale — base 16px, ratio 1.200 */
/* generated with koalia.design/tools/type-scale */
:root {
  --text-xs: 0.694rem;
  --text-sm: 0.833rem;
  --text-base: 1rem;
  --text-lg: 1.2rem;
  --text-xl: 1.44rem;
  --text-2xl: 1.728rem;
  --text-3xl: 2.074rem;
  --text-4xl: 2.488rem;
  --text-5xl: 2.986rem;
}
frame 01 · how to read it

what the ratio actually does

every step is the one below it multiplied by the ratio. a 1.200 scale from 16px gives you 19.2, 23.04, 27.65 and so on — each size related to the last by the same proportion, which is why a scale looks composed and a pile of hand-picked numbers doesn't.

small ratios (1.067–1.200) keep levels close. they suit dense, information-heavy interfaces — dashboards, tables, settings — where you need six or seven distinct sizes and no single one is allowed to shout.

large ratios (1.414–1.618) open dramatic gaps fast. they suit marketing pages and editorial layouts with a hard split between a headline and body copy, and almost nothing in between. by step four you are usually past 60px.

if you can't decide: 1.200 minor third for product UI, 1.333 perfect fourth for a landing page. both survive contact with real content.

frame 02 · the caveats

where scales break

  • the scale is a starting point, not a law. if 23.04px looks wrong in the one place it matters, use 24. a scale exists to stop you inventing a new size for every component, not to win arguments.
  • round for small sizes, not for large ones. sub-pixel differences are invisible at 48px and legible at 13px. round everything under ~20px to whole pixels; let the big steps keep their decimals.
  • line-height is a second scale. large type needs a tighter multiplier than body copy — roughly 1.0–1.15 for display, 1.4–1.6 for reading. a single line-height across the whole scale always looks wrong at one end.
  • rem respects the user, px doesn't. sizes in rem scale with the reader's browser font-size setting; px overrides it. use rem for anything with words in it. this is an accessibility floor, not a preference.
  • don't ship every step. generating eleven sizes doesn't mean using eleven. most interfaces need five or six. the rest are there so you have somewhere to go.
koalia · the bootcamp

tools are the easy half

these are references — they tell you what the rules are, not when to break them. that judgement is what the eight weeks are for.
apply for KO-2

more tools