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: .
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.tsandtokenGenerators.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!
SOCIAL SHARE CARD GENERATOR