A type scale is a systematic way to establish harmonious size relationships in your typography.
Mathematical Ratios
- Minor Second (1.067) - Very subtle progression, good for dense information
- Major Second (1.125) - Conservative scale, works well for longer text
- Minor Third (1.2) - Balanced scale, good for most web applications
- Major Third (1.25) - Classic typography scale, creates clear hierarchy
- Perfect Fourth (1.333) - Popular web scale with good contrast
- Augmented Fourth (1.414) - Based on √2, creates stronger differentiation
- Perfect Fifth (1.5) - Creates dramatic contrast, good for marketing sites
- Golden Ratio (1.618) - The "divine proportion," creates organic feeling scales
Note: For very small ratios (like Minor Second), our generator ensures each size in your scale remains distinct, even when rounding is applied. This prevents duplicate sizes while maintaining the subtle progression characteristic of smaller ratios.
Adding Intermediate Sizes: When you add sizes between existing scale points using the "Add Size Between" button, our generator intelligently distributes these intermediate sizes to maintain a consistent progression. Each added size will have a unique value, even when using small ratios or when adding multiple intermediate sizes.
Line Height Correlations
Line height should be inversely proportional to font size:
- Small text (12-14px): 150-160% line height
- Body text (16-20px): 140-150% line height
- Medium headings (24-36px): 120-130% line height
- Large headings (40px+): 110-120% line height
Letter Spacing Guidelines
Letter spacing (tracking) follows opposite patterns for different text sizes:
- Large headings (32px+): -2% letter spacing (tighter)
- Medium headings (24-32px): -1.5% letter spacing (tighter)
- Subheadings (20-24px): -0.5% letter spacing (slightly tighter)
- Body text (18-20px): 0% letter spacing (normal)
- Small text (14-18px): +0.5% letter spacing (slightly looser)
- Very small text (12-14px): +1% letter spacing (looser)
- Tiny text (below 12px): +2% letter spacing (very loose)
This pattern improves both aesthetics and readability: tighter spacing for display text creates visual cohesion, while looser spacing for small text improves legibility.
The basic formula for calculating any point in your type scale is:
fontSize = baseSize × ratio^n
Typography Best Practices for Web Design
Implementing a consistent type scale is essential for creating professional, readable, and visually appealing websites. Here are some best practices:
- Hierarchy and Readability - A well-designed type scale creates visual hierarchy that guides users through your content, improving readability and user experience.
- Consistency Across Devices - Using a mathematical type scale ensures your typography remains proportionally consistent across different screen sizes and devices.
- Accessibility Considerations - Maintain a minimum body text size of 16px for optimal readability. Ensure sufficient contrast between text and background colors.
- Performance Optimization - Limit the number of font weights and styles to improve page load times. Consider using system fonts or variable fonts for better performance.
- Design Systems Integration - Your type scale should be a foundational element of your design system, working harmoniously with spacing, color, and other components.
Why Use a Type Scale Generator?
Our TypeScale Generator helps designers and developers:
- Create mathematically harmonious typography systems based on proven ratios
- Visualize how different font sizes work together before implementation
- Generate ready-to-use CSS that can be directly implemented in projects
- Experiment with different scale ratios to find the perfect balance for specific design needs
- Ensure consistent typography across entire websites and applications