📐 Typography Scale Calculator

Generate harmonious font sizes and perfect typographic hierarchies. Create modular scales for professional web design and print typography.

⚙️ Base Settings

📏 Typography Scale Preview

📊 Preset Scales

🔧 Actions

📥 Export Options

📋 Typography Scale Examples

Explore different typographic scales and their practical applications in web design and print media.

🎵 Musical Scales

Typography scales based on musical intervals create natural, harmonious proportions.

Perfect Fifth (1.5)
Major Third (1.25)
Base Size (1.0)
Minor Scale (0.8)
  • Perfect Fifth: Dramatic, bold headlines
  • Major Third: Comfortable, readable scaling
  • Minor Third: Subtle, elegant progression
  • Perfect Fourth: Strong, architectural feel

📐 Mathematical Scales

Scales based on mathematical ratios like golden ratio and square root progressions.

Golden Ratio
φ (Phi)
Base (1.0)
Inverse φ
  • Golden Ratio: 1.618 - Perfect natural proportion
  • Square Root 2: 1.414 - Paper size standard
  • Square Root 3: 1.732 - Triangular harmony
  • Fibonacci: Natural growth patterns

💻 Digital Scales

Modern scales optimized for digital interfaces and responsive design systems.

H1 - 32px
H2 - 24px
H3 - 20px
Body - 16px
Small - 14px
  • 8pt Grid: Pixel-perfect alignment system
  • 4pt Baseline: Consistent vertical rhythm
  • Responsive: Scales across device sizes
  • Accessibility: WCAG compliant sizing

📰 Editorial Scales

Traditional publishing scales adapted for modern digital editorial design.

Headline
Subheading
Lead Text
Body Text
Caption
  • News Design: Clear information hierarchy
  • Magazine Layout: Elegant content flow
  • Blog Posts: Reading-optimized scales
  • Documentation: Technical content clarity

📚 Typography Scale Guide

Master the art and science of typography scaling. Learn principles, best practices, and implementation techniques for professional typography.

📐 Scale Fundamentals

Understanding the mathematical principles behind harmonious typography scaling systems.

  • Modular Scale: Consistent ratios between font sizes
  • Base Size: Foundation measurement (usually 16px)
  • Ratio: Multiplier between scale steps
  • Steps: Number of sizes in the scale
  • Hierarchy: Clear visual information structure

🎯 Choosing Ratios

Guidelines for selecting appropriate scale ratios based on project requirements and design goals.

  • Conservative (1.125-1.2): Subtle, professional designs
  • Moderate (1.25-1.333): Balanced, versatile scaling
  • Dramatic (1.5-1.618): Bold, attention-grabbing
  • Context: Consider content type and audience
  • Testing: Validate across different devices

💻 Implementation

Technical approaches for implementing typography scales in web development and design systems.

  • CSS Custom Properties: Dynamic, maintainable scales
  • SCSS Functions: Calculated typography systems
  • Design Tokens: Cross-platform consistency
  • Component Libraries: Systematic implementation
  • Responsive Scaling: Adaptive sizing strategies

📱 Responsive Considerations

Adapting typography scales for different screen sizes and device capabilities.

  • Fluid Typography: Smooth scaling with viewport
  • Breakpoint Scaling: Different ratios per device
  • Minimum Sizes: Readability thresholds
  • Maximum Sizes: Layout constraint awareness
  • Touch Targets: Interactive element sizing

🎨 Design Applications

Practical usage scenarios and industry-specific typography scale applications.

  • Web Applications: UI component hierarchies
  • Editorial Design: Content-focused layouts
  • E-commerce: Product information clarity
  • Documentation: Technical content organization
  • Marketing: Attention-directing typography

✅ Best Practices

Professional guidelines for creating effective and maintainable typography scales.

  • Consistency: Use scale systematically throughout
  • Accessibility: Ensure sufficient size differences
  • Performance: Limit number of font sizes loaded
  • Semantic HTML: Match visual hierarchy to markup
  • Testing: Validate across devices and users