Modular type scale calculator with CSS export

Tool powered by Typescale on typescale.com.

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. This site 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

Type calculator and font calculator—golden ratio font sizes, modular e-scale steps, Google Fonts, and CSS export.

  1. Modular scale and golden ratio presets: Ratio options such as golden ratio, minor or major second and third, perfect fourth, and perfect fifth—or a custom numeric ratio for e-scale style rhythm.

  2. Body and heading hierarchy: Configure body, h1–h6, and caption roles separately—family, weight, line-height, letter-spacing, and color—instead of one-off pixel values.

  3. Google Fonts pairing: Search and select from a large catalog to audition body and heading families before you export CSS.

  4. CSS export for production: Copy generated rules, then map to design tokens and @font-face loading in your stack.

  5. Responsive levers: Adjust how the scale adapts (for example min width and whether scales inherit) so the preview fits multi-breakpoint 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

Build your scale on the site with the type calculator, then copy CSS for production.

  1. Pick a ratio and base size

    Set the body starting size and a golden-ratio or musical-interval preset that matches your product or marketing density.

  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 design tokens and @font-face loading in Figma or code.

Tips for better modular scales

Keep hierarchy clear and implementation maintainable.
  • 01

    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.

  • 02

    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.

  • 03

    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

Modular scales plus a stable tool path.

  • Stable directory 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.

  • The publisher does not run Typescale

    The calculator and exports live on typescale.com.

Frequently Asked Questions

Quick answers about this tool—open a question to read more.