Type scale generator that exports CSS, Tailwind v3/v4 & Style Dictionary tokens - all in the browser

TypoScale: Modular Typography Without the Math
Every time you start a new design system, the same ritual repeats. Open a calculator. Pick a base font size. Choose a modular ratio. Hand-compute every single step in the scale. Paste values into CSS variables. Then, inevitably, the designer asks: "What if we changed the base from 16px to 17px?"

You start over.

Existing type scale tools help, but they're incomplete. They calculate the scale, sure. But they don't export to Tailwind v4's theme syntax. They don't generate Style Dictionary JSON for design tokens. They don't let you preview your actual Google Font pairing before you commit. And they definitely don't let you share your exact scale with teammates without an account.

*TypoScale * fixes all of that in one place. Generate modular scales, preview them in real fonts, export to multiple formats, and share instantly.

• Try it live
• View on GitHub (MIT licensed)

The Problem With Typography Scales
Type scales follow simple math — multiply a base size by a ratio, repeat. But the implementation is scattered across tools that don't talk to each other:

The calculator approach: You find a type scale generator, plug in numbers, copy values into a spreadsheet. Change the base size? Start again.

The preview problem: You generate tokens but have no idea how they'll actually look in your chosen fonts. You apply them to your design, realize they don't work, and repeat the entire process.

The format fragmentation: You need Tailwind v4's theme syntax, but the tool only exports v3 config. Or it exports CSS, but you need Style Dictionary. You end up using three different tools and manually converting between formats.

The collaboration gap: You tune a perfect scale on your machine, send a screenshot to your designer, and they can't reproduce it. No shareable configuration. No way to iterate together.
TypoScale eliminates every friction point.

What You Get:

1. Intelligent Modular Scale Generation
Pick from nine built-in ratios — Minor Second (1.067), Major Second (1.125), Perfect Fourth (1.333), Golden Ratio (1.618), and more. Each ratio has a mathematical relationship that produces harmonious, proportional sizes. Or enter any custom ratio you want.

Set your base font size (typically 16px, but whatever your design system uses). Add steps above and below independently — some scales need five sizes, others need ten. TypoScale generates the entire scale instantly, preserving mathematical precision at every step.

2. Google Fonts Pairing & Live Preview
Search 1000+ Google Fonts directly in the tool. Separate pickers for display, body, and monospace typefaces — because a scale that looks great in Playfair Display won't work in your body copy unless you test it together.

Fonts load on demand, no bloat. Once selected, an editorial layout renders showing every scale step in your actual chosen fonts. Drag to resize and watch the hierarchy respond. This is the moment you discover whether your scale works in reality, not just in theory.

3. WCAG Contrast Verification Built In
Every scale step displays a WCAG AA/AAA pass/fail badge calculated against your chosen background color. Tiny type that barely clears accessibility standards gets flagged inline. No opening a separate contrast checker tab. No external tools. The safety check lives right where you need it.

Four Export Formats, One Click
Once your scale is perfect, export in the format your project needs:

CSS Custom Properties - Variables for vanilla CSS projects:

css:root {
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Source Sans 3', system-ui, sans-serif;
  --font-size-base: 1rem;      /* 16px  */
  --font-size-lg:   1.333rem;  /* 21px  */
  --font-size-xl:   1.777rem;  /* 28px  */
}

Tailwind v4 theme Syntax - Modern Tailwind projects:
css@import "tailwindcss";

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

*Tailwind v3 Config * - Existing Tailwind projects:

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

Style Dictionary JSON - Design token systems:

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

The Collaboration Game-Changer: Shareable URLs
Here's where TypoScale separates from every other type scale tool.
Your entire configuration — base size, ratio, font selections, step count, even background color — is encoded into the URL using Zustand's URL persistence. No database. No backend. No accounts.

Tune a scale. Copy the URL. Send it to your designer.

They open it and see exactly what you built. They can tweak the ratio, change the base size, try different fonts — all in real-time. Changes reflect in the URL. They send you the updated link. You load it, see their suggestions, iterate together.

This transforms type scale design from a one-way handoff into actual collaboration. It's a small technical detail that completely changes the workflow.

The Architecture
The scale math lives in pure utility functions (scaleAlgorithms.ts) with zero framework coupling - easy to unit test and reuse elsewhere. Token generation is isolated in tokenGenerators.ts. Both are excellent targets for contributions and modifications.

The Stack:

• React + Vite - Fast development and optimized bundling
• TypeScript (strict mode) - Type safety throughout the codebase
• Tailwind CSS - Utility-first styling
• Zustand - Lightweight state management with built-in URL persistence
• Lucide React - Clean, consistent icon set
• Vercel - Instant global deployment

Minimal dependencies. Maximum clarity.

Run It Locally
Clone and start designing:

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

Open http://localhost:5173. The tool works immediately with a curated fallback list of 28 popular Google Fonts.

To unlock the full 1000+ Google Fonts library, add a Google Fonts API key:

bashcp .env.local.example .env.local
# Edit and add: VITE_GOOGLE_FONTS_KEY=your_key_here

How to Contribute
TypoScale improves with community contributions. Good first issues:

• Add new scale ratio presets with documentation
• Write unit tests for scaleAlgorithms.ts and tokenGenerators.ts
• Build a fluid type scale preview mode
• Enhance accessibility - ARIA labels, keyboard navigation, screen reader testing

Contribution workflow:

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

Keep PRs focused — one feature or fix per request.

TypoScale proves that one well-designed tool can handle modular typography, from generation to collaboration to deployment.

If TypoScale saved you from hand-calculating 1.333rem for the hundredth time, a ⭐ on GitHub means a lot.

What's your favorite type scale ratio? Drop it in the comments below 👇