Typography scale decisions should survive the handoff
TypeLyft turns type scale exploration into named tokens and paste-ready CSS that teams can use without logging in. Built by Pagelyft for teams that ship sites and products every week.
Free open-source type scale generator
Turn a typography scale into CSS your team can ship without another spreadsheet.
Plan a responsive type scale and typography scale in one place: modular ratios, fluid clamp() sizes, real landing and blog previews, then export CSS, Tailwind 4 tokens, or SASS when you are ready to hand off.
Export formats
CSS · Tailwind 4 · SASS
Handoff
Copy and download exports
Access model
Free and open source
- Fluid type scale with preset and custom ratios
- Landing and blog previews, mobile and desktop
- Production exports plus rhythm spacing
Scale in context
Min to max viewport
Display
56 / 72
H2
40 / 52
Body
18 / 20
Caption
14 / 16
Check hierarchy before you lock tokensBuilt by Pagelyft
Built for handoff
From type scale idea to paste-ready CSS in one session.
Free typography workflow
Build, preview, and export a responsive type scale from one focused app.
TypeLyft is built for responsive typography workflows: tune a modular scale, preview it like a real page, and package the decision for developers with implementation-ready exports.
Dial in a responsive typography scale fast
Start from familiar ratios or a custom step, set min and max base sizes and viewports, and see fluid clamp() values update as you go.
Preview hierarchy where it matters
Switch between landing and long-form layouts at mobile or desktop widths before you commit. Catch weak contrast between display, body, and caption roles while the copy still looks like a real site.
Export the decision
Copy or download CSS custom properties, Tailwind 4 @theme tokens, or SASS with optional Google Fonts import and rhythm spacing tokens.
Define your typography scale
Build a coherent typography scale from modular ratios, custom steps, and token-style roles from display down to caption.
Ship responsive typography
Generate clamp() output around min and max viewport settings so responsive typography grows predictably across real breakpoints.
Work without accounts
Open the builder, tune the scale, and export the output without a login, account, or paid tier.