Typography Scale

Getting Started

The Typography Scale Generator creates mathematically harmonious font size systems for responsive web design. Build professional typography hierarchies with precise control over every breakpoint and element.

Quick Start Guide

1. Configure global settings (Google Font selection and base font size)
2. Choose scale factors for each breakpoint (Mobile, Tablet, Desktop)
3. Preview live typography samples with your selected font
4. Click any value to override defaults with custom measurements
5. Generate and copy production-ready CSS with media queries

Key Features

Scale Ratio Options

Mathematical Ratios

• Minor Second (1.033): Subtle progression, minimal contrast - best for dense content
• Minor Third (1.065-1.2): Gentle hierarchy, good readability - ideal for content sites
• Major Second (1.125): Balanced progression - versatile for most projects
• Major Third (1.25): Noticeable contrast - good for marketing sites
• Perfect Fourth (1.333): Strong hierarchy - excellent for portfolios
• Perfect Fifth (1.5): Dramatic contrast - ideal for creative agencies
• Golden Ratio (1.618): Natural harmony - perfect for luxury brands

Breakpoint Strategy

• Mobile: Use smaller ratios (1.065-1.125) to prevent oversized headings on small screens
• Tablet: Medium ratios (1.125-1.25) provide good hierarchy without overwhelming content
• Desktop: Larger ratios (1.25-1.618) take advantage of screen real estate for impact

Custom Scale Values

• Select "Custom" from any scale dropdown to input precise decimal values
• Range: 1.0 to 3.0 (values below 1.2 create subtle progressions, above 1.5 create dramatic contrast)
• Use reset buttons to return to safe default values if scales become unusable

Typography Elements

Standard HTML Elements

• H1-H6 Headings: Traditional heading hierarchy with decreasing font sizes
• Paragraph (p): Body text baseline at your specified base font size
• List Items (li): Consistent with paragraph sizing for readability
• Blockquote: Styled quote text matching paragraph proportions
• Small Text: Reduced size for captions, fine print, and secondary information

CSS Class Elements

• Display 1 & 2: Hero section typography for maximum visual impact
• Subhead: Secondary heading style between H6 and paragraph
• Large Paragraph: Emphasized body text for introductions or callouts

Property Controls

• Font Weight: 100-900 scale (default: 700 for headings, 400 for body)
• Font Size: Calculated from base size and scale ratio, fully editable
• Line Height: Percentage-based (120% for headings, 160% for body text)
• Letter Spacing: Fine-tuning character spacing in pixels
• Margin Bottom: Consistent vertical rhythm spacing

Detailed Usage Guide

Setting Up Your Scale

Start with global configuration to establish your typography foundation:

1. Choose Base Font: Select from popular Google Fonts or enter a custom font name
2. Set Base Size: 16px is recommended for web accessibility (range: 10-24px)
3. Configure Breakpoints: Set appropriate scale ratios for each screen size

Understanding the Interface

Global Settings Panel: Controls that affect all breakpoints including font selection and base size.

Breakpoint Sections: Individual control panels for Mobile, Tablet, and Desktop with scale factor selection and reset options.

Typography Tables: Live preview tables showing font samples with all calculated properties. Click any value to override defaults.

CSS Export Area: Production-ready CSS output with copy-to-clipboard functionality and mobile-first or desktop-first options.

Customizing Properties

1. Click any font size, weight, line height, letter spacing, or margin value in the preview tables
2. Input your desired value in the popup editor
3. Press Enter to save or Escape to cancel
4. Override indicators (blue text and × reset buttons) show customized values
5. Click × next to any override to restore calculated default

Horizontal Scrolling and Large Scales

When using large scale ratios (Perfect Fifth 1.5+), typography samples may exceed table width:

• Scroll Indicators: Blue hints appear when horizontal scrolling is available
• Styled Scrollbars: Custom-themed horizontal scrollbars for better UX
• Reset Safety: Red "Reset" buttons provide quick escape from unusable scales
• Responsive Tables: Tables maintain functionality even with very large font samples

CSS Export and Implementation

Export Options

• Mobile-First CSS: Base styles for mobile with min-width media queries (recommended)
• Desktop-First CSS: Base styles for desktop with max-width media queries
• Complete CSS Package: Includes Google Fonts import, CSS custom properties, and all breakpoints

Generated CSS Structure

• Google Fonts @import statement with selected font weights
• CSS custom properties (:root) for font family and base size
• Body element baseline typography settings
• Responsive media queries with complete typography definitions
• Both HTML elements (h1, p) and CSS classes (.display-1, .subhead)

Implementation Best Practices

• Copy the complete CSS output to your main stylesheet
• Customize CSS custom properties to match your design system
• Test with actual content, not just sample text
• Verify font loading performance and add font-display: swap if needed
• Consider preloading critical font files for better performance

Design System Integration

CSS Custom Properties Approach

The generated CSS uses custom properties for maintainable design systems:

• Modify --base-font-size to adjust the entire scale proportionally
• Update --font-family to change fonts across all elements
• Create theme variations by overriding custom properties

Framework Integration

Works seamlessly with popular CSS frameworks:

• Tailwind CSS: Use generated sizes in tailwind.config.js fontSize settings
• Bootstrap: Override Bootstrap's typography variables with generated values
• CSS-in-JS: Export values as JavaScript objects for styled-components or emotion

Design Token Export

Convert generated values into design tokens for design-development workflow:

• Use font sizes as typography tokens in design tools like Figma
• Create JSON files with typography values for design system documentation
• Maintain consistency between design files and code implementation

Accessibility and Performance

Accessibility Guidelines

• Minimum Text Size: Ensure 16px minimum for body text on all devices
• Contrast Ratios: Maintain 4.5:1 for normal text, 3:1 for large text (18px+)
• Zoom Support: Test typography at 200% browser zoom
• Reading Flow: Ensure clear visual hierarchy for screen readers

Performance Optimization

• Font Loading: Use font-display: swap for better perceived performance
• Weight Limits: Limit to 2-3 font weights to reduce loading time
• Preloading: Preload critical fonts with <link rel="preload">
• Fallback Fonts: Specify system font stacks as fallbacks

Browser Compatibility

Generated CSS works across all modern browsers:

• Chrome 29+ (CSS custom properties support)
• Firefox 31+
• Safari 9.1+
• Edge 16+
• Internet Explorer 11 (with CSS custom properties polyfill)

Troubleshooting

Common Issues

Typography appears too large/small:

• Check your base font size setting (16px recommended)
• Verify scale ratios aren't too aggressive for your content
• Use reset buttons to return to safe defaults
• Test with actual content, not just sample text

Can't access scale controls on mobile:

• Horizontal scroll is available in preview tables
• Scale controls wrap on smaller screens
• Use reset buttons if interface becomes unusable

Google Font not loading:

• Verify font name spelling for custom fonts
• Check internet connection for Google Fonts API
• Some fonts may take longer to load and display
• Font preview updates automatically once loaded

CSS export not working:

• Click "Generate CSS" before copying
• Check browser clipboard permissions
• Try manual selection and copy if automatic copy fails
• Verify all overrides are intentional before export

Best Practices

• Start Conservative: Begin with smaller ratios (1.125-1.25) and adjust
• Test with Real Content: Use actual headlines and text, not Lorem ipsum
• Mobile-First Approach: Design for small screens first, enhance for larger
• Maintain Hierarchy: Ensure each level is visually distinct from others
• Consider Context: Content sites need subtlety, marketing sites can be dramatic
• Override Sparingly: Mathematical scales provide harmony - override only when necessary

Frequently Asked Questions

What's the difference between this and other typography tools?

Our tool offers responsive breakpoint controls, property overrides, Google Fonts integration, horizontal scroll safety features, and comprehensive CSS export - features not typically found together in other type scale generators.

Which scale ratio should I use for my project?

Content-heavy sites (blogs, documentation): 1.125-1.25. Marketing and portfolio sites: 1.25-1.414. Creative agencies and luxury brands: 1.414-1.618. Always test with your actual content.

Can I use different fonts for different elements?

The tool generates a single font family system. For mixed font systems, export multiple scales with different fonts and combine the CSS manually, or override individual elements after export.

How do I implement responsive typography?

Use the mobile-first CSS export option. The generated code includes proper media queries that progressively enhance typography as screen size increases, following responsive design best practices.

What if I need more than 6 heading levels?

The tool includes Display classes for larger headings and utility classes for additional options. You can also manually add more levels to the exported CSS following the mathematical progression.

Is the generated CSS production-ready?

Yes. The exported CSS includes Google Fonts imports, proper media queries, CSS custom properties, and follows modern best practices. It can be used directly in production projects.

How do I handle very large scale ratios that break the layout?

The tool includes horizontal scrolling, visual scroll hints, and reset buttons for each breakpoint. If scales become unusable, click the red "Reset" button to return to safe defaults.

Can I export design tokens or use this with design systems?

The CSS uses custom properties that integrate well with design systems. You can extract font sizes from the generated CSS to create design tokens for tools like Figma or design system documentation.