What Typography Scale Maker helps you do

Choose a base size and a modular ratio, preview a seven-step type scale, and export ready-to-use CSS variables. It builds a consistent hierarchy so headings and body text stay in proportion. The scale runs from xs to 3xl and each step is the previous one multiplied by the chosen ratio.

The scale is computed in your browser; no values are uploaded to Haivix.

How it works

These tools transform text locally: they parse, format, encode or render a string in your browser. Nothing you paste is uploaded to Haivix, but some tools load a library from a public CDN, so the page needs a network connection and your browser makes that request. The transformations operate on syntax, not meaning: a formatter can make invalid code look tidy, an encoder can hide a value without protecting it, and a preview can render markup that was never meant to execute. Outputs are exact strings, which means line endings, byte order marks and character encoding all matter when you paste the result somewhere else.

How to use Typography Scale Maker

Set the base font size and pick a modular ratio.
Enter the font stack you want the preview to use.
Preview the scale from xs up to 3xl.
Copy the CSS custom properties into your stylesheet.

When to use it

Establish a consistent type scale for a new design system.
Adjust heading sizes proportionally when the base size changes.
Export type-size tokens as CSS variables.
Compare how different ratios change the rhythm of a page.
Pick sizes for a small set of headings before coding.
Keep rem values consistent across a theme.

When not to use it

Do not expect line heights, weights or letter spacing.
Do not use it for fluid clamp-based type; the output is fixed rem values.
Do not treat the preview as an accessibility check.

Example

A 16-pixel base with a 1.25 ratio produces a scale where each step is 25 percent larger than the previous one. The base size sits in the middle at 16px, with smaller steps below and larger headings above. The CSS output expresses each size in rem, assuming a 16-pixel root, plus the ratio and font stack as variables.

What you can do with Typography Scale Maker

Set a base size from 12 to 24 pixels.
Choose from five modular ratios.
Preview seven sizes with sample text.
Set the font stack used in the preview and output.
Generate CSS custom properties for every step.
Copy the CSS variables.

Example: test with a real sample before trusting the output

Keep the original text. These tools produce a new value rather than editing in place, so a bad transform is reversible only if you still have the source.

Test with a representative sample, including the awkward case: a quote inside a string, a tag inside an attribute, a newline in the middle of a value.

Check line endings and encoding when moving between Windows, Unix and a browser form. A trailing carriage return can break a signature or a hash.

Treat pasted HTML and Markdown as untrusted. A preview that renders raw markup can execute event handlers even when it looks harmless.

Verify the result with the real parser, compiler or linter before shipping. A browser-side formatter is a convenience, not a substitute for the toolchain.

Prefer exact values over screenshots or copied rendered text. Rendering can normalize quotes, dashes and spaces in ways that break the next tool in the chain.

What to know before you start

It generates sizes only and does not set line heights, weights or letter spacing.
Extreme ratios can produce very large or very small steps at the ends of the scale.
The scale has seven fixed steps and no custom names.
It assumes a 16-pixel root when converting to rem.

Common mistakes

Assuming the rem values adapt if the root font size changes; they are fixed numbers.
Forgetting that the ratio applies in both directions from the base.
Expecting line-height tokens in the output.
Using a very large ratio and getting unusable heading sizes.

Troubleshooting

If a size looks wrong, check whether the base value is the middle step or the first.

If the preview font does not change, the stack may not be installed locally.

If the CSS variables look small, they are rem values, not pixels.

If a step is missing, the scale is fixed at seven steps.

Typography Scale Maker