What type scale ratio should I use for mobile?

Between 1.125 and 1.25. The classical ratios like 1.5 and the golden ratio were designed for print and wide screens; on a 375px column they push headings to sizes that wrap badly and dominate the screen.

What line height should mobile body text use?

Around 1.5 to 1.6 for body copy at 15–16px. Larger text needs proportionally tighter leading — a 32px heading wants roughly 1.2, because at 1.5 the lines drift apart visually.

Should font sizes be in px or rem?

rem, so text scales with the user's font-size preference. This tool outputs both, but the CSS export uses rem for exactly that reason.

floow.design

Type Scale Generator

Build a modular type scale from a base size and ratio, sized for phone screens.

Build scales freeSign up to copy the CSS scaleNo usage limits

Base size15–16px is right for mobile body copy.Ratio

Gentler ratios work better in a 375px column.

1.2 Minor third

3xlDesign the screen33.18px / 1.15

2xlDesign the screen27.65px / 1.25

xlDesign the screen23.04px / 1.4

lgDesign the screen19.2px / 1.4

baseDesign the screen16px / 1.55

smDesign the screen13.33px / 1.55

xsDesign the screen11.11px / 1.55

Set a base size and a ratio and get a full scale of sizes with matching line heights, in px and rem, ready to paste as CSS custom properties.

A scale is what stops an interface accumulating eleven slightly different font sizes over six months of feature work.

What a modular scale is

Each step is the previous one multiplied by a fixed ratio, so the relationships between sizes stay consistent no matter how many steps you add. That consistency is the entire value: sizes chosen ad hoc drift toward each other until a 17px heading sits above 16px body text and the hierarchy stops reading at all.

Gentler ratios work better on phones

The classical ratios — 1.5, the golden ratio — were built for print and wide screens. On a 375px-wide column they push headings to sizes that wrap awkwardly and swallow the screen. Something between 1.125 and 1.25 usually gives enough hierarchy without any single step dominating.

Line height moves in the opposite direction

Large text needs proportionally tighter leading than small text. A 32px heading at 1.5 line height looks unglued; around 1.2 is right. Body text at 15px wants roughly 1.5–1.6 to stay comfortable. Any scale worth using pairs a line height with each size rather than applying one global value.

How to use the type scale generator

Set your base size to the body text size you will actually ship — 15 or 16px for most mobile apps.
Start at a 1.2 ratio; anything above 1.25 gets unwieldy in a narrow phone column.
Check the largest step actually fits your longest real heading without wrapping badly.
Note that each size carries its own line height — large text needs tighter leading than small.
Copy the CSS custom properties and use the tokens rather than raw pixel values.

Use it with

Font Pairing Tool — Try heading and body font combinations at real mobile sizes before committing.
px to rem Converter — Convert pixels to rem, em, dp and sp against any root size, with a full scale table.
CSS Grid Generator — Lay out rows, columns and gaps visually, place items on the grid, and copy the CSS.

Frequently asked questions

What type scale ratio should I use for mobile?: Between 1.125 and 1.25. The classical ratios like 1.5 and the golden ratio were designed for print and wide screens; on a 375px column they push headings to sizes that wrap badly and dominate the screen.
What line height should mobile body text use?: Around 1.5 to 1.6 for body copy at 15–16px. Larger text needs proportionally tighter leading — a 32px heading wants roughly 1.2, because at 1.5 the lines drift apart visually.
Should font sizes be in px or rem?: rem, so text scales with the user's font-size preference. This tool outputs both, but the CSS export uses rem for exactly that reason.