Bilal Malik

Posted on Jun 3

I built a type scale generator that exports CSS, Tailwind v3/v4 & Style Dictionary tokens - all in the browser

#typescript #opensource #webdev #tailwindcss

Every time I started a new design system, the same ritual: open a calculator, pick a base size, choose a modular ratio, hand-compute every step, paste into CSS variables - then do it all over again when the designer changed the base from 16px to 17px.

There are type scale tools out there, but none of them exported to Tailwind v4 @theme syntax, Style Dictionary JSON, and let me preview my actual Google Font pairing - all in one place. So I built one.

Live demo: typoscale.vercel.app - open source, MIT licensed.

The Problem
What It Does
Token Output Examples
My Favourite Detail — Shareable URLs
WCAG Contrast Badges
Tech Stack
Run It Locally
Contributing

The Problem

Typography scales follow a simple formula - multiply a base size by a ratio repeatedly. But in practice:

You end up Googling "perfect fourth type scale calculator" every project
You copy-paste values and lose them when requirements change
You switch font pairings and have no idea how the scale actually looks in those fonts
You need tokens in a specific format (Tailwind v4? Style Dictionary?) and no existing tool exports it

TypoScale solves all of that in one place.

What It Does

Modular Scale Generation

Pick from 9 built-in ratios — Minor Second, Major Second, Perfect Fourth, Golden Ratio, and more — or enter any custom ratio. Set your base size, add steps above and below independently.

Google Fonts Pairing

Search and preview 1000+ Google Fonts. Separate pickers for display, body, and monospace. Fonts load on demand — no bloat.

Live Editorial Preview

A real editorial layout showing every scale step rendered in your chosen fonts. Drag to resize and see fluid behaviour. WCAG AA/AAA contrast badge per step.

Four Export Formats

CSS Custom Properties
Tailwind CSS v3 (theme.extend.fontSize)
Tailwind CSS v4 (@theme)
Style Dictionary JSON

One-click copy or download per format.

Shareable URLs

Full config encoded in query params. Share your exact scale with teammates - no account needed.

Token Output Examples

Using Perfect Fourth (1.333) ratio with a 16px base:

CSS Custom Properties

:root {
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Source Sans 3', system-ui, sans-serif;
  --font-size-sm:   0.75rem;   /* 12px  */
  --font-size-base: 1rem;      /* 16px  */
  --font-size-lg:   1.333rem;  /* 21.3px */
  --font-size-xl:   1.777rem;  /* 28.4px */
  --font-size-2xl:  2.369rem;  /* 37.9px */
  --font-size-3xl:  3.157rem;  /* 50.5px */
}

Tailwind v4

@import "tailwindcss";

@theme {
  --font-family-display: 'Playfair Display', Georgia, serif;
  --font-size-base: 1rem;
  --font-size-lg:   1.333rem;
  --font-size-xl:   1.777rem;
  --font-size-2xl:  2.369rem;
}

Tailwind v3

module.exports = {
  theme: {
    extend: {
      fontSize: {
        base: ['1rem',      { lineHeight: '1.5' }],
        lg:   ['1.333rem',  { lineHeight: '1.4' }],
        xl:   ['1.777rem',  { lineHeight: '1.3' }],
        '2xl':['2.369rem',  { lineHeight: '1.2' }],
      },
    },
  },
}

Style Dictionary JSON

{
  "typography": {
    "scale": {
      "base": { "value": "1rem",     "type": "fontSizes" },
      "lg":   { "value": "1.333rem", "type": "fontSizes" },
      "xl":   { "value": "1.777rem", "type": "fontSizes" },
      "2xl":  { "value": "2.369rem", "type": "fontSizes" }
    }
  }
}

My Favourite Detail - Shareable URLs

The entire config — base size, ratio, font selections, step count — is encoded into the URL using Zustand's URL persistence.

Tune a scale → copy the URL → send it to your designer. They open it and see exactly what you built. No account. No database. No backend.

This is the kind of thing that sounds like a small detail but completely changes the collaboration workflow.

WCAG Contrast Badges

Every scale step shows a live AA / AAA pass/fail badge calculated against your chosen background colour. Tiny type that barely clears AA gets flagged inline — no opening a separate contrast checker tab.

Tech Stack

Tool	Purpose
React + Vite	UI and build tooling
TypeScript (strict)	Type safety throughout
Tailwind CSS	Utility-first styling
Zustand	State management + URL persistence
Lucide React	Icon set
Vercel	Deployment

The scale math lives in a pure scaleAlgorithms.ts utility — no framework coupling, easy to unit test. Token generation is isolated in tokenGenerators.ts. Both are great targets for contributions.

Run It Locally

git clone https://github.com/byllzz/typoscale.git
cd typoscale
npm install
npm run dev

Open http://localhost:5173.

A Google Fonts API key is optional — without one it falls back to a curated list of 28 popular fonts. To add one:

cp .env.local.example .env.local
# Add your key → VITE_GOOGLE_FONTS_KEY=your_key_here

Contributing

Contributions are welcome! Good first issues:

[ ] New scale ratio presets
[ ] Unit tests for scaleAlgorithms.ts and tokenGenerators.ts
[ ] Fluid type scale preview mode
[ ] ARIA labels and keyboard navigation improvements

git checkout -b feat/your-feature
# make changes
npm run type-check
npm run lint
git commit -m "feat: your short description"

If TypoScale saved you from hand-calculating 1.333rem for the hundredth time - a ⭐ on the GitHub repo means a lot. And drop any feedback in the comments below!

Top comments (1)

HUAICHUAN • Jun 3

A type scale generator that exports to CSS, Tailwind, AND Style Dictionary tokens all in one tool — this is exactly the kind of multi-format design tool that saves developers from juggling three different utilities. Typography scaling is one of those foundational design decisions that affects every part of a product, and getting it right at the system level prevents endless tweaking later. The fact that you included Style Dictionary tokens shows real understanding of how modern design systems work across platforms. Most type scale tools stop at CSS. Yours goes further and integrates with the actual token workflows that design system teams use. The visual preview with real-time adjustments is essential too — being able to see how your scale feels before committing to it makes the difference between a good type system and a great one. Excellent work!

By the way, if you have time, check out the app I recently developed! Like Code is an iOS app that runs HTML directly on your phone. You can paste any HTML, run it full screen, save offline, and edit on device. It is on the App Store, feel free to check it out! Thank you very much!

DEV Community