Typography Scale Designer
Edit typography scale designer and inspect a real native preview locally.
Enabling local controls…
Native preview
Review inputs and build; variable fonts require a selected file.
Processing model and limits
Size=base×ratio^level, levels-1 through steps. Generated rem assumes16px root; fluid mode follows source min86% at viewport0 and max100% at1200px, with linear vw interpolation/clamp (no narrow/wide viewport controls in source). Native rendered sizes, independent scroll, body line-height. Base10–32/ratio1.05–2/steps2–8/leading1–2.5. Very large scales may require scrolling; no readability/a11y guarantee. Text stays in memory; 32 KiB per field and 1 MiB complete output. Native preview is scoped to its container; exported HTML is escaped text, never injected into the document. Editing cancels pending work and clears stale results.
How to use this tool
Edit the source fields, build the preview, then inspect and export the complete text. For fonts, explicitly select a local file; no external font URL is requested.
When not to use it
Size=base×ratio^level, levels-1 through steps. Generated rem assumes16px root; fluid mode follows source min86% at viewport0 and max100% at1200px, with linear vw interpolation/clamp (no narrow/wide viewport controls in source). Native rendered sizes, independent scroll, body line-height. Base10–32/ratio1.05–2/steps2–8/leading1–2.5. Very large scales may require scrolling; no readability/a11y guarantee. Text stays in memory; 32 KiB per field and 1 MiB complete output. Native preview is scoped to its container; exported HTML is escaped text, never injected into the document. Editing cancels pending work and clears stale results.