Font Modular Scale Generator
Generate a harmonious typographic modular scale from a base font size and a ratio (major third, golden ratio, perfect fifth, or a custom value). Get a full step table plus ready-to-paste CSS custom properties, SCSS variables, a Tailwind fontSize config, or JSON.
Input
Base
The 1rem reference size. Most browsers default to 16px.
Each step is the previous step multiplied by this ratio.
Output
Decimal places in the rendered values.
Output
| Step | Size | Pixels |
|---|---|---|
| No data yet | ||
Guides
A modular scale is a sequence of font sizes where each step is the previous one multiplied by a fixed ratio. Instead of picking type sizes by hand and hoping they feel balanced, you choose one base size and one musical-style ratio, and every heading, sub-heading, and caption falls into a proportional, harmonious rhythm. This generator builds that scale for you and hands back copy-paste code for CSS, SCSS, Tailwind, or JSON.
How to use it
- Set your base size in pixels — the reference size for
1rem, usually 16px. - Pick a ratio. The presets are classic typographic intervals: Minor Second (1.067) for tight, dense UI type through the Golden Ratio (1.618) and the Octave (2.0) for dramatic, editorial contrast. Choose Custom to dial in any value between 1.01 and 3.
- Choose an output unit (
rem,em, orpx) and how many decimal places to round to. - Pick an export format. The scale table updates live, and the code box gives you a block ready to drop into your stylesheet or config.
The steps are named with the familiar Tailwind convention — xs, sm, base, lg, xl, 2xl … up to 6xl — where base is your chosen size and each step above or below multiplies (or divides) by the ratio.
What ratio should I use?
Smaller ratios (1.067–1.2) keep sizes close together, which suits data-dense dashboards and body-heavy pages. Larger ratios (1.333–1.618) create bold, obvious hierarchy that works well for marketing sites and long-form articles. When in doubt, Major Third (1.25) is a reliable, versatile default.
Should I use rem, em, or px?
rem is the safest choice for accessibility: sizes scale with the user's root font-size preference. em compounds relative to the parent element, which is handy for self-contained components. px is fixed and predictable but ignores user zoom preferences, so reserve it for cases where you truly need an exact size.
Why does the base size stay 1rem/1em no matter what?
Because relative units are expressed as a multiple of the base. At the base step the value is exactly 1rem (or 1em); the pixel column shows the concrete size that resolves to. Switch the unit to px to see every step as an absolute pixel value.
Can I use this for a Tailwind project?
Yes. Choose the Tailwind Config (fontSize) format and paste the generated fontSize block into theme.extend in your tailwind.config.js. The keys match Tailwind's default size names, so your existing text-lg, text-2xl, and similar utilities pick up the new scale.
Privacy
Everything runs entirely in your browser. Your base size, ratio, and generated code never leave your device and are never sent to a server.
Use it from code
From 3 credits per callREST API
curl -X POST https://api.iotools.cloud/v1/tool/font-modular-scale-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"baseSize": "16",
"ratio": "1.25",
"customRatio": "1.25",
"unit": "rem",
"decimals": "3",
"exportFormat": "css"
}'Swap in your own key from your account. The tool's fields are the body — no wrapper.
Ask an AI agent
Use the IOTools `font-modular-scale-generator` tool (Font Modular Scale Generator) on this input:
YOUR_INPUT_HEREPaste this at any agent connected to the IOTools MCP server, then add your input.