← All plugins

Type Scale

A modular type scale as text styles and variables with Desktop, Tablet and Mobile modes, fluid clamp() for code.

Try the free web version: Type Scale Generator →

What it does

Type Scale builds a modular scale and writes it into Figma as text styles bound to number variables, with a mode per breakpoint, so one style resizes itself in a frame set to Desktop, Tablet or Mobile. Code gets the matching fluid clamp() values.

Re-run it and everything updates in place: same styles, same variables, same specimen boards. Already have a file full of sizes? The audit infers the scale they come from and snaps stray text to it.

  1. A type scale that resizes itself

    Styles bound to variables with a mode per breakpoint.

  2. Every breakpoint at a glance

    Mobile, Tablet and Desktop sizes, line heights and readability checks.

  3. Find the scale your file already uses

    Then snap the stray sizes to it, in one undo step.

  4. Fluid type for code

    clamp() in CSS, Tailwind v4 @theme, SCSS or tokens, in rem or px.

  5. Styles, variables and specimens

    Semantic names, two families, a fluid space scale.

Everything it does

Scale

  • Any ratio, rounding to 0.5, 1, even, 4pt or 8pt
  • Per-step overrides, baseline grid
  • Heading and body families

Figma

  • Variables with a mode per breakpoint
  • Semantic aliases: Display, H1-H6, Body
  • A specimen per mode, updated in place
  • Audit the sizes in a file and snap them to the scale

Code

  • CSS, SCSS, Tailwind v3 and v4, W3C tokens
  • Fluid space scale
  • Readability guardrails and a 200% preview

10 free uses, then one license or Lab Pro. See pricing →

More plugins