Type Scale Generator

A production-ready Type Scale Generator that generates harmonious typography systems using mathematical ratios. No guesswork. No inconsistency.

What It Does

Creates perfectly balanced font size hierarchies based on proven typographic scales. Choose your base size, pick a ratio, and watch your type system come together instantly.

Core Features:

• 100+ Google Fonts integrated with live preview

• Mathematical precision using classical ratios (Golden Ratio, Perfect Fourth, Major Third, etc.)

• Fluid typography with CSS clamp() for responsive scaling

• Multiple export formats: CSS, CSS Variables, SASS, Tailwind config

What Is a Type Scale Generator?

A type scale generator is a tool that produces a set of harmonically related font sizes based on 2 inputs: a base font size and a ratio. Feed it those 2 numbers, and it outputs a full progression of sizes, from small captions up to large display headings, all spaced by the same mathematical interval.

That output is the foundation of a working typographic hierarchy. Every heading level, body size, and label gets its value from the scale rather than from guesswork.

As of 2025, approximately 88% of all websites now use custom web fonts (HTTP Archive Web Almanac, 2025). With font adoption that widespread, a structured size system matters more than ever. Picking sizes at random creates inconsistency at scale.

How Is a Type Scale Generator Different from a Font Pairing Tool?

A font pairing generator helps you choose which typefaces work together visually. A type scale generator does something different entirely.

It handles sizing, not selection. Once you have chosen your typeface, the generator tells you what sizes those letters should appear at across every level of your interface.

Key distinction: Font pairing answers "which fonts?" Type scale generators answer "how big?"

What Does a Type Scale Generator Actually Output?

The output varies by tool, but most generators produce one of 3 formats:

• CSS custom properties (--text-sm, --text-base, --text-lg, etc.)
• Sass or Less variables for teams on older build setups
• CSS clamp() expressions for fluid, viewport-responsive sizes

Some tools, like Utopia.fyi, output fluid scales by default. Others, like modularscale.com, output static values you then adapt yourself.

How Does a Type Scale Generator Work?

The math is straightforward. Every size in the scale is calculated using this formula: size at step n = base size x ratio^n. Step 0 is your base. Step 1 multiplies base by the ratio once. Step 2 multiplies it twice, and so on.

Negative steps go below the base, producing smaller sizes for captions and labels. Positive steps go above it, producing heading sizes.

How the Base Size Affects the Entire Scale

The base font size anchors every other value in the system. Change the base, and every size shifts proportionally.

16px is the standard default for web body text, for a practical reason. Browsers default to 16px, and most users never change that setting.

WCAG 2.1 recommends text can be resized up to 200% without loss of content or functionality. Starting at 16px gives that resize headroom without producing unusably large body text at 200%.

Smaller bases (like 14px) produce a tighter scale overall. They work for dense UI contexts, like data tables or admin dashboards, but need careful review against the WCAG AA minimum of 16 CSS pixels for normal text.

How the Ratio Controls Visual Hierarchy

The ratio is where most of the visual decision-making happens. A small ratio produces subtle size differences between levels. A large ratio produces dramatic contrast.

Ratio	Name	Best Context
1.125	Major Second	Dense UI, mobile apps
1.25	Major Third	Balanced web and marketing sites
1.333	Perfect Fourth	Editorial content, blogs
1.618	Golden Ratio	Display-heavy, large-screen layouts

Higher ratios mean your H1 will be significantly larger than your body text. That creates strong visual hierarchy but can feel aggressive on smaller screens or in multi-column layouts.

What Are the Standard Type Scale Ratios?

There are 8 ratios in common use. They originate from musical interval theory, where the same proportional relationships that make chords sound harmonious also produce visually consistent size progressions.

Tim Brown and Scott Kellum formalized this connection in their 2010 work on modular scale, which became the reference framework behind most modern type scale generators.

Small Ratios: Subtle Contrast

Minor Second (1.067) produces sizes so close together they are nearly indistinguishable. Rarely useful for headings.

Major Second (1.125) works well for mobile apps and dense UI where screen real estate is limited. The difference between heading levels is clear enough to read but not visually jarring. Most design systems built for Android and iOS start here.

Minor Third (1.2) sits between subtle and moderate. It gives enough contrast for a 3-level heading structure without the largest headings becoming oversized on mobile. Good default for apps.

Mid-Range Ratios: The Most Common Choices

The Perfect Fourth (1.333) is the single most used ratio for web body copy contexts. It produces a balanced scale where the difference between body text and H1 is clear and proportional without being extreme. Most blog and marketing site generators default to this.

Major Third (1.25) comes in close second. It works across both dense UI and editorial layouts, which makes it the safer choice when a project spans multiple surface types.

Augmented Fourth (1.414) is less common but produces clean relationships because its ratio (the square root of 2) divides evenly into most grid systems.

Large Ratios: Display and Editorial Contexts

Perfect Fifth (1.5) creates significant contrast between scale steps. Best suited for editorial sites, landing pages, or anywhere a large H1 is the deliberate focal point of the layout.

The Golden Ratio (1.618) is the most dramatic standard ratio. It appears in classical architecture and art, and while it produces striking typographic contrast, it often needs correction at small viewport sizes. Took me a while to figure out that the golden ratio looks incredible at 1440px and completely falls apart on a 375px phone screen without fluid scaling.

What Is a Modular Scale and How Does It Relate to Type Scale Generators?

A modular scale is the mathematical concept. A type scale generator is the tool built to implement it. The distinction matters because "modular scale" refers to a specific theory, while "type scale generator" describes any tool that automates ratio-based size progression, whether or not it follows the original modular scale framework.

The Origin: Tim Brown and Scott Kellum

In 2010, Tim Brown and Scott Kellum introduced modularscale.com, establishing the first widely used web tool for generating ratio-based type scales. Their framework proposed that golden ratio proportions and musical interval ratios could systematically govern font size relationships across a design.

The original modularscale.com tool takes 2 inputs: a base font size and a ratio. It returns a sequence of sizes calculated by repeatedly multiplying or dividing the base by the ratio.

Before this: Designers picked sizes like 12px, 16px, 20px, 28px based on intuition or convention, with no underlying mathematical relationship between them.

Multi-Stranded Scales: Two Base Values

Standard modular scales use 1 base value. Multi-stranded scales use 2. The second base value introduces additional size options that fit between the standard scale steps, producing a denser and more flexible set of sizes.

This is useful when a single-ratio scale creates gaps that are too large. A 16px base with a 1.5 ratio, for example, jumps from 16px to 24px to 36px, skipping many potentially useful sizes in between. Adding a second strand at 18px fills some of those gaps.

In practice, most teams skip multi-stranded scales. The added complexity rarely justifies the benefit unless the design system serves a large number of distinct text roles.

Modular Scale vs. Arbitrary Size Picks

Many production sites still use arbitrary font sizes. The typical pattern: someone sets 14px, 18px, 24px, 32px, 48px, sometimes just copying what they saw on a previous project.

The problem is those sizes carry no inherent relationship to each other. At any given heading level, the size difference could feel too subtle or too extreme depending on context, because nothing enforces a consistent interval between steps.

Modular scale solves this. Every size is derived from the same formula, so the visual weight difference between H3 and H2 is proportionally identical to the difference between H2 and H1.

Which Type Scale Generators Are Used Most?

5 tools see consistent use across production design teams. They differ in output format, level of control, and how they handle responsive behavior. Google Fonts appears on roughly 54% of desktop websites (HTTP Archive, 2025), which partly explains why type-scale.com, which integrates Google Fonts directly, gets regular use.

Tools That Output Static Scales

Modularscale.com (Tim Brown) is the reference implementation. It outputs CSS variables and Sass. The interface is minimal: base size, ratio, and an output you can copy directly.

Type-scale.com adds a live visual preview with Google Fonts integration. You can switch fonts and see how the scale looks with actual text before copying the CSS. Useful for client presentations or rapid exploration.

Typescale.app targets Tailwind CSS projects specifically. Its output maps directly to Tailwind's config format, which saves the manual translation step most developers would otherwise need to do themselves.

Tools Integrated with Design Systems

Material Theme Builder (Google) includes a type scale system built into Material Design 3. The scale uses 5 roles: Display, Headline, Title, Body, and Label. Each role has 3 size variants (Large, Medium, Small), giving 15 defined type sizes total. Teams building on Material Design 3 rarely need a separate generator because the system is already decided.

Utopia.fyi stands apart from the others. It generates fluid type scales that use CSS clamp(), producing sizes that scale continuously across viewport widths rather than jumping at breakpoints. James Gilyead and Trys Mudford built Utopia specifically for teams who want responsive typography without writing @media queries for every font size. Many production design systems now cite Utopia as their fluid type source.

What Is a Fluid Type Scale and How Do Generators Handle It?

A fluid type scale uses CSS clamp() to interpolate font sizes continuously between a minimum and maximum value as the viewport width changes. There are no breakpoints. The size adjusts on every pixel of viewport change between the defined endpoints.

The syntax is: clamp(min, preferred, max). The preferred value is a calc() expression combining a fixed rem value and a vw value, which creates the slope between the minimum and maximum.

How Utopia.fyi Generates Fluid Scales

Utopia.fyi takes 4 inputs: a minimum viewport width, a maximum viewport width, a minimum base font size, and a maximum base font size. It then generates a complete set of clamp() CSS custom properties covering every scale step.

A typical Utopia output for a body size might look like: --step-0: clamp(1rem, 0.913rem + 0.435vw, 1.25rem). That single line covers every viewport width between the defined endpoints without any media queries.

Important tradeoff: Because the preferred value uses vw units, browser zoom does not scale the fluid portion correctly. Adrian Roselli's research on this issue (2022) confirmed that viewport units break zoom accessibility in some scenarios. The practical fix is to combine vw with rem in the preferred value, which Utopia does by default.

Fluid Scales vs. Static Scales: When Each Makes Sense

Context	Static Scale	Fluid Scale
Single-column editorial / blog	Workable	Preferred
Complex UI with grid layouts	Preferred	Tricky to manage
Design system with many text roles	Easier to predict	Requires careful min/max planning
Marketing / landing pages	Works	Better visual result

Fluid scales shine on content-heavy pages where the relationship between heading and body text should feel proportional at every screen width. Static scales are simpler to implement and easier to hand off to developers who are not familiar with clamp().

How Are Type Scale Generators Used in Design Systems?

A type scale generator produces raw size values. A design system then wraps those values in a naming convention, connects them to components, and documents the rules for when each size applies.

The generator is the calculation step. The design system is the governance layer on top of it.

Type Scale Tokens in CSS and Figma

Design tokens are the standard way to implement a generated scale in production. The typical naming pattern uses semantic size labels rather than numeric values:

• --text-xs
• --text-sm
• --text-base
• --text-lg
• --text-xl
• --text-2xl through --text-5xl

In Figma, the same values map to text styles or (in newer workflows) Figma variables. When a developer pulls a token named --text-lg and a designer references a Figma variable with the same name, the two environments stay in sync without manual translation.

This is where type scale generators fit into brand guidelines work. The scale values become part of the brand style guide, documented as a token set that both design and development tools reference.

Type Scale in Tailwind CSS Projects

Tailwind ships with its own default type scale: text-xs through text-9xl. The default values are not derived from a single modular ratio. They are a hand-curated set that works well for most projects out of the box.

Teams that need a strict modular ratio replace Tailwind's defaults in tailwind.config.js under the fontSize key. Typescale.app outputs directly in this format, which is one reason it sees use on Tailwind projects specifically.

One thing I have seen developers skip: line height. Tailwind's default line heights are decoupled from font sizes and use their own utility classes. When you override the font size scale, you often also need to revisit line height pairings, or the spacing rhythm that the leading creates will feel off at larger sizes.

Material Design 3 Type Roles

Google's Material Design 3 does not use a pure modular scale. Instead it defines 15 named type roles across 5 categories:

• Display: Large, Medium, Small (decorative, highest visual weight)
• Headline: Large, Medium, Small (section titles)
• Title: Large, Medium, Small (component labels, navigation)
• Body: Large, Medium, Small (primary reading content)
• Label: Large, Medium, Small (captions, metadata, UI controls)

This is a role-based system rather than a pure ratio system. Teams building on Android or Material Web can map those 15 roles to a generated scale, but the role names take precedence over the size hierarchy in the design language.

What Accessibility Standards Apply to Type Scales?

Low-contrast text affected 79.1% of homepages in 2025, making it the single most persistent accessibility failure on the web (WebAIM Million, 2025).

Font size decisions feed directly into that problem. A type scale that pushes body text below 16px or produces label sizes under 12px creates contrast and readability failures that automated tools flag immediately.

What WCAG 2.1 Actually Requires

WCAG 2.1 does not set a hard minimum pixel size. What it mandates is resizability and contrast.

The 2 core requirements:

• Success Criterion 1.4.4: text must be resizable up to 200% without loss of content or functionality
• Success Criterion 1.4.3: normal text below 24px requires a contrast ratio of at least 4.5:1

Practically, 16px is the de facto baseline. Most accessibility guidelines treat it as the floor for body text, and browsers default to it.

How Small Type Scale Ratios Create Accessibility Risks

A Minor Second ratio (1.067) applied to a 14px base can produce caption and label sizes around 12px or lower. That is technically within range, but hits the edge of readable for many users.

The real risk: when viewport-relative units are used in a fluid type scale, browser zoom may not scale the fluid portion correctly.

The fix is combining vw with rem in the preferred value of any clamp() expression. This ensures user font size preferences and zoom behavior both apply, not just screen width.

rem vs px in Type Scale Output

px values: fixed, do not respond to browser font size preferences set by the user.

rem values: relative to the root font size, so they scale when a user changes their browser default.

Most accessibility-first design systems output type scale tokens in rem. WCAG does not prohibit px, but rem is the safer and more common choice for body text and labels specifically.

How Do Type Scale Generators Handle Variable Fonts?

Variable fonts reached 33% of desktop websites and 34% of mobile sites in 2024, up 4-5 percentage points since 2022 (HTTP Archive Web Almanac, 2024).

A type scale generator sets size values. Variable fonts add a second layer: axes that adjust weight, width, and optical size at any given scale step.

The Optical Size Axis and Type Scale Steps

The optical size axis (opsz) is the variable font axis most relevant to type scale design. It adjusts letterform details based on the intended display size.

At large display sizes, opsz produces thinner strokes and wider spacing. At small caption sizes, it produces slightly heavier strokes and tighter forms for legibility. A type scale that goes from 12px to 60px benefits from pairing each scale step with a matched opsz value rather than using the same optical size setting across all levels.

The CSS property font-variation-settings: 'opsz' 48 sets this manually. Some variable fonts handle it automatically via the font-optical-sizing: auto property.

Which Generators Support Variable Font Output

Tool	Variable Font Support	Output Format
Utopia.fyi	Fluid clamp() scales only	CSS custom properties
Modularscale.com	Static sizes, no axis control	CSS / Sass variables
Type-scale.com	Static sizes with Google Fonts preview	CSS classes
Wakamai Fondue	Inspects variable font axes	Axis range analysis

Wakamai Fondue is not a type scale generator, but it is the standard tool for inspecting what axes a variable font actually supports before building a scale around it.

Pairing a Generated Scale with a Variable Font in CSS

Practical pattern: generate the size scale first, then layer axis settings per step.

A production CSS approach looks like this:

--text-sm: clamp(0.875rem, 0.82rem + 0.27vw, 1rem);
h1 { font-size: var(--text-4xl); font-variation-settings: 'wght' 700, 'opsz' 48; }
p  { font-size: var(--text-base); font-variation-settings: 'wght' 400, 'opsz' 16; }

The scale handles size progression. The font-variation-settings handles optical behavior at each level.

What Is the Difference Between a Type Scale and a Vertical Rhythm System?

Type scale and vertical rhythm are two separate systems that work together. Conflating them is one of the more common mistakes I see in design system documentation.

A type scale governs font size relationships. Vertical rhythm governs the spacing between lines and elements, based on a repeated baseline unit.

How the Two Systems Interact

Vertical rhythm starts from line height. If body text is set at 16px with a line height of 24px, the baseline unit is 24px. Every spacing value on the page, margins, padding, gaps, should ideally be a multiple of 24px.

Where type scale feeds into this: each heading size in the scale needs a line height that is also a multiple of the baseline unit. A scale step that produces 31px needs a line height of either 32px or 40px to stay on the grid.

Most design system teams building on a 4px or 8px base grid round their generated scale values to the nearest multiple of 4. One B2B design system team documented exactly this: they used a Major Second scale starting at 14px and rounded each output to the nearest 4px increment to keep the scale aligned with their component spacing grid (Design Systems Collective, 2025).

Why Pure Vertical Rhythm Is Harder on the Web Than in Print

In print, every element sits on a fixed grid. On the web, images, embeds, and dynamic content break the grid constantly.

The practical approach most teams use: treat vertical rhythm as a spacing guide, not a hard constraint. Set line heights and margins in multiples of the baseline unit where practical. Let the grid break on images and interactive components without trying to compensate.

Gridlover combines both systems into a single output: you enter a base font size and a scale ratio, and it returns font sizes, line heights, and margins all tuned to work together as a coordinated vertical rhythm system.

How to Implement a Generated Type Scale in CSS?

The standard pattern is CSS custom properties on :root, named with semantic size tokens. This gives every component in the codebase a single source of truth for type sizes.

Implementing a Static Scale with CSS Custom Properties

Standard implementation:

:root {
--text-xs:   0.75rem;    /* 12px */
--text-sm:   0.875rem;   /* 14px */
--text-base: 1rem;       /* 16px */
--text-lg:   1.25rem;    /* 20px */
--text-xl:   1.5625rem;  /* 25px */
--text-2xl:  1.953rem;   /* 31px */
--text-3xl:  2.441rem;   /* 39px */
--text-4xl:  3.052rem;   /* 49px */
}

These values come from a 16px base with a Major Third ratio (1.25).

3 common mistakes teams make during implementation:

• Mixing px and rem within the same scale (breaks zoom behavior)
• Hardcoding values directly in component CSS instead of referencing tokens
• Skipping line height entirely, leaving browser defaults in place

Implementing a Fluid Scale with CSS Clamp()

Fluid scale output from Utopia.fyi looks like this in production:

:root {
--step--1: clamp(0.833rem, 0.793rem + 0.2vw,   0.938rem);
--step-0:  clamp(1rem,     0.913rem + 0.435vw,  1.25rem);
--step-1:  clamp(1.2rem,   1.07rem  + 0.652vw,  1.563rem);
--step-2:  clamp(1.44rem,  1.242rem + 0.989vw,  1.953rem);
}

Key rule: the preferred value always combines a rem anchor and a vw slope. Never use bare vw alone, as it ignores user font size preferences and breaks zoom accessibility.

Tailwind CSS projects replace the default fontSize values in tailwind.config.js with the generated tokens. The PX to REM conversion step is worth running before finalizing values, since Tailwind's config works best in rem units.

How Do Type Scale Generators Fit into a Typography Audit?

A typography audit maps every font size currently in use on a site against a consistent scale. The generator becomes the target state you are reverse-engineering toward.

Tools like CSSstats.com extract all unique font sizes from a live site's CSS in one scan, showing exactly how many distinct values exist across the codebase. Most sites that haven't used a scale have far more font sizes than they need.

How to Reverse-Engineer an Existing Scale

Plot the current font sizes on paper or in a spreadsheet. Then calculate the ratio between each adjacent size. If the ratios are inconsistent (1.18, 1.31, 1.20, 1.42) the existing sizing is arbitrary.

The goal: identify which ratio most closely fits the majority of existing sizes. That ratio becomes your corrective scale.

Steps for a practical audit:

• Export all font-size values using CSSstats.com or browser DevTools
• Count unique sizes and identify which are actually used vs. defined but orphaned
• Generate a target scale using the closest matching ratio
• Map each current size to its nearest scale step
• Flag any size that is more than 10% away from the nearest step as a candidate for removal

Rebuilding vs. Replacing an Existing Scale

Rebuilding preserves familiarity and reduces the scope of changes across a large codebase. Replacing produces a cleaner result but touches every component that references font size tokens.

Rebuilding works best when the existing sizes are close to a standard ratio and only a few outliers need correction.

Replacing makes more sense when an audit reveals 20+ unique font sizes with no underlying system, which is more common than most teams expect. The typographic hierarchy problems caused by an unsystematic size set tend to compound over time and become harder to fix incrementally.

What Are the Limitations of Type Scale Generators?

A generated scale is a mathematical output, not a design decision. The math is consistent. The visual result still needs design judgment to work.

Here are the 4 categories where generators fall short.

Mathematical Consistency Does Not Equal Optical Consistency

Two fonts at the same px value can look dramatically different in perceived size. Futura at 16px reads smaller than Inter at 16px because of differences in x-height and cap height.

A generator that outputs 31px for H2 is giving you a number. Whether 31px reads as a proper heading in your chosen typeface depends entirely on that font's specific metrics. Manual optical correction is always the final step.

Single-Ratio Scales Break Down in Complex UI

A single ratio produces one set of sizes. A complex UI with distinct text roles (card titles, navigation labels, data table headers, tooltips, body content, page headings) often needs more granular control than a single modular scale provides.

The common fix: use a tighter ratio (1.125 or 1.2) for UI components and a wider ratio (1.333 or 1.5) for editorial content, defined as 2 separate scales within the same design system.

Material Design 3 addresses this by using role-based definitions rather than a pure ratio, which is a practical acknowledgment that a single modular scale is not enough for a full product interface.

Generator Output Is a Starting Point

No generator accounts for multilingual requirements. CJK scripts, Arabic, and Devanagari all have different optical densities at the same px value.

Arphic Technology's 2024 Unicode font family, which supports over 50 Asian languages and 65,000 glyphs, demonstrates the scale of what multilingual typography actually requires. A type scale generator produces Latin-optimized values. Multilingual teams need optical size adjustments per script on top of the generated scale.

Beyond language, the generator also does not account for:

• Font spacing metrics (tracking and kerning vary by typeface and need manual review at large display sizes)
• Line height relationships (each scale step needs a matched line height, which generators rarely output)
• Context-specific overrides (a pull quote at the same size as a heading needs different spacing treatment)

The output is the starting point, not the finished system. Every generated scale requires design review before it ships.

FAQ on Type Scale Generators

What is a type scale generator?

A type scale generator is a tool that calculates a set of harmonically related font sizes from 2 inputs: a base font size and a ratio. It outputs a complete size progression for headings, body text, and labels without manual calculation.

What is the best ratio for a type scale?

The Perfect Fourth (1.333) is the most widely used ratio for web projects. It creates clear contrast between heading levels without producing oversized headings on small screens. Major Third (1.25) is the safer choice for complex UI.

What base font size should I use?

Use 16px as your base. Browsers default to it, most users never change it, and WCAG 2.1 AA treats 16 CSS pixels as the practical minimum for normal body text readability.

What is the difference between a type scale and a modular scale?

A modular scale is the mathematical theory behind ratio-based size progressions. A type scale generator is the tool that implements it. Tim Brown and Scott Kellum formalized the modular scale framework in 2010 at modularscale.com.

What is a fluid type scale?

A fluid type scale uses CSS clamp() to interpolate font sizes continuously between a minimum and maximum as viewport width changes. No breakpoints required. Utopia.fyi is the standard tool for generating fluid scales with proper rem and vw combinations.

How do I implement a type scale in CSS?

Define your scale as CSS custom properties on :root, using rem units. Name tokens semantically: --text-sm, --text-base, --text-lg. Reference those tokens in components rather than hardcoding values directly.

Which type scale generator tools are most used?

The 5 tools used most in production are modularscale.com, type-scale.com, typescale.app, Utopia.fyi, and Material Theme Builder. Each differs in output format. Utopia.fyi is the only one that generates fluid clamp() scales by default.

Does a type scale generator work with variable fonts?

Generators produce size values only. Variable fonts add axes like weight and optical size on top of those values. You pair the two manually using font-variation-settings per scale step in your CSS.

What is the difference between a type scale and vertical rhythm?

A type scale controls font size relationships. Vertical rhythm controls line height and spacing cadence based on a baseline unit. The two systems work together but govern different dimensions of your typography.

What are the limitations of type scale generators?

Generators produce mathematically consistent sizes, not optically correct ones. They do not account for x-height differences between typefaces, multilingual requirements, or line height pairings. Every generated scale needs design review before shipping.