Color & toolsFree

Scalewright

A type and spacing scale calculator that outputs fluid CSS clamp() values

About this resource

Scalewright calculates a type scale and a spacing scale together, from a base size and a ratio at both a small and a large viewport. It previews every step with your own font, loaded from a URL or a local file, and outputs fluid CSS clamp() values, a Tailwind config and Figma variables for each breakpoint.

It's best for front-end developers setting up a new site and designers who want headings that scale smoothly between phone and desktop instead of jumping at breakpoints. Free, no account needed. The caveat: fluid values are calculated for viewport width only, so it doesn't help with container-based layouts, and line-height suggestions are basic.

Highlights

  • 01Fluid clamp() values between two viewports
  • 02Previews scales with your own font files
  • 03Exports CSS, Tailwind and Figma variables

Tags

Related resources

More in Color & tools
  • Rampsmith

    NewFeatured

    Generates accessible 11-step color ramps and checks every pair for contrast

    • color ramps
    • accessibility
    • tokens
    FreemiumFree / $6/mo
  • A Figma plugin that audits every text layer in a file for contrast issues

    • accessibility
    • figma plugin
    • wcag
    Paid$8/mo
  • An in-browser SVG optimizer with a side-by-side diff before you export

    • svg
    • optimization
    • open source
    Open sourceFree
Live demo · Sourcefile Club— View template →