Type Scale Generator: Build Harmonious Typography Systems

Getting font sizes right is harder than it looks. Pick arbitrary numbers and your headings fight each other. Your h1 looks too big, your h4 looks too small, and the whole thing feels off.

TypeScale Pro fixes this with math. It generates typography scales using proven ratios like the Golden Ratio (1.618), Perfect Fourth (1.333), and Major Third (1.25). These aren't random—they're the same proportions that musicians use for harmonious intervals and architects use for pleasing structures.

This free type scale generator gives you a complete font size system in seconds. Configure your base size, pick a ratio, and export production-ready code. CSS variables, Tailwind configuration, SCSS mixins, W3C Design Tokens—whatever your stack needs.

And unlike basic calculators, TypeScale Pro includes fluid typography with CSS clamp(), WCAG accessibility checking, Google Fonts integration, and a URL analyzer that extracts typography from any website. It's a complete typography toolkit, not just a calculator.

How to Use This Type Scale Calculator

Building a typography system takes about two minutes. Here's the workflow:

Step 1: Set Your Base Size

The base size is your reference point—typically body text. The default is 16px, which browsers use as their default font size. For reading-heavy sites, try 18px. For dense UIs, 14px might work.

Enter your base size in the Scale panel on the left.

Step 2: Choose a Scale Ratio

Select a mathematical ratio that determines how font sizes grow. Each step up multiplies by the ratio, each step down divides by it.

Available ratios:

Ratio	Value	Best For
Minor Second	1.067	Compact UI, minimal contrast
Major Second	1.125	Subtle hierarchy, data-dense apps
Minor Third	1.2	Balanced scales, general purpose
Major Third	1.25	Web standards, most projects
Perfect Fourth	1.333	Bold hierarchy, marketing sites
Augmented Fourth	1.414	Strong contrast, editorial
Perfect Fifth	1.5	Dramatic headings, presentations
Golden Ratio	1.618	Maximum impact, hero sections
Custom	Any	Your own ratio

Step 3: Configure Scale Steps

Decide how many sizes you need above and below your base:

• Steps down: Smaller sizes for captions, labels, footnotes (xs, sm)
• Steps up: Larger sizes for headings (lg, xl, 2xl, 3xl, etc.)

A typical setup uses 2 steps down and 4-6 steps up, giving you sizes from small captions to large hero headings.

Step 4: Select Fonts

Use the font pickers to choose Google Fonts for body and heading text:

• Body Font: For paragraphs and running text—prioritize readability
• Heading Font: For titles and headlines—can be more expressive

Adjust weight and line height for each. Headings typically use tighter line heights (1.1-1.3) than body text (1.5-1.7).

Step 5: Enable Fluid Typography (Optional)

Toggle "Enable Fluid" to generate responsive font sizes that scale smoothly between viewport widths. Instead of fixed breakpoints, you get CSS clamp() values that interpolate sizes.

Choose a preset:

• Mobile: 320px → 768px (mobile-first)
• Full Range: 320px → 1200px (covers most devices)
• Desktop: 768px → 1440px (larger screens)

Step 6: Check Accessibility

Switch to the Accessibility tab to verify:

• Contrast ratio between text and background colors
• WCAG compliance (AA requires 4.5:1, AAA requires 7:1)
• Large text thresholds (different requirements for 18px+ or 14px+ bold)

Step 7: Export Your Scale

Click the Export button and choose your format:

• CSS - Standard properties with optional variables
• CSS Variables - Custom properties in :root
• SCSS - Variables and mixins for Sass projects
• Tailwind - Configuration for tailwind.config.js
• Tokens - W3C Design Tokens JSON format
• PDF - Style guide document for sharing

Copy or download. Done.

What is a Typographic Scale?

A typographic scale is a sequence of font sizes derived from a mathematical ratio. Instead of picking sizes randomly (14px, 18px, 24px, 36px), you calculate them from a consistent multiplier.

The Math Behind Type Scales

Starting from a base size, each step multiplies or divides by the ratio:

Base: 16px
Ratio: 1.25 (Major Third)

Step -2: 16 ÷ 1.25 ÷ 1.25 = 10.24px (xs)
Step -1: 16 ÷ 1.25 = 12.8px (sm)
Step  0: 16px (base)
Step +1: 16 × 1.25 = 20px (lg)
Step +2: 16 × 1.25 × 1.25 = 25px (xl)
Step +3: 16 × 1.25^3 = 31.25px (2xl)
Step +4: 16 × 1.25^4 = 39.06px (3xl)

This creates sizes that relate harmoniously to each other because they share a common mathematical foundation.

Why Ratios Create Visual Harmony

Musical scales work because the frequencies relate through simple ratios. A perfect fifth (1.5) sounds consonant because the frequencies align predictably.

Typography works the same way. When font sizes share a ratio, they create visual rhythm. Your eye perceives the relationship even if you can't articulate why it feels "right."

The Golden Ratio (1.618) appears throughout nature—spiral shells, flower petals, human proportions. That's why it's been used in art and architecture for millennia. It's not magic, just math that humans find pleasing.

Common Scale Ratios Explained

Minor Second (1.067) - Barely noticeable steps. Use when you need many sizes with minimal contrast. Good for dense data interfaces where you want subtle differentiation.

Major Second (1.125) - Small but perceptible steps. Works for compact UIs like dashboards where space is tight but you still need hierarchy.

Minor Third (1.2) - The most balanced ratio. Noticeable contrast without dramatic jumps. A safe default for many projects.

Major Third (1.25) - Clear hierarchy with comfortable reading. This is what most web typography guides recommend as a starting point.

Perfect Fourth (1.333) - Bold jumps between sizes. Creates strong visual hierarchy. Popular for marketing sites and landing pages.

Augmented Fourth (1.414) - Also known as the square root of 2. Creates even stronger contrast while maintaining mathematical precision.

Perfect Fifth (1.5) - Dramatic size differences. Your h1 will be significantly larger than h2. Use for editorial layouts with big hero headings.

Golden Ratio (1.618) - Maximum visual impact. Creates the most dramatic hierarchy. Best for hero sections and display typography, not dense content.

Fluid Typography: The Modern Approach

Fixed font sizes create awkward jumps at breakpoints. Fluid typography solves this with CSS clamp(), smoothly interpolating sizes between viewport widths.

How CSS clamp() Works

The clamp() function takes three values:

font-size: clamp(minimum, preferred, maximum);

• Minimum: The smallest the size can be
• Preferred: A calculation that scales with viewport
• Maximum: The largest the size can be

For typography:

h1 {
  /* Scales from 32px at 320px viewport to 64px at 1200px viewport */
  font-size: clamp(2rem, 1rem + 4vw, 4rem);
}

Benefits of Fluid Typography

Smooth scaling - No jarring jumps at breakpoints. Sizes interpolate linearly as the viewport changes.

Fewer breakpoints - You don't need to define font sizes for every screen width. One clamp() declaration handles everything.

Proportional hierarchy - All sizes scale together, maintaining their relationships across devices.

Better reading experience - Text adapts naturally to screen size without dramatic shifts.

TypeScale Pro Fluid Generation

Enable fluid typography and configure:

1. Viewport range: From 320px (mobile) to 1200px (desktop) is typical
2. Base size range: How much the base should grow (14px → 18px is common)

The generator calculates clamp() values for every step in your scale:

--font-size-base: clamp(0.875rem, 0.75rem + 0.625vw, 1.125rem);
--font-size-lg: clamp(1.094rem, 0.938rem + 0.781vw, 1.406rem);
--font-size-xl: clamp(1.367rem, 1.172rem + 0.977vw, 1.758rem);
--font-size-2xl: clamp(1.709rem, 1.465rem + 1.221vw, 2.197rem);

Choosing the Right Base Size

The base size sets the foundation for everything else. Get it wrong and your entire scale feels off.

Standard Web Base: 16px

Browsers default to 16px for a reason—it's readable on most screens at typical viewing distances. It's also mathematically convenient since 1rem = 16px by default.

Use 16px when:

• Building general-purpose websites
• You want maximum browser consistency
• Your content mixes text with interactive UI

Larger Base: 18-20px

Larger base sizes improve readability for long-form content. Reading-focused sites benefit from bigger text.

Use 18-20px when:

• Building blogs, documentation, or articles
• Your audience includes older users
• Text is the primary content (not UI controls)

Smaller Base: 14px

Smaller sizes fit more information on screen. Data-dense applications often need compact typography.

Use 14px when:

• Building dashboards or admin panels
• Screen real estate is at a premium
• Users scan rather than read

Testing Your Base Size

The right base size depends on:

• Line length: Longer lines need larger text. 65-75 characters per line is optimal.
• Font choice: Some typefaces render smaller than others at the same pixel size.
• Viewing distance: Desktop monitors are further away than phones.
• User needs: Consider accessibility requirements.

Use the preview panel to test how your scale looks with actual content before committing.

Using Type Scales in CSS

CSS Custom Properties

The most flexible approach uses CSS variables:

:root {
  /* Scale values */
  --font-size-xs: 0.64rem;
  --font-size-sm: 0.8rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.563rem;
  --font-size-2xl: 1.953rem;
  --font-size-3xl: 2.441rem;
  --font-size-4xl: 3.052rem;
}

/* Apply to elements */
body {
  font-size: var(--font-size-base);
  line-height: 1.6;
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

small, .caption {
  font-size: var(--font-size-sm);
}

Tailwind CSS Configuration

Add your scale to tailwind.config.js:

// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      'xs': ['0.64rem', { lineHeight: '1.5' }],
      'sm': ['0.8rem', { lineHeight: '1.5' }],
      'base': ['1rem', { lineHeight: '1.6' }],
      'lg': ['1.25rem', { lineHeight: '1.5' }],
      'xl': ['1.563rem', { lineHeight: '1.4' }],
      '2xl': ['1.953rem', { lineHeight: '1.3' }],
      '3xl': ['2.441rem', { lineHeight: '1.2' }],
      '4xl': ['3.052rem', { lineHeight: '1.1' }],
    },
  },
}

Use in your HTML:

<h1 class="text-4xl font-bold">Hero Heading</h1>
<h2 class="text-3xl font-semibold">Section Title</h2>
<p class="text-base">Body text with comfortable reading size.</p>
<span class="text-sm text-gray-600">Caption or metadata</span>

Tailwind v4 Configuration

Tailwind v4 uses CSS-first configuration:

@theme {
  --font-size-xs: 0.64rem;
  --font-size-sm: 0.8rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.563rem;
  --font-size-2xl: 1.953rem;
  --font-size-3xl: 2.441rem;
  --font-size-4xl: 3.052rem;
}

SCSS Variables and Mixins

For Sass projects:

// _typography.scss
$font-size-xs: 0.64rem;
$font-size-sm: 0.8rem;
$font-size-base: 1rem;
$font-size-lg: 1.25rem;
$font-size-xl: 1.563rem;
$font-size-2xl: 1.953rem;
$font-size-3xl: 2.441rem;
$font-size-4xl: 3.052rem;

// Map for iteration
$font-sizes: (
  'xs': $font-size-xs,
  'sm': $font-size-sm,
  'base': $font-size-base,
  'lg': $font-size-lg,
  'xl': $font-size-xl,
  '2xl': $font-size-2xl,
  '3xl': $font-size-3xl,
  '4xl': $font-size-4xl,
);

// Mixin for applying sizes
@mixin text-size($size) {
  font-size: map-get($font-sizes, $size);
}

// Usage
h1 {
  @include text-size('4xl');
  line-height: 1.1;
}

W3C Design Tokens

For design system tooling:

{
  "typography": {
    "scale": {
      "xs": {
        "$type": "dimension",
        "$value": "0.64rem",
        "$description": "Extra small text, captions"
      },
      "sm": {
        "$type": "dimension",
        "$value": "0.8rem",
        "$description": "Small text, labels"
      },
      "base": {
        "$type": "dimension",
        "$value": "1rem",
        "$description": "Body text, paragraphs"
      },
      "lg": {
        "$type": "dimension",
        "$value": "1.25rem",
        "$description": "Large text, h5"
      },
      "xl": {
        "$type": "dimension",
        "$value": "1.563rem",
        "$description": "Extra large, h4"
      },
      "2xl": {
        "$type": "dimension",
        "$value": "1.953rem",
        "$description": "2x large, h3"
      },
      "3xl": {
        "$type": "dimension",
        "$value": "2.441rem",
        "$description": "3x large, h2"
      },
      "4xl": {
        "$type": "dimension",
        "$value": "3.052rem",
        "$description": "4x large, h1"
      }
    }
  }
}

URL Analyzer: Extract Typography from Any Site

See a website with typography you like? The URL Analyzer extracts its settings so you can recreate or adapt them.

What It Detects

Enter any URL and the analyzer extracts:

• Font families: Which Google Fonts or system fonts are used
• Font sizes: Actual computed sizes for headings and body
• Suggested ratio: The mathematical ratio that best matches the detected scale
• Colors: Primary text and background colors
• Line heights: Body and heading line heights

How to Use It

1. Switch to the "Analyze URL" tab
2. Enter a website URL
3. Click Analyze
4. Review the detected typography
5. Click "Apply" to use those settings in your scale

This is useful for:

• Matching a client's existing brand typography
• Learning from well-designed sites
• Migrating typography to a new design system
• Benchmarking your scale against competitors

Accessibility and WCAG Compliance

Typography accessibility isn't just about color contrast—font sizes and weights matter too.

WCAG Font Size Requirements

WCAG distinguishes between "normal" and "large" text:

• Large text: 18px (14pt) or larger, OR 14px (11pt) or larger when bold
• Normal text: Anything smaller than large text

Large text has relaxed contrast requirements because it's inherently more readable:

Level	Normal Text	Large Text
AA	4.5:1	3:1
AAA	7:1	4.5:1

Using the Accessibility Tab

TypeScale Pro's Accessibility tab shows:

1. Contrast Checker: Live preview of your text/background combination with exact ratio
2. Pass/Fail Indicators: Clear AA and AAA status for both normal and large text
3. Font Size Guidelines: Table showing which scale steps qualify as large text

Tips for Accessible Typography

Minimum body size: Don't go below 14px for body text. 16px is safer.

Line height matters: Cramped text is harder to read. Body text should use 1.5-1.7 line height.

Weight affects legibility: Light fonts (300 weight) can be hard to read at small sizes. Use 400+ for body text.

Don't rely on size alone: Combine size differences with weight, color, or spacing for clear hierarchy.

Test with real users: Automated checks catch obvious issues, but real-world testing reveals more.

Component Preview Templates

The Preview tab shows how your scale works in realistic contexts:

Blog Post Template

Shows headings, body text, and metadata in a typical article layout. Tests:

• Heading hierarchy (h1 → h4)
• Body text readability
• Caption and metadata sizes
• Quote and list formatting

Landing Page Template

Marketing-focused layout with:

• Hero heading (largest sizes)
• Feature sections
• Call-to-action text
• Supporting copy

Dashboard Template

Dense interface with:

• Compact headings
• Data labels
• Table text
• Status indicators

Use these to verify your scale works for your actual use case before exporting.

Best Practices for Typography Systems

Start with Content, Not Aesthetics

Before picking ratios and sizes, understand your content:

• How long are typical paragraphs?
• How many heading levels do you need?
• Will users read deeply or scan?
• What devices will they use?

Limit Your Scale Steps

More sizes don't mean more flexibility—they mean more inconsistency. Most projects work well with:

• 2 sizes below base (sm, xs)
• 4-6 sizes above base (lg, xl, 2xl, 3xl, maybe 4xl)
• Total of 7-9 distinct sizes

If you find yourself needing more, reconsider your design rather than adding sizes.

Use Consistent Line Heights

A scale works best with matching line heights:

Size Category	Line Height
Headings (xl+)	1.1 - 1.3
Large text (lg)	1.3 - 1.5
Body text (base, sm)	1.5 - 1.7
Captions (xs)	1.4 - 1.6

Document Your System

Export a PDF style guide or create documentation that explains:

• When to use each size
• Which sizes for which heading levels
• Font pairing rules
• Spacing guidelines

This prevents drift as projects grow and teams change.

Test Across Devices

Your scale might look perfect on your 27" monitor but cramped on a phone or overwhelming on a 4K display. Test on:

• iPhone SE (small phone)
• Standard phone (375-390px)
• Tablet (768px)
• Laptop (1024-1440px)
• Large monitor (1920px+)

Fluid typography helps, but you should still verify the results.

Common Type Scale Mistakes

Picking Ratios Based on Trends

The Golden Ratio sounds impressive, but it creates dramatic size jumps that don't suit every project. Choose based on your content needs, not what sounds mathematical or trendy.

Ignoring Context

A ratio that works for marketing pages (Perfect Fourth, Perfect Fifth) may be too dramatic for documentation or dashboards. Match the ratio to the content type.

Too Many Sizes

If your scale has 12+ sizes, you're creating confusion. Designers will pick random sizes, and consistency will collapse. Fewer sizes, used consistently, work better.

Forgetting Mobile

Mobile screens need different considerations:

• Slightly larger base sizes (17-18px vs 16px)
• Less dramatic ratios (smaller headings relative to body)
• Tighter line heights for headings (less vertical space)

Not Testing with Real Content

Lorem ipsum doesn't reveal problems. Test with actual content—long words, short headings, nested lists, code blocks, whatever your site will actually contain.

Frequently Asked Questions

What is a type scale generator?

A type scale generator is a tool that creates harmonious font size systems using mathematical ratios. Instead of manually picking font sizes, you configure a base size and ratio, and the generator calculates proportionally related sizes for headings, body text, and small text. This creates visual harmony because all sizes relate mathematically.

How do I choose the right type scale ratio?

Choose based on your content type and design goals:

• Compact UIs (dashboards, data): Minor Second (1.067) or Major Second (1.125)
• General websites: Minor Third (1.2) or Major Third (1.25)
• Marketing/editorial: Perfect Fourth (1.333) or Perfect Fifth (1.5)
• High-impact heroes: Golden Ratio (1.618)

When unsure, start with Major Third (1.25)—it works for most web projects.

What is fluid typography?

Fluid typography uses CSS clamp() to create font sizes that scale smoothly between viewport widths without media query breakpoints. Instead of jumping from 16px to 18px at a specific width, the size interpolates linearly. This creates smoother responsive behavior and requires less CSS.

How do I use the type scale in Tailwind CSS?

Export your scale using the Tailwind format, then add the values to your tailwind.config.js under theme.fontSize. For Tailwind v4, paste the CSS variables into a @theme block in your main CSS file. The sizes become available as utilities like text-base, text-lg, text-xl, etc.

What base font size should I use?

The standard web default is 16px (1rem), which works for most projects. Use 18-20px for reading-heavy content like blogs or documentation. Use 14px for dense UIs like admin dashboards where space is limited. Test with actual content to verify readability.

Can I analyze typography from existing websites?

Yes. TypeScale Pro includes a URL Analyzer that extracts typography settings from any public website. Enter a URL, and it detects fonts, sizes, the likely scale ratio, and colors. You can apply these settings to your own scale or use them as a starting point.

What's the difference between rem and px units?

Pixels (px) are absolute units—16px is always 16px regardless of user settings. Rem units are relative to the root font size, so 1rem equals whatever the browser's base font size is (typically 16px). Using rem respects user preferences for larger text, making it better for accessibility.

How do I check if my typography is accessible?

Use the Accessibility tab to check contrast ratios between text and background colors. WCAG requires 4.5:1 for normal text (AA) or 7:1 for enhanced compliance (AAA). Large text (18px+ or 14px+ bold) has relaxed requirements of 3:1 (AA) or 4.5:1 (AAA). The tool shows pass/fail status for each level.

Is TypeScale Pro free to use?

Yes, the core generator, all scale ratios, and preview features are free without signup. Exporting code requires a credit, but registered users get unlimited access. All generated code is yours to use without restrictions or attribution requirements.

Can I save and share my type scales?

You can export your settings as code (CSS, SCSS, Tailwind, Tokens) or as a PDF style guide. The PDF export creates a shareable document showing your complete typography system. Project saving and URL sharing are planned for future updates.

Why Use TypeScale Pro?

Most type scale calculators show you numbers. TypeScale Pro goes further:

1. Complete typography toolkit - Not just sizes, but fonts, colors, accessibility, and fluid typography
2. Live preview - See how your scale looks with real content before exporting
3. Multiple export formats - CSS, SCSS, Tailwind, Design Tokens, and PDF
4. URL Analyzer - Extract typography from any website
5. Accessibility built-in - WCAG contrast checking and font size guidelines
6. Fluid typography - Automatic CSS clamp() generation
7. Google Fonts integration - Browse and preview 1500+ fonts
8. Free and unlimited - No paywalls for registered users

Whether you're starting a new project, creating a design system, or matching existing brand typography, TypeScale Pro gives you the tools to build harmonious, accessible font size systems.

Related Developer Tools

Expand your typography workflow with these complementary Forgedock tools:

• Font Pairing Generator - Find perfect Google Font combinations to pair with your type scale
• CSS Layout Generator - Build responsive layouts visually and export to React, Vue, Svelte
• Tailwind Color Generator - Create accessible color palettes that complement your typography