Controls

Tune the scale, rhythm, and review state.

Typeface
Premium
Starter font library with premium pairing and full-library access.

Separate heading and body fonts

Unlock the complete Google Fonts library and mix professional pairings without losing this draft.

Scale system
Responsive sizes between mobile and desktop breakpoints.

Custom ratio input

Fine-tune ratios like 1.18 or 1.275 for tighter UI and campaign-specific typography systems.

Responsive viewport tuning

Lock in min and max sizes, custom viewport ranges, and more production-grade clamp control.

Typography rhythm
Premium
Weight, line-height, and letter-spacing.

Advanced rhythm controls

Paid plans unlock weight, line-height, and tracking tuning for professional typography systems.

Body weight
Line-height
Tracking
Vertical rhythm
Premium
Spacing tokens derived from the body line box.

Premium vertical rhythm

Generate spacing tokens from the body line box and use them in previews and exports.

TypeLyft Studio

Responsive type scale builder

Premium saves

Save named scales to your account

Keep multiple named typography systems, reload them later, and continue working without relying on one share URL.

  • Multiple saved scales per account
  • Reload projects without losing work
  • Protected access across devices

Premium export

Export production-ready typography tokens

Copy or download CSS, Tailwind 4, and SASS output when your scale is ready to ship.

  • CSS custom properties export
  • Tailwind 4 theme token export
  • SASS variable download and copy actions

Premium saves

Save named scales to your account

Keep multiple named typography systems, reload them later, and continue working without relying on one share URL.

  • Multiple saved scales per account
  • Reload projects without losing work
  • Protected access across devices

Scale preview

Inspect the hierarchy before you ship it

Inline token editing is premium

Hover a preview row to insert a new token above or below it, rename tokens in place, or remove ones you do not need.

displaydisplay

48.8px min

48.8px max

clamp(3.052rem, 3.052rem + 0.000vw, 3.052rem)Manrope

How vexingly quick daft zebras jump

h1h1

39.1px min

39.1px max

clamp(2.441rem, 2.441rem + 0.000vw, 2.441rem)Manrope

How vexingly quick daft zebras jump

h2h2

31.3px min

31.3px max

clamp(1.953rem, 1.953rem + 0.000vw, 1.953rem)Manrope

How vexingly quick daft zebras jump

h3h3

25px min

25px max

clamp(1.563rem, 1.563rem + 0.000vw, 1.563rem)Manrope

How vexingly quick daft zebras jump

h4h4

20px min

20px max

clamp(1.250rem, 1.250rem + 0.000vw, 1.250rem)Manrope

How vexingly quick daft zebras jump

h5h5

16px min

16px max

clamp(1.000rem, 1.000rem + 0.000vw, 1.000rem)Manrope

How vexingly quick daft zebras jump

bodybody

16px min

16px max

clamp(1.000rem, 1.000rem + 0.000vw, 1.000rem)Manrope

How vexingly quick daft zebras jump

smallsmall

12.8px min

12.8px max

clamp(0.800rem, 0.800rem + 0.000vw, 0.800rem)Manrope

How vexingly quick daft zebras jump

eyebroweyebrow

10.2px min

10.2px max

clamp(0.640rem, 0.640rem + 0.000vw, 0.640rem)Manrope

How vexingly quick daft zebras jump

Browser preview

See your scale in context

TypeLyft
WorkflowPreviewTokensPricing
Built by Pagelyft
Responsive Type Scale

Ship a type system your whole team can actually reuse.displayManrope48.828125px

TypeLyft turns typography from a one-off design task into a repeatable system with fluid scales, realistic previews, and export-ready tokens.bodyManrope16px

Responsive range

390px → 1440px

Current ratio

16px base

Presentation mode

Stakeholder-ready

Live Type System
Compare the exact hierarchy before it hits code.h3Manrope25px
Mobile and desktop preview states resolve against the real fluid scale, not just a narrower frame.
display48.8px
h139.1px
h231.3px
h325px
h420px
Miami HEAT
LA Clippers
Corsair
Azamara
Fluid scale controlsh4Manrope20px
Move from rough ratios to clamp-ready type steps without manual interpolation.
Hierarchy previewh4Manrope20px
See the exact relationships between hero, body, labels, and support text.
Token exportsh4Manrope20px
Turn a visual decision into CSS, Tailwind, and SASS output in one pass.
Review linksh4Manrope20px
Share presentation-mode previews with clients without asking them to sign in.
Pricing preview
One plan. Full workflow.h3Manrope25px
Premium controls, exports, saved scales, and review links built into one lightweight product utility.

Premium

$2.99/month

  • Custom ratios and advanced controls
  • Token editing and rhythm exports
  • Saved scales and public review presentations

Type decisions should be as reviewable as design comps.h2Manrope31.25px

Build the responsive scale, preview it like a real product surface, then send a clean presentation link to stakeholders before implementation starts.bodyManrope16px