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

    Color & tools

    Freemium

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

    Free / $6/mo4.8
    • color ramps
    • accessibility
  • Contrast Ledger

    Color & tools

    Paid

    A Figma plugin that audits every text layer in a file for contrast issues

    $8/mo4.6
    • accessibility
    • figma plugin
  • Nibble SVG

    Color & tools

    Open source

    An in-browser SVG optimizer with a side-by-side diff before you export

    Free4.6
    • svg
    • optimization
Live demo · Swatchyard— View template →