Skip to main content
dubinity

Design & Accessibility

Type Scale Generator

Build a modular type scale from a base size and ratio, preview every step and export CSS, design tokens or Tailwind config.

  • Runs in your browser
  • Works on mobile
  • In: Base size, RATIO
  • Out: CSS, JSON, Tailwind config
Loading the tool…

Your files and text are processed on your own device, inside this page. Nothing is uploaded to Dubinity or stored, and closing the tab discards it. How privacy works

About Type Scale Generator

Pick a base font size and a ratio - from a minor second (1.067) to the golden ratio (1.618) or your own - and the number of steps below and above the base. Every step is previewed with your sample text in px and rem.

Turn on fluid mode to generate clamp() sizes that grow from a small-screen scale to a large-screen scale between two viewport widths. Export as CSS custom properties, DTCG design-token JSON, a Tailwind v3 config or a Tailwind v4 @theme block.

How to use it

  1. 1Set the base size and choose a ratio.
  2. 2Choose how many steps to add below and above the base.
  3. 3Optionally turn on fluid sizes and set the viewport range.
  4. 4Copy or download the CSS, JSON or Tailwind output.

Questions

Was this tool helpful?

Related tools

All design tools

  • Spacing Scale Generator

    Generate a spacing scale on a 4px or 8px grid, linear or geometric, with names and exports for CSS, tokens and Tailwind.

    Base unit
    Runs in your browserOpen tool

  • Design Token Generator

    Build a small design-token set - colours, type scale, spacing, radii and shadows - and export CSS variables, DTCG JSON or Tailwind.

    HEX · RGB · HSL
    Runs in your browserOpen tool

  • PX to REM Converter

    Convert pixels to rem and rem to pixels for CSS, from any root font size, with points and percent alongside.

    Pixels · REM · Root size
    Runs in your browserOpen tool

  • Line Height Calculator

    Turn a font size and a line-height ratio into pixels and rem, or find the unitless ratio for a target line height.

    Font size · RATIO · Target line height
    Runs in your browserOpen tool

  • Color Converter

    Convert a colour between HEX, RGB, HSL, HSV, HWB, CMYK and OKLCH, with contrast against black and white.

    TEXT
    Runs in your browserOpen tool

  • Lorem Ipsum Generator

    Generate placeholder paragraphs, sentences or words, in classic Latin or in Arabic filler text.

    NONE
    Runs in your browserOpen tool