Why does the CSS use rem instead of px?

Using rem (Root EM) is a web accessibility standard that ensures your typography seamlessly scales up proportionally if a user increases their browser's default font size.

Font Scale Visualizer — Free Typography Tool | Effect Control - Free Online Tool

The Ultimate Guide to the Font Scale Visualizer

The Font Scale Visualizer is a fundamental typography tool for web designers and developers. Instead of randomly guessing font sizes for your headers and paragraphs, this tool uses musical intervals and mathematical ratios (like the Golden Ratio) to generate a perfectly harmonious typographic scale, instantly converting it into usable CSS variables.

Who Will Use This?

UI/UX Designers: Build a consistent design system for Figma by determining exactly what font sizes your H1, H2, H3, and Body text should be based on mathematical harmony.
Front-End Developers: Generate a complete set of CSS root variables using modern rem units to drop directly into your Tailwind config, React app, or vanilla stylesheet.
Brand Strategists: Export a beautiful PNG graphic of your brand's typographic scale to include in client pitch decks or brand guideline documents.

How to Generate Your Typographic Scale

Set Your Base Size: Start by defining your body text size (the size of standard paragraphs). 16px is the universally accepted standard for web design, but you can increase this for accessibility-focused projects.
Choose a Scale Ratio: This dictates how drastically the text grows from your base size up to your H1.
- Minor Third (1.200) or Major Third (1.250): Perfect for standard marketing websites, blogs, and corporate sites.
- Perfect Fourth (1.333): Great for SaaS dashboards where you need distinct hierarchy but limited vertical space.
- Golden Ratio (1.618): Excellent for artistic, brutalist, or editorial websites where you want massive, dramatic contrast between giant headlines and small body text.
Review the Preview: The main window displays exactly how your H1 (Hero) all the way down to your XS (Tiny) text will look stacked together. It provides exact measurements in both Pixels (px) and Relative units (rem).
Export CSS: Click Copy CSS Variables. This copies a clean :root { ... } block to your clipboard. Paste this at the top of your `style.css` file to easily apply the scale across your entire website.
Download PNG (Optional): Click Download Scale PNG to capture a high-resolution image of the visual preview for your documentation.

Common Problems & Tips

Why does the CSS use "rem" instead of "px"? Using rem (Root EM) is a web accessibility standard. It ensures that if a visually impaired user increases their browser's default font size from 16px to 24px, your entire website's typography will seamlessly scale up proportionally without breaking your layout.
My H1 is way too big on mobile! Mathematical scales look amazing on desktop monitors, but a Golden Ratio H1 is often too massive for a phone screen. A common best practice is to use a smaller ratio (like Minor Third) for mobile screens, and a larger ratio (like Perfect Fifth) for desktop screens using CSS media queries.

Frequently Asked Questions

What is a typographic scale?

Just like musical notes progress at specific mathematical intervals to create harmony, a typographic scale uses a fixed multiplier to define font sizes. Instead of choosing 16px, 20px, and 24px randomly, a scale ensures proportional, visually pleasing harmony between every text element on your page.

How do I use the exported CSS variables?

Once pasted into your stylesheet's :root block, you can apply them to your HTML elements using the var() function. For example: h1 { font-size: var(--text-5xl); }.

Ready to create harmonious typography?

↑ TRY FONT SCALE VISUALIZER NOW

PRACTICAL EXAMPLES & WORKFLOWS

THE COMPLETE GUIDE: 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!