What is the Typescale type calculator?

Typescale is a browser tool at typescale.com that builds a modular type scale from a base size and ratio, then outputs stepped sizes for body and headings with CSS export.

How do I use golden ratio font sizes?

Choose a golden-ratio or related preset on typescale.com, set your base body size, and let the calculator derive heading steps. Preview before you copy CSS.

What is a modular scale in typography?

A modular scale multiplies a base by a consistent ratio (major third, perfect fourth, etc.) so hierarchy stays predictable across a design system.

Can Typescale export production-ready CSS?

Yes. Copy generated CSS from the publisher app and adapt class names, variables, and font loading in your project.

Does Typescale work with Google Fonts?

Yes. The app integrates a large Google Fonts catalog for body and heading pairing in the embed.

Is this the official Typescale site?

Yes. Uwarp embeds https://typescale.com/.

Does Uwarp own Typescale?

No. Uwarp only embeds the public app; Pro and account terms are on typescale.com.

Why is the embed empty?

Open https://typescale.com/ in a new tab when framing, login, or Pro flows are blocked in the iframe.

Modular type scale calculator with CSS export

Tool powered by . Uwarp embeds typescale.com; accounts, Pro features, and exports are on the publisher site.

Typescale on typescale.com: type calculator, font calculator, golden ratio font sizes, modular scale, and CSS export with Google Fonts.

What is Typescale used for?

Typescale is aimed at digital designers and front-end developers who need a clear, consistent hierarchy without guessing one-off pixel values for every text style. You start with a base font size, choose a musical-interval-style ratio, and the tool derives a set of related sizes. From there, you can assign those sizes to body copy and heading levels, tune spacing and color for contrast, and export CSS to communicate decisions to engineering. Because it is tied to a broad font library, you can test how a scale feels with real families you might ship, not just generic system fonts. The app also offers community-oriented features (such as explore and boards) for discovering how others structure scales, though the exact set of features and limits may change with the product road map. Uwarp does not own Typescale; we surface it here so you can open the same experience next to the rest of your toolkit.

What you get on typescale.com

A visual type-scale builder with fonts, scale presets, and CSS-oriented output.

Modular scale presets: Ratio options such as minor or major second and third, perfect fourth, augmented fourth, and perfect fifth, plus a custom numeric ratio when you need a different rhythm.
Body and heading lanes: Configure body text and headings separately, including family, weight, line-height, letter-spacing, and color, so the hierarchy looks intentional, not one-size rescaled.
Google Fonts integration: Search and select from a large catalog of web fonts to audition pairings that ship through familiar hosting patterns.
CSS export workflow: Save or copy generated CSS to drop into a prototype, design handoff, or token draft before you formalize a design system.
Responsive levers: Adjust how the scale adapts (for example min width and whether scales inherit) so the preview fits multi-breakpoint product layouts.
Inspiration and boards: The app references exploration and saved boards; availability depends on the live product and your login or plan.

How to work through a type scale in Typescale

A practical order of operations for the embed above.

Pick a ratio and base size: Set the body starting size and a ratio that matches the density of your product or marketing page.
Style body, then headings: Choose a readable body family and weight, then contrast headings with weight and size steps from the scale.
Test responsive settings: Use the responsive panel to see whether your scale should shift at a minimum width or follow inherited rules.
Export and translate to tokens: Copy CSS, then map sizes to your design system tokens and component text styles in Figma or code.

Tips for better modular scales

Keep hierarchy clear and implementation maintainable.

Fewer size steps, clearer roles: Resist using every step of the scale in one screen; map levels to h1–h6 and body once, then reuse.
Line-height is part of the rhythm: Tighten headings slightly and loosen long body text; preview with real line lengths, not a single short line of lorem.
Check contrast on backgrounds: Set both text and background colors in the tool, then re-check in your theme with the same values.

Great for

Roles that benefit from an explicit, exportable type scale.

Design systems: Draft font-size steps before codifying them as tokens and components.
Marketing and landing pages: Align hero, section titles, and body with one ratio-driven ladder.
Product UI: Pair the scale with spacing tokens so type and layout move together.
Front-end developers: Start from generated CSS, then refactor into variables or a preprocessor.
Students and teams: Learn modular scales with immediate visual and CSS feedback in the browser.

Why open Typescale on Uwarp

Modular scales plus a stable embed path.

Stable Uwarp path: Link `/typescale` in design system docs and handoffs.
Consistent visual rhythm: Related sizes share one mathematical base.
Faster handoff: Named steps and CSS reduce “what is h3 here?” debates.
Uwarp does not run Typescale: The calculator and exports live on typescale.com.

Technical notes

Embed boundaries.

Embed source: https://typescale.com/ in an iframe; Pro and boards may need a full tab.
Output: Integrate generated CSS with your font loading, tokens, and theme variables.
If the frame is blank: Open typescale.com in a new tab or check blocker settings.