Frequently Asked Questions
Everything you need to know about Typescale AI, from calculating modular scales to exporting design tokens for your system.
What is Typescale AI?
Typescale AI is an advanced typography scale generator and design token builder. It allows designers to create consistent type hierarchies based on modular scales, preview them in real-world layouts, and export production-ready typography tokens for design systems.
Who is Typescale AI designed for?
The tool is built for UI/UX designers, frontend developers, and design system architects. It bridges the gap between design and code: designers get visual control over hierarchy and rhythm, while developers get clean, compliant CSS variables and JSON tokens.
Is Typescale AI suitable for Design Systems?
Absolutely. Typescale AI is engineered specifically for design system workflows. It treats typography as data, allowing you to define base sizes, ratios, and utilitarian styles (like captions or labels) that can be exported directly into your codebase or documentation.
How does the typography scale calculation work?
You define a base font size (e.g., 16px) and select a modular scale ratio (such as Perfect Fourth or Golden Ratio). The algorithm then mathematically generates a harmonic set of sizes for headings (H1–H6) and supporting text, ensuring visual consistency across your UI.
Can I generate UI styles beyond standard Headings?
Yes. Unlike simple calculators, Typescale AI generates a complete UI typography system. You can create and fine-tune utilitarian styles like Captions, Labels, Buttons, and Helper text, ensuring every part of your interface has a defined design token.
Does the tool handle pixel rounding?
Yes. To avoid fractional values (like 12.8px) that cause rendering issues, Typescale AI offers smart rounding options. You can snap values to the nearest integer, floor/ceil, or use a 4px grid system to keep your typography tokens clean and developer-friendly.
Can I customize line-height and font weights?
Yes. You have full control over line-height (leading) ratios for both headings and body text to establish a vertical rhythm. You can also assign distinct font families and weights to different logic groups, managing complex hierarchies easily.
Does Typescale AI help with accessibility (WCAG)?
Yes. The tool includes a built-in contrast checker. It calculates the contrast ratio between your text and background colors in real-time, helping you ensure your typography meets WCAG AA and AAA standards for accessibility.
Can I preview typography in real layouts?
Yes. Instead of abstract lists, Typescale AI provides Real-time Page Previews (such as Dashboard, Article, or Landing Page contexts). This allows you to validate readability, spacing, and hierarchy in a realistic environment before exporting.
How do I export design tokens to CSS or JSON?
Once your scale is ready, you can export your entire system with one click. We support CSS Variables (Custom Properties) for direct web use and generic JSON design tokens compatible with tools like Style Dictionary, ensuring seamless handoff to developers.
Can I share my typography system with my team?
Yes. You can generate a unique shareable link containing all your settings. This makes it easy for design teams and developers to collaborate, review, and align on typography decisions without manually passing around specification files.
Ready to design your typography system?
Start creating harmonic modular scales and export them directly to your project today.
Open Editor