Guides JP

Type Scale Generator

Enter a base size, a ratio, and the number of steps to generate a modular font-size scale from headings to body text.

Last updated: 2026/10/16 Design Feedback & bug reports
Settings
Preview
CSS Output

How to Use

1

Enter the Base Size

Input the base font size used for body text (e.g. 16px).

2

Pick a Ratio and Steps

Choose a ratio such as 1.25 (Major Third) or 1.618 (Golden Ratio) and set the number of steps up and down.

3

Check the Preview

Each step is shown instantly as px/rem with a live preview.

4

Copy the CSS

Copy the generated custom-property CSS and use it directly in your project.

What is a Type Scale

A type scale (modular scale) is a set of font sizes created by repeatedly multiplying a base size by a fixed ratio. Like a musical scale, it produces harmonious sizes and a clean visual hierarchy from headings to body text. This tool runs every calculation in your browser and never sends your input to a server.

Features

  • Real-time GenerationSizes and preview update instantly as you type.
  • Ratio Presets + CustomChoose musical and golden-ratio presets, or enter any custom ratio.
  • px / rem TogetherView and copy both px and rem (root-based) values at once.
  • Copy-ready CSSGenerate custom-property CSS and copy it with one click.

Use Cases

  • Typography for a design system
  • Deciding heading sizes (h1–h6)
  • Tuning font sizes for sites and landing pages
  • Defining text styles in Figma/XD
  • rem-based responsive design

FAQ

Which ratio should I choose?
For body-heavy sites, a modest ratio of 1.2–1.333 is easy to work with, while landing pages that need big headings suit larger ratios like 1.5 or the golden ratio 1.618. Starting with 1.25 (Major Third) is a safe default.
Should I use px or rem?
For accessibility, rem is recommended because it scales with the user’s default browser font size. The rem values here are calculated against the root size (16px by default).
What do “steps up” and “steps down” mean?
“Steps up” is the number of sizes larger than the base (toward headings), and “steps down” is the number of smaller sizes (toward captions and fine print). Adjust them to the range of sizes you need.
When should I use the golden ratio (1.618)?
The golden ratio produces large jumps between steps and works well when you want strong contrast between headings and body text. On information-dense screens the difference can be too large, so check the preview as you adjust.
Is my input sent to a server?
No. Everything from the size calculation to CSS generation happens entirely in your browser. Your values and results are never sent to or stored on any external server, so you can use it with peace of mind.

Related Tools

px to em/rem Converter Convert CSS px to em/rem. Bulk CSS conversion supported CSS clamp() Generator Generate fluid clamp() values for responsive typography Line Height Calculator Calculate line-height ratio from font size and leading

Popular Tools

Character Counter Count characters, words, and lines in real-time JSON Formatter Format and validate JSON with syntax highlighting QR Code Generator Create custom QR codes with logo, colors & styles Password Generator Generate secure random passwords with one click Base64 Encoder Encode and decode text or files to Base64 IP Address Checker Check your global IP address

Related Guides

What Is a Type Scale? Sizing Text by Ratio, From Theory to Practice Learn the basics of the type scale (modular scale): the idea of stepping font sizes by a consistent ratio, common ratios such as the golden ratio 1.618 and 1.25 or 1.333, designing heading and body hierarchy, implementing with rem, and improving readability and consistency.