Typography Scale Generator

Create harmonious, mathematically-perfect type systems with customizable ratios, fonts, and colors. Preview on desktop and mobile, then export production-ready CSS.

Loading Typography Scale Generator...

Visual Hierarchy

A well-defined type scale creates clear visual hierarchy, guiding users through your content naturally. Research shows that 95% of users scan content rather than read it word-for-word, making hierarchy crucial for comprehension and engagement.

Consistency

Mathematical ratios ensure uniform sizing across your entire project. This consistency reduces decision fatigue for designers and creates a more polished, professional appearance that builds trust with users.

Efficiency

With a predefined scale, designers and developers spend less time debating font sizes and more time solving real problems. Teams using type scales report 40% faster design-to-development handoffs.

Accessibility

Proper type scales improve readability for all users, especially those with visual impairments. Sufficient size differences between levels ensure content remains scannable and accessible across devices and reading conditions.

Professionalism

Mathematical precision reflects attention to detail. Brands using consistent typography systems are perceived as more trustworthy and professional, directly impacting conversion rates and user confidence.

Responsive Design

A flexible type scale adapts gracefully across screen sizes. Modern CSS techniques like rem units and viewport-based scaling ensure your typography looks perfect from mobile to desktop.

What is a Type Scale?

A type scale is a sequence of font sizes that follow a consistent mathematical relationship. Starting from a base size (typically 16px for body text), each level is calculated by multiplying or dividing by a specific ratio.

The formula is simple: Size = Base × Ratioⁿ, where n is the number of steps from the base size (positive for larger sizes, negative for smaller).

Connection to Music Theory

Many typographic ratios come from musical intervals, which have been proven harmonious for centuries. The “Perfect Fourth” (1.333) matches the frequency ratio of a perfect fourth in music. The “Perfect Fifth” (1.500) corresponds to the musical interval of the same name.

Just as these intervals create pleasing harmony in music, they create visual harmony in typography. This isn't coincidence—our brains are wired to find these mathematical relationships aesthetically pleasing across different mediums.

Choosing the Right Ratio

Different ratios serve different purposes. Smaller ratios (1.067-1.200) create subtle, tight hierarchies ideal for content-heavy sites where you need many text levels without dramatic size changes. Medium ratios (1.250-1.333) offer balanced, versatile scales suitable for most projects.

Larger ratios (1.414-1.618) create bold, dramatic hierarchies perfect for marketing sites, portfolios, or anywhere you want headlines to dominate. The Golden Ratio (1.618) has been used in art and architecture for millennia and brings a sense of natural perfection to typography.

Minor Second

1.067

The most subtle scale, creating tight hierarchies with minimal size differences. Perfect for data-dense interfaces, documentation, and applications where space is premium.

Best for: Admin dashboards, technical documentation, dense content sites

Major Second

1.125

A conservative scale that's easy to read with clear but modest distinctions. Ideal for long-form content where readability is paramount.

Best for: Blogs, news sites, editorial platforms, e-books

Minor Third

1.200

The classic, most versatile scale. Offers clear hierarchy without being too dramatic. This is the "safe choice" that works for almost any project.

Best for: Corporate sites, SaaS products, general-purpose websites

Major Third

1.250

A harmonious, balanced scale with noticeable hierarchy. Creates confident, professional typography that feels intentional and polished.

Best for: Marketing sites, portfolios, agency websites

Perfect Fourth

1.333

A strong, clear scale with excellent contrast between levels. Headlines stand out without overwhelming the design. Strikes a perfect balance between subtle and bold.

Best for: Landing pages, product sites, content marketing

Augmented Fourth

1.414

Based on the square root of 2, this ratio creates bold, modern hierarchies. Also known as the "tritone" in music—unique and attention-grabbing.

Best for: Creative portfolios, bold brands, experimental designs

Perfect Fifth

1.500

A dramatic scale with large jumps between sizes. Headlines dominate the page, creating strong visual impact. Use when you want typography to be the hero.

Best for: Editorial design, magazine layouts, headline-focused sites

Golden Ratio

1.618

The most dramatic standard scale, based on the mathematical constant φ. Found throughout nature and classical architecture. Creates luxury, high-end feel.

Best for: Luxury brands, high-end design, artistic projects

Start with 16px Base

Use 16px as your base font size—it's the browser default and accessibility standard. Users with visual impairments often set their browser to this size, and deviating from it can break their reading experience. Use rem units so users' font size preferences are respected.

Limit to 5-7 Sizes

Too many font sizes create visual chaos and inconsistency. Most projects only need 5-7 distinct sizes: a few heading levels, body text, small text for captions, and perhaps a display size for hero sections. More than this becomes difficult to maintain.

Adjust Line Height by Size

Larger text needs tighter line height (1.1-1.2), while body text reads best at 1.5-1.6. Small text can use 1.4. This prevents large headings from feeling loose and keeps body text comfortable to read. Line height is just as important as font size for hierarchy.

Consider Fluid Typography

Modern CSS allows font sizes to scale smoothly between viewport sizes using clamp() and viewport units. This creates more natural responsive behavior than breakpoint-based sizing. However, always set minimum and maximum bounds for accessibility.

Test on Real Devices

Typography looks different across devices, browsers, and operating systems due to font rendering differences. What looks perfect on your MacBook might be too small or poorly spaced on Windows or mobile. Test early and often on actual devices, not just browser DevTools.

Pair with Font Weight

Font size alone doesn't create hierarchy—weight matters too. Use bolder weights for headings (600-700) and regular weights for body text (400-500). This reinforces the scale and makes hierarchy immediately scannable, even at a glance.

Check Color Contrast

Typography scale is only effective if users can actually read it. Use our Color Contrast Checker to ensure your text colors meet WCAG standards. Smaller text needs higher contrast ratios than large text.

Document Your System

A type scale is only useful if your team knows it exists and how to use it. Document when to use each level, include code examples, and make it easy to reference. Consider creating a component library or design tokens to enforce consistency automatically.

❌ Too Many Font Sizes

Using arbitrary sizes like 14px, 15px, 16px, 17px creates visual noise and inconsistency. Stick to your scale—if a size isn't in your system, question whether you really need it.

❌ Ignoring Mobile Typography

What works on desktop often doesn't translate to mobile. Large display text can become unwieldy, and small body text becomes unreadable. Always adjust your scale for smaller screens.

❌ Inconsistent Spacing

Typography doesn't exist in isolation—margin and padding need to follow a similar system. Pair your type scale with a spacing scale for true consistency.

❌ Poor Line Height

Default line heights (1.0) are almost always too tight. Body text needs breathing room (1.5-1.6), but applying the same line height to all sizes creates awkward spacing.

❌ Mixing Measurement Units

Using px, em, and rem inconsistently makes scaling difficult and breaks accessibility features. Choose rem for font sizes and stick with it throughout your system.

❌ Not Testing Readability

Typography isn't just about aesthetics—it must be readable. Test your scale with real content, long paragraphs, and various languages to ensure it works in production scenarios.

A typography scale is a crucial foundation, but it's just one piece of a complete design system. Professional systems integrate typography with color, spacing, components, and documentation to create truly scalable, maintainable designs.

🎨 Color System

Pair your type scale with a well-defined color palette. Ensure text colors meet WCAG contrast requirements at every size level. Use semantic color tokens that adapt to light and dark modes.

📏 Spacing Scale

Typography needs consistent spacing around it. Create a spacing scale (often 4px or 8px based) that harmonizes with your type scale. This ensures margins, padding, and gaps feel intentional.

🧩 Component Library

Translate your type scale into reusable components: heading components, text components, and rich text renderers. This enforces consistency and speeds up development significantly.

📱 Responsive Strategy

Define how your scale adapts across breakpoints. Use fluid typography, viewport units, or breakpoint-based adjustments—whatever fits your project—but document the approach clearly.

📖 Documentation

Document when to use each level, provide code examples, and show real-world usage. Great documentation makes the difference between a system that's used and one that's ignored.

♿ Accessibility

Ensure your typography system supports users with disabilities: semantic HTML, ARIA labels, sufficient contrast, respect for user preferences, and keyboard navigation throughout.

Ready for a Professional Design System?

A great typography scale is just the beginning. We create comprehensive design systems that include typography, color, spacing, components, and complete documentation. Our systems are built for scale, accessibility, and developer happiness.

Start Your Design System Project