Font Scale Visualizer

How to Use This Tool

1. Under "SCALE SETTINGS," type in your Base Size (usually 16px, which is the default for most web browsers).

2. Choose a Scale Ratio from the dropdown menu. This mathematical ratio determines how quickly your headings grow compared to your body text. (e.g., "Major Third" creates a steady, pleasing scale, while "Golden Ratio" creates dramatic, massive headlines).

3. Scroll through the Live Preview on the right to instantly see exactly how all your headings (H1, H2, H3, etc.) and small text will look relative to each other.

4. If you are a web developer, click "Copy CSS Variables" to instantly copy the mathematically perfect font sizes (in both `rem` and `px`) straight to your clipboard, ready to paste into your stylesheet.

5. If you are a UI/UX designer, click "Download Scale PNG" to export a clean, high-resolution image of your typographic scale to share with your team or add to your brand guidelines document.

How This Benefits You

Choosing font sizes manually often leads to websites and designs that look messy or inconsistent. By using a "Typographic Scale," you rely on the same mathematical ratios used in music and architecture to ensure your text hierarchy is perfectly balanced, highly readable, and aesthetically pleasing. This tool calculates the math for you instantly.

Who Should Use This

• Web Developers: Generate a completely responsive CSS variable sheet (`--text-xl`, `--text-2xl`, etc.) in seconds, replacing the guesswork of picking random pixel sizes for headings. • UI/UX Designers: Test different mathematical ratios to see if a "Perfect Fourth" or a "Major Third" fits the vibe of your new app or website design before touching Figma. • Brand Identity Designers: Easily generate a standardized typography sheet (as a PNG) to include in your client's brand guidelines PDF.

Tool Limitations

This tool uses standard browser rendering to generate the preview. If you want to visualize the scale using a custom Google Font or premium font file, you will currently see it rendered in the default system font (Inter/San-Francisco). The mathematical pixel calculations and CSS output, however, remain perfectly accurate regardless of what font you ultimately use in your project!