Type Scale
Build a modular type system from a base size and ratio, preview every step and export rem-based CSS custom properties.
TYPE SCALE / MODULAR SYSTEM16px × 1.25
STEP 6 / 61.0 PX
Systematic type
STEP 5 / 48.8 PX
Systematic type
STEP 4 / 39.1 PX
Systematic type
STEP 3 / 31.3 PX
Systematic type
STEP 2 / 25.0 PX
Systematic type
STEP 1 / 20.0 PX
Systematic type
STEP 0 / 16.0 PX
Systematic type
STEP -1 / 12.8 PX
Systematic type
STEP -2 / 10.2 PX
Systematic type
CSS OUTPUT279 CHARS
:root {
--font-family: Inter, system-ui, sans-serif;
--line-height: 1.35;
--text-n2: 0.640rem;
--text-n1: 0.800rem;
--text-0: 1.000rem;
--text-1: 1.250rem;
--text-2: 1.563rem;
--text-3: 1.953rem;
--text-4: 2.441rem;
--text-5: 3.052rem;
--text-6: 3.815rem;
}SYSTEM / MODULARNine steps
A consistent mathematical ratio replaces arbitrary font-size decisions.
OUTPUT / REMAccessible units
Generated tokens use rem values while the preview keeps exact pixel equivalents visible.
SCOPE / HONESTTypography foundation
Font metrics still vary by family and require visual testing in the real interface.