Art

Build a Typography Scale Calculator with AI

Calculate mathematically harmonious type scales using classic ratios like the golden ratio, major third, and perfect fifth. Preview every size level with real fonts, then export ready-to-use CSS custom properties, Tailwind config values, or design token JSON — all in one clean browser tool.

Build Prompt

Copy this prompt into Claude Code

Build a static HTML typography scale calculator. Dark theme: background #0a0a0f, surfaces #12121a, borders #1a1a2a, accent #c026d3 (fuchsia). Pure vanilla JS, no dependencies. Controls (top panel): Base size input (default 16px), Scale ratio dropdown with named options: Minor Second (1.067), Major Second (1.125), Minor Third (1.200), Major Third (1.250), Perfect Fourth (1.333), Augmented Fourth (1.414), Perfect Fifth (1.500), Golden Ratio (1.618), Custom (manual input). Number of steps above base (1–8) and below base (1–4) sliders. Base line-height input (default 1.5). Font family picker (loads from Google Fonts API: serif/sans-serif/monospace category tabs with 12 popular options each). Preview text input (default "The quick brown fox"). Scale display: Vertical list of all steps, each row shows: step name (xs/sm/base/lg/xl/2xl etc.), pixel size, rem value, live text preview rendered at that exact size in the chosen font, line-height suggestion, copy-individual-value button. Export panel (tabbed): CSS Variables tab — generates `--text-xs: 0.75rem; --leading-xs: 1.6;` etc. Tailwind Config tab — generates `fontSize` object for tailwind.config.js. Design Tokens tab — JSON W3C format with type "dimension". Copy all button per tab. Comparison mode: show two scales side-by-side with different ratios for quick A/B evaluation. Share: encode all settings in URL hash for shareable links. SEO: title "Typography Scale Calculator — Modular Type Scale Generator", JSON-LD SoftwareApplication. Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].

Make It Yours

Fluid Typography

Add a clamp() generator that creates fluid font sizes scaling between two viewport breakpoints automatically.

Accessibility Checker

Warn when any scale step falls below WCAG minimum size recommendations for body text or UI elements.

Vertical Rhythm Mode

Calculate line heights and margins to maintain a perfect baseline grid across all type sizes.

Figma Variables Export

Export scale as Figma Variables JSON so designers can import sizes directly into their Figma workspace.

Dark/Light Preview Toggle

Preview the type scale on both a dark and light background to check contrast and readability.

Paragraph Preview

Show a full paragraph at each scale level in a realistic article layout with headings and body copy.

Update Prompt

Update Prompt — Add new export format or font options

Add a new export tab to the Typography Scale Calculator for [format, e.g. "SCSS variables" or "iOS SwiftUI TextStyle mapping"]. Show the correct syntax for each scale step and include a copy-all button. Also add [N] new Google Font options to the font picker under the [serif/sans-serif/monospace] category. Redeploy.

SEO Tips

Target "modular scale calculator", "type scale generator", and "CSS font size calculator" — all high-intent tool searches.
Write a guide on "What is a modular type scale and why it matters" to attract inbound links from design blogs.
Add JSON-LD FAQ schema answering common questions like "What ratio should I use for body text?"
Create comparison pages: "Golden Ratio vs Perfect Fourth type scale" for informational search traffic.
List the tool on design resource sites (Typewolf, Sidebar.io, Smashing Magazine tools section) for referral links.

Monetization Ideas

Sell pre-configured scale presets for popular frameworks (Tailwind, Bootstrap, Material) as a paid download.
Offer a team plan that saves and syncs scales across multiple projects with named versioning.
Affiliate link to typography courses on Skillshare or Frontend Masters shown after export.
Embed as a paid plugin or widget inside design tools like Webflow or Framer.
Charge for the Figma Variables export feature while keeping CSS/Tailwind output free.

Related Ideas

Ready to build your Typography Scale Calculator?

Copy the prompt above and paste it into Claude Code. Your type scale tool will be live in minutes.

Get Started