{"uid":"cap_D4LNPfxJgWoEKZZYe9fsd","slug":"css-design-calc-modular-type-scale-dbd4e560","name":"CSS Design Calc – Modular Type Scale","description":"Modular type scale: sizes in px and rem for steps below and above a base size, by named ratio (major third, golden) or number.","url":"https://css-design-calc.x402tookit.com/type-scale?utm_source=zero.xyz","method":"GET","headers":{},"bodySchema":{"type":"object","$schema":"https://json-schema.org/draft/2020-12/schema","required":["input"],"properties":{"input":{"type":"object","required":["type","method"],"properties":{"type":{"type":"string","const":"http"},"method":{"enum":["GET"],"type":"string"},"queryParams":{"type":"object","required":["base"],"properties":{"up":{"type":"integer","description":"Steps above the base, 0 to 12 (default 6)"},"base":{"type":"number","description":"Base font size in px (step 0), for example 16"},"down":{"type":"integer","description":"Steps below the base, 0 to 6 (default 2)"},"ratio":{"type":"string","description":"Ratio name (minor-second, major-second, minor-third, major-third, perfect-fourth, augmented-fourth, perfect-fifth, minor-sixth, golden, major-sixth, minor-seventh, major-seventh, octave) or a number above 1 (default major-third = 1.25)"},"rootPx":{"type":"number","description":"Root font size in px for rem output (default 16)"}}}},"additionalProperties":false},"output":{"type":"object","required":["type"],"properties":{"type":{"type":"string"},"example":{"type":"object","properties":{"asOf":{"type":["null","string"]},"base":{"type":["null","number"]},"ratio":{"type":["null","number"]},"steps":{"type":["array","null"],"items":{"type":"object","properties":{"px":{"type":["null","number"]},"css":{"type":["null","string"]},"rem":{"type":["null","number"]},"step":{"type":["null","number"]}}}},"rootPx":{"type":["null","number"]},"source":{"type":["null","string"]},"reasons":{"type":["array","null"],"items":{"type":"string"}},"summary":{"type":["null","string"]},"verdict":{"type":["null","string"]},"degraded":{"type":["boolean","null"]},"ratioName":{"type":["null","string"]},"disclaimer":{"type":["null","string"]},"notChecked":{"type":["array","null"],"items":{"type":"string"}},"stepsAbove":{"type":["null","number"]},"stepsBelow":{"type":["null","number"]},"customProperties":{"type":["null","string"]}}}}}}},"responseSchema":null,"example":null,"exampleRequest":null,"tags":["x402"],"displayCostAmount":"0.02","displayCostAsset":"USDC","priceDynamic":false,"priceHint":null,"priceStatus":"priced","priceSource":"probe","requiresHandshake":false,"reviewCount":0,"rating":{"score":"0.00","successRate":"0.00","reviews":0,"stars":null,"state":"unrated"},"availabilityStatus":"unknown","priceObserved":null,"sessionDeposit":null,"pricing":{"kind":"static","summary":"$0.02/call","primary":{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.02","per":"call","confidence":"exact"},"accepted":[{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.02","per":"call","confidence":"exact"}]},"paymentMethods":[{"uid":"pm_CVgPiM-rTWiuGDrUGKwzg","protocol":"x402","methodType":"crypto","chain":"base","mode":"charge","costAmount":"0.02","costPer":"request","priority":0,"asset":"0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913","unit":"request","depositMicros":null,"planRef":null}],"brandName":null,"brandSlug":null,"brandBaseUrl":null,"brandDocsUrl":null,"whatItDoes":"Generates a modular type scale with px and rem values for steps above and below a base font size, using named or numeric ratios.","exampleAgentPrompt":"Generate a modular type scale starting at a 16px base, 6 steps above and 2 below, using a major-third ratio, with a 16px root for rem output.","exampleUseCases":[{"title":"Design system typography tokens","prompt":"I'm building a design system and need a type scale — give me px and rem values for 8 steps above and 2 below a 16px base using the perfect-fourth ratio, with 16px as the root."},{"title":"Heading sizes for a content-heavy site","prompt":"What font sizes should I use for h1 through h6 if I start from 18px and use a golden ratio scale? Give me 5 steps up and 1 step down, root at 18px."},{"title":"Compact scale for a dense UI","prompt":"Calculate a minor-third modular type scale from a 14px base, 4 steps above and 1 below, root at 16px — I need the rem values to set CSS custom properties for a compact dashboard."}],"resultDescription":"Returns an array of type scale steps, each with a step index, size in px, size in rem, and a CSS custom property snippet. Also includes the resolved ratio value and name, base size, root px, and step counts above and below.","failureModes":["Missing required 'base' query parameter returns an error","Ratio value ≤ 1 is invalid and will be rejected","Steps above > 12 or steps below > 6 may be out of range","Non-numeric, non-enum ratio string returns an error","Network or payment authorization failure returns a 402 or 5xx"],"whenToPreferThis":"Choose this endpoint when you need a mathematically consistent, harmonically spaced set of font sizes derived from a single base and ratio — ideal for design tokens, CSS custom properties, or any situation requiring named musical/typographic ratios rather than manually picked sizes.","instructions":null,"reviewSummary":null,"reviewSummaryHighlights":null,"reviewSummaryConcerns":null,"reviewSummaryGeneratedAt":null,"activationCount":0,"lastUsedAt":null,"lastSuccessfullyRanAt":null,"lastHealthCheckAt":"2026-10-29T13:08:12.055Z","isFirstParty":false,"canonicalSlug":"css-design-calc-modular-type-scale-dbd4e560"}