Generate a full type scale (h1–h6, body, small) using a chosen modular ratio. Output is fluid clamp() CSS that scales smoothly between two viewport widths.
Pick a base size (e.g., 16px) and ratio (Major Third = 1.25, Golden Ratio = 1.618)
We compute each step (xs through 4xl) using base × ratio^n
Output as fluid clamp() expressions for fluid sizing across breakpoints
0 bytes uploaded. Modular Typography Scale Builder runs entirely in your browser using opentype.js and the File API. Your fonts never leave your device.
This tool requires the Free plan or higher.
Minor Third (1.2): subtle, readable for body-heavy sites. Major Third (1.25): popular default. Perfect Fourth (1.333): expressive, good for editorial. Golden Ratio (1.618): dramatic, headline-focused designs.
Each step gets a clamp(min, preferred, max) where preferred is a calc combining rem and vw units. The result interpolates linearly between two viewport widths (e.g., 320px → 1440px).
8–10 steps covers most design systems: 2xs, xs, sm, base, lg, xl, 2xl, 3xl, 4xl. The base size sits at index 3 by default.
Pick a min and max font size plus a viewport range and get a clamp() expression that interpolates smoothly. Single field — copy and paste.
Open toolBuild a complete typography token system as CSS custom properties: --font-family, --font-size-{xs,sm,base,lg,xl}, --font-weight-{light,regular,bold}, --line-height-{tight,normal,relaxed}.
Open toolExtract every vertical metric from a font's OS/2, hhea, and head tables. Get a recommended line-height and CSS snippet for perfectly aligned typography.
Open tool