Typography Scale Generator

How to Use the Typography Scale Generator

The Typography Scale Generator is a free online tool that helps you create a harmonious typographic scale with modular ratios. Here's how to use it:

1. Set the Base Font Size: Choose your base font size, typically 16px (the browser default).

2. Select a Scale Ratio: Pick from 8 modular ratios ranging from subtle (Minor Second) to dramatic (Golden Ratio).

3. Configure Steps: Set how many sizes above and below the base you need. For most designs, 6 above and 2 below covers most needs.

4. Preview the Scale: See the actual rendered text at each size with the font family you specified.

5. Export the Scale: Copy the generated code as CSS custom properties, Tailwind config, or SCSS variables.

• Choose from 8 modular ratios.
• Configure steps above and below the base font size.
• Preview the scale in real-time.
• Export the scale in multiple formats (CSS, Tailwind, SCSS).

When to Use the Typography Scale Generator

Use the Typography Scale Generator when you need to create a consistent and visually appealing typographic hierarchy for your website or application. It's particularly useful for:

1. Web Design: Ensuring that text sizes are harmonious and easy to read.

2. Editorial Content: Creating a clear visual hierarchy for articles and marketing pages.

3. Responsive Design: Making sure that your typography scales well across different screen sizes.

4. Accessibility: Ensuring that text is readable for users with different font sizes.

How It Works

The Typography Scale Generator works by allowing you to input your base font size and select a modular ratio. It then calculates the other sizes in the scale based on the ratio you chose. You can preview the scale in real-time and export it in various formats such as CSS custom properties, Tailwind config, or SCSS variables.

The tool uses a modular approach, where each size in the scale is derived by multiplying the previous one by a fixed ratio. This creates a mathematically harmonious progression of sizes, much like the intervals between notes in a musical scale.

Tips, Edge Cases, and Limitations

Here are some tips and considerations when using the Typography Scale Generator:

1. Choose the Right Ratio: The ratio you choose depends on your design context. For interfaces and applications, a smaller ratio like Minor Third (1.2) or Major Third (1.25) provides subtle, functional size differences. For editorial content and marketing pages, Perfect Fourth (1.333) or Perfect Fifth (1.5) creates more dramatic hierarchy. The Golden Ratio (1.618) is the most dramatic and is best for art-directed, high-impact designs.

2. Use rem Units: The generator shows sizes in both px and rem. Using rem units in your CSS is recommended because they scale relative to the root font size, making your typography responsive and accessible. When users adjust their browser's default font size (for accessibility), rem-based typography scales proportionally, while px-based values stay fixed.

3. Responsive Typography: A typographic scale that looks perfect on desktop may not work on mobile screens. Consider using CSS clamp() to create fluid typography that scales between viewport sizes, or generate separate scales for mobile (using a smaller ratio like Minor Second) and desktop (using a larger ratio like Perfect Fourth).

4. Consistency in Type Sizing: Apply the scale consistently across your project. Map the largest sizes to h1 and h2, medium sizes to h3 and h4, and the base to body text. Use the smaller sizes for captions, labels, and fine print. Consistency in type sizing creates a clear visual hierarchy that guides readers through your content.

Quick reference