Goafreet/Typography Lab/Responsive Type Scale Generator

Responsive Type Scale Generator

Modular & Fluid clamp()

Architect mathematically coherent typographic hierarchies for modern web interfaces. Calibrate dual mobile and desktop modular ratios ($B \cdot r^n$), preview live layouts, and export developer-ready fluid CSS clamp() custom properties and W3C design tokens.

Scale Presets:

Compact Dashboard & SaaS

Product UI & Web App

Editorial & Academic Article

Marketing Landing Hero

Mobile-First Application

Reference Typeface

Mobile Breakpoint (375px)

Base: 15px

Desktop Breakpoint (1440px)

Base: 16px

Semantic Scale Ladder (13 Roles)

Formula: size = Base × (Ratio)^step

Role	Step	Mobile	Desktop	Leading	Fluid clamp()
Display	+6	30.4px	61px	1.1	clamp(1.9rem, calc(1.2266rem + 2.8732vw), 3.8125rem)
Heading 1	+5	27px	48.8px	1.15	clamp(1.6875rem, calc(1.2077rem + 2.0469vw), 3.05rem)
Heading 2	+4	24px	39.1px	1.2	clamp(1.5rem, calc(1.1677rem + 1.4178vw), 2.4438rem)
Heading 3	+3	21.4px	31.3px	1.25	clamp(1.3375rem, calc(1.1196rem + 0.9296vw), 1.9563rem)
Heading 4	+2	19px	25px	1.3	clamp(1.1875rem, calc(1.0555rem + 0.5634vw), 1.5625rem)
Heading 5	+1	16.9px	20px	1.35	clamp(1.0562rem, calc(0.988rem + 0.2911vw), 1.25rem)
Heading 6	+0.5	15.9px	17.9px	1.4	clamp(0.9938rem, calc(0.9497rem + 0.1878vw), 1.1187rem)
Body Large (Lead)	+1	16.9px	20px	1.6	clamp(1.0562rem, calc(0.988rem + 0.2911vw), 1.25rem)
Body (Base)	0	15px	16px	1.6	clamp(0.9375rem, calc(0.9155rem + 0.0939vw), 1rem)
Body Small	-0.5	14.1px	14.3px	1.5	clamp(0.8812rem, calc(0.8768rem + 0.0188vw), 0.8938rem)
Caption / Meta	-1	13.3px	12.8px	1.45	clamp(0.8rem, calc(0.789rem + 0.0469vw), 0.8313rem)
Overline	-1.5	12.6px	11.4px	1.3	clamp(0.7125rem, calc(0.6861rem + 0.1127vw), 0.7875rem)
Button	0	15px	16px	1.2	clamp(0.9375rem, calc(0.9155rem + 0.0939vw), 1rem)

Typography Masterclass

Harmonizing Spatial Geometry with Human Optical Scaling

A modular type scale transforms arbitrary pixel choices into a coherent mathematical symphony. By binding body size to calculated musical ratios, every heading assumes its natural visual hierarchy.

Preserving Legibility Across Mobile and Desktop

Screen size demands different typographic behavior. On narrow mobile viewports, ratios exceeding 1.25 produce unwieldy display titles that break words awkwardly. Fluid clamp expressions smoothly transition between responsive endpoints without sudden visual snapping.

Curated by Goafreet Typography Lab • Design System Standards

Modular Scale Progression Curve

Visualizes the mathematical exponential growth curve comparing Mobile (Major Second (8:9)) versus Desktop (Major Third (4:5)). Accompanied by full numerical data.

Desktop (16px • 1.25)

Mobile (15px • 1.125)

Developer Code & Token Exporter

Production-ready CSS custom properties, W3C JSON design tokens, and Tailwind configuration.

/* Goafreet Typography Lab: Responsive Modular Type Scale */
:root {
  --gf-font-family-primary: "Inter", system-ui, sans-serif;
  --gf-font-root: 16px;
  --gf-font-size-display: clamp(1.9rem, calc(1.2266rem + 2.8732vw), 3.8125rem); /* 30.4px -> 61px */
  --gf-line-height-display: 1.1;
  --gf-letter-spacing-display: -0.02em;
  --gf-font-size-h1: clamp(1.6875rem, calc(1.2077rem + 2.0469vw), 3.05rem); /* 27px -> 48.8px */
  --gf-line-height-h1: 1.15;
  --gf-letter-spacing-h1: -0.015em;
  --gf-font-size-h2: clamp(1.5rem, calc(1.1677rem + 1.4178vw), 2.4438rem); /* 24px -> 39.1px */
  --gf-line-height-h2: 1.2;
  --gf-letter-spacing-h2: -0.01em;
  --gf-font-size-h3: clamp(1.3375rem, calc(1.1196rem + 0.9296vw), 1.9563rem); /* 21.4px -> 31.3px */
  --gf-line-height-h3: 1.25;
  --gf-letter-spacing-h3: -0.005em;
  --gf-font-size-h4: clamp(1.1875rem, calc(1.0555rem + 0.5634vw), 1.5625rem); /* 19px -> 25px */
  --gf-line-height-h4: 1.3;
  --gf-letter-spacing-h4: 0em;
  --gf-font-size-h5: clamp(1.0562rem, calc(0.988rem + 0.2911vw), 1.25rem); /* 16.9px -> 20px */
  --gf-line-height-h5: 1.35;
  --gf-letter-spacing-h5: 0em;
  --gf-font-size-h6: clamp(0.9938rem, calc(0.9497rem + 0.1878vw), 1.1187rem); /* 15.9px -> 17.9px */
  --gf-line-height-h6: 1.4;
  --gf-letter-spacing-h6: 0em;
  --gf-font-size-body-lg: clamp(1.0562rem, calc(0.988rem + 0.2911vw), 1.25rem); /* 16.9px -> 20px */
  --gf-line-height-body-lg: 1.6;
  --gf-letter-spacing-body-lg: 0em;
  --gf-font-size-body: clamp(0.9375rem, calc(0.9155rem + 0.0939vw), 1rem); /* 15px -> 16px */
  --gf-line-height-body: 1.6;
  --gf-letter-spacing-body: 0em;
  --gf-font-size-body-sm: clamp(0.8812rem, calc(0.8768rem + 0.0188vw), 0.8938rem); /* 14.1px -> 14.3px */
  --gf-line-height-body-sm: 1.5;
  --gf-letter-spacing-body-sm: 0em;
  --gf-font-size-caption: clamp(0.8rem, calc(0.789rem + 0.0469vw), 0.8313rem); /* 13.3px -> 12.8px */
  --gf-line-height-caption: 1.45;
  --gf-letter-spacing-caption: 0.01em;
  --gf-font-size-overline: clamp(0.7125rem, calc(0.6861rem + 0.1127vw), 0.7875rem); /* 12.6px -> 11.4px */
  --gf-line-height-overline: 1.3;
  --gf-letter-spacing-overline: 0.08em;
  --gf-font-size-button: clamp(0.9375rem, calc(0.9155rem + 0.0939vw), 1rem); /* 15px -> 16px */
  --gf-line-height-button: 1.2;
  --gf-letter-spacing-button: 0.01em;
}

/* Semantic Role Utility Classes */
.type-display {
  font-family: "Inter", system-ui, sans-serif;
  font-size: var(--gf-font-size-display);
  font-weight: 800;
  line-height: var(--gf-line-height-display);
  letter-spacing: var(--gf-letter-spacing-display);
}

.type-h1 {
  font-family: "Inter", system-ui, sans-serif;
  font-size: var(--gf-font-size-h1);
  font-weight: 700;
  line-height: var(--gf-line-height-h1);
  letter-spacing: var(--gf-letter-spacing-h1);
}

.type-h2 {
  font-family: "Inter", system-ui, sans-serif;
  font-size: var(--gf-font-size-h2);
  font-weight: 700;
  line-height: var(--gf-line-height-h2);
  letter-spacing: var(--gf-letter-spacing-h2);
}

.type-h3 {
  font-family: "Inter", system-ui, sans-serif;
  font-size: var(--gf-font-size-h3);
  font-weight: 600;
  line-height: var(--gf-line-height-h3);
  letter-spacing: var(--gf-letter-spacing-h3);
}

.type-h4 {
  font-family: "Inter", system-ui, sans-serif;
  font-size: var(--gf-font-size-h4);
  font-weight: 600;
  line-height: var(--gf-line-height-h4);
  letter-spacing: var(--gf-letter-spacing-h4);
}

.type-h5 {
  font-family: "Inter", system-ui, sans-serif;
  font-size: var(--gf-font-size-h5);
  font-weight: 600;
  line-height: var(--gf-line-height-h5);
  letter-spacing: var(--gf-letter-spacing-h5);
}

.type-h6 {
  font-family: "Inter", system-ui, sans-serif;
  font-size: var(--gf-font-size-h6);
  font-weight: 600;
  line-height: var(--gf-line-height-h6);
  letter-spacing: var(--gf-letter-spacing-h6);
}

.type-body-lg {
  font-family: "Inter", system-ui, sans-serif;
  font-size: var(--gf-font-size-body-lg);
  font-weight: 400;
  line-height: var(--gf-line-height-body-lg);
  letter-spacing: var(--gf-letter-spacing-body-lg);
}

.type-body {
  font-family: "Inter", system-ui, sans-serif;
  font-size: var(--gf-font-size-body);
  font-weight: 400;
  line-height: var(--gf-line-height-body);
  letter-spacing: var(--gf-letter-spacing-body);
}

.type-body-sm {
  font-family: "Inter", system-ui, sans-serif;
  font-size: var(--gf-font-size-body-sm);
  font-weight: 400;
  line-height: var(--gf-line-height-body-sm);
  letter-spacing: var(--gf-letter-spacing-body-sm);
}

.type-caption {
  font-family: "Inter", system-ui, sans-serif;
  font-size: var(--gf-font-size-caption);
  font-weight: 400;
  line-height: var(--gf-line-height-caption);
  letter-spacing: var(--gf-letter-spacing-caption);
}

.type-overline {
  font-family: "Inter", system-ui, sans-serif;
  font-size: var(--gf-font-size-overline);
  font-weight: 700;
  line-height: var(--gf-line-height-overline);
  letter-spacing: var(--gf-letter-spacing-overline);
  text-transform: uppercase;
}

.type-button {
  font-family: "Inter", system-ui, sans-serif;
  font-size: var(--gf-font-size-button);
  font-weight: 600;
  line-height: var(--gf-line-height-button);
  letter-spacing: var(--gf-letter-spacing-button);
}

CONTINUE TYPOGRAPHY EXPLORATION

Readability Lab Pairing Studio Variable Font Lab Letter Anatomy Lab Typography Academy