Typescale: modular typography scale and CSS

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.

1. 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.
2. 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.
3. Google Fonts integration: Search and select from a large catalog of web fonts to audition pairings that ship through familiar hosting patterns.
4. CSS export workflow: Save or copy generated CSS to drop into a prototype, design handoff, or token draft before you formalize a design system.
5. Responsive levers: Adjust how the scale adapts (for example min width and whether scales inherit) so the preview fits multi-breakpoint product layouts.
6. 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.

1. Pick a ratio and base size: Set the body starting size and a ratio that matches the density of your product or marketing page.
2. Style body, then headings: Choose a readable body family and weight, then contrast headings with weight and size steps from the scale.
3. Test responsive settings: Use the responsive panel to see whether your scale should shift at a minimum width or follow inherited rules.
4. 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.

1. 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.
2. 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.
3. 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.

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

Why use a typescale tool?

Reasons teams adopt modular scales instead of ad hoc sizes.

1. Consistent visual rhythm: Related sizes feel coherent because they share one mathematical base.
2. Faster handoff: Named steps and CSS reduce back-and-forth on “what is h3 here?”
3. Fewer one-off values: You resist sprinkling random px that break maintenance later.
4. Exploration with real fonts: Google Fonts preview helps you pick families that work at every step.
5. Educational: Presets map to common design ratios, which builds typography intuition.

Technical notes

Browser-based access and output expectations.

1. Source: Third-party app at https://typescale.com/; features and Pro availability may change on the live site.
2. Output: Plan to integrate generated CSS with your stack’s font loading, theming, and variable conventions.
3. Account: Some flows reference login, boards, or “Go Pro”; follow Typescale for current entitlements and limits.

Frequently Asked Questions

Have questions? We have answers.