Modular type scale generator
From a 16 px base with a 1.25 ratio, five steps give 16, 20, 25, 31.25, 39.0625 and 48.828125. Pick three numbers and get a whole hierarchy of type sizes instead of guessing each one. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Base font size
- 16
- Modular scale ratio
- 1.25
- Step count
- 5 px
- Sizes
- 16, 20, 25, 31.25, 39.0625, 48.828125
- Size count
- 6
A modular type scale generator turns three design numbers—base font size, scale ratio, and step count—into a coherent ladder of type sizes for headings, body, and captions. UI kits, brand guidelines, CSS design tokens, and classroom exercises all need that same deterministic geometric progression without opening a spreadsheet or a Figma plugin.
What a modular type scale is and why the ratio must exceed one
A modular typographic scale is a geometric sequence of font sizes controlled by a single base and a single ratio. If the base is sixteen and the ratio is one point two five, step zero is sixteen, step one is twenty, step two is twenty-five, step three is thirty-one point two five, and so on—each size is the previous size multiplied by the same ratio.
The power of the method is restraint: instead of inventing arbitrary pixel values for h1 through caption, you pick three numbers and inherit a hierarchy that feels intentional across breakpoints and components. The ratio must be strictly greater than one because a ratio of one yields a constant sequence where every step equals the base, and a ratio less than one shrinks sizes as the step index grows, which inverts heading hierarchy and is almost never what a type-scale landing promises.
What you can do with it
Design tokens for headings and body type
Designers enter base, ratio, and steps once, then copy the sizes array into CSS variables or Figma text styles for a consistent product hierarchy.
FAQ
What is a modular type scale?
A geometric sequence of font sizes size(n) = base × ratio^n. One base and one ratio produce a consistent ladder for body, headings, and display type.
Why must the ratio be greater than one?
A ratio of one keeps every step equal to the base; a ratio below one shrinks sizes as steps increase.
How many sizes do I get for a given step count?
Steps equal to five yields six sizes starting at the base.
What unit are the sizes in?
Sizes are pure numbers in the same unit as your base (conventionally px). The response labels unit as px for design-token convenience; convert to rem if your system requires it.
Is the modular type scale generator free?
The browser tool is free and runs locally.
Related tools
For developers — API access
Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.
API endpoint
Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.
Call it from your stack
curl -X POST https://api.kit.forhosting.com/hobby/modular-scale \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"base":16,"ratio":1.25,"steps":5}'const res = await fetch("https://api.kit.forhosting.com/hobby/modular-scale", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"base": 16,
"ratio": 1.25,
"steps": 5
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/hobby/modular-scale",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"base": 16,
"ratio": 1.25,
"steps": 5
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/hobby/modular-scale", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"base":16,"ratio":1.25,"steps":5}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"base":16,"ratio":1.25,"steps":5}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/hobby/modular-scale", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Example request
{
"base": 16,
"ratio": 1.25,
"steps": 5
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "hobby.modular_scale",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.
Pricing
Published price — no tokens, no invented credits. A failed task is never charged.
Limits
max_abs | 1000000000000 |
max_steps | 32 |
min_base | 1e-12 |
Errors
| HTTP | Code | Meaning |
|---|---|---|
401 | unauthorized | Missing or invalid API key. |
402 | insufficient_balance | Your balance doesn't cover the task price. |
404 | unknown_type | That task type doesn't exist. |
429 | rate_limited | Too many requests. Use the webhook instead of polling. |
Technical notes
When the ratio is one or less the scale cannot grow, so the API returns a clear invalid_input error instead of a flat or shrinking list that would break hierarchy.
What a modular type scale is and why the ratio must exceed one
This capability therefore rejects ratio of one or less with invalid_input, matching classroom expectations and SEO intent for a modular type scale generator. Positive base sizes and a bounded non-negative integer step count keep intermediate powers finite in IEEE double precision.
How to call the API and what comes back
Base must be a strictly positive finite number within the published absolute limit of one trillion. Ratio must be a finite number strictly greater than one and within the same absolute limit. Send a JSON body with three required fields: base (aliases base_size, font_size, and base_font), ratio (aliases scale_ratio, modular_ratio, and r), and steps (aliases step_count, count, and n). Steps must be a non-negative integer from zero through thirty-two inclusive; the response then includes step_count plus one sizes covering exponents zero through steps. On success the response echoes rounded base and ratio, sets step_count to the integer step count, sizes to the ordered array of rounded font sizes, scale to an array of objects each with step and size, size_count to the length of sizes, unit to the string px as a conventional design-token unit label, formula to the closed relation size of n equals base times ratio to the n for n from zero through steps, message to a short English summary, and steps to an ordered walkthrough of intermediate lines. Failed validation—missing fields, non-finite numbers, non-positive base, ratio of one or less, fractional or out-of-range steps, or a non-finite overflowed size—returns invalid_input and is never charged. Pricing is a flat $0.002 per successful request with unit item and zero marginal unit price.
Practical tips, limits, and related searches
Prefer sending numbers rather than pre-formatted strings when you control the client; string numbers are accepted only when they match a strict finite numeric pattern. Prefer this capability when you already know base, ratio, and step count and only need the size ladder; if you need rem conversion after the fact, convert each published size with a separate root-font tool. Round-trip checks are straightforward: recompute base times ratio iteratively and confirm each entry in sizes and scale matches within the same twelve-decimal rounding used by the solver. Keep base and ratio inside the published absolute range so successive multiplications stay finite on the Worker and in the browser; prefer modest step counts when the ratio is large so the largest heading does not explode past layout limits. When teaching or documenting a design system, pair a happy path with a deliberate ratio of one or zero point nine to demonstrate the hard invalid_input path, and confirm that sizes at step k equal base times ratio to the k within twelve-decimal rounding. This landing targets people searching for a modular type scale generator, typographic scale calculator, or font size ratio steps tool; it is not a px-to-rem converter, not a fluid clamp calculator, and not a font pairing recommender. Failed tasks that return invalid_input do not consume prepaid balance, which keeps exploratory scripts cheap when learners deliberately probe edge cases.
Integration use cases
Brand guideline worksheets
Teams document a major-third or golden-ratio scale with deterministic numbers students and freelancers can recompute without proprietary plugins.
Unit tests for design-system generators
Developers feed known base-ratio-step triples and assert sizes and scale rows against golden fixtures in CI without floating UI tools.