{"uid":"cap_wPvu_f67BVb6HsTzrX_8h","slug":"saylor-innovations-typographic-scale-generator-c04c20ed","name":"Saylor Innovations Typographic Scale Generator","description":"Modular typographic scale from a base size and ratio - px and rem for each step, line heights, CSS variables and fluid clamp() values between viewports","url":"https://saylorinnovations.com/api/design/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","properties":{"base":{"type":"string","description":"optional base size px, default 16"},"ratio":{"type":"string","description":"optional name (major-third, perfect-fourth, golden-ratio...) or number 1.05-2.5"},"steps_up":{"type":"string","description":"optional 1-10, default 6"}}}},"additionalProperties":false},"output":{"type":"object","required":["type"],"properties":{"type":{"type":"string","const":"json"},"example":{"type":"object","required":["base_px","ratio","steps"],"properties":{"note":{"type":"string","description":"Caveat or context for reading the result"},"ratio":{"type":"number","description":"Scale ratio used between steps"},"steps":{"type":"array","items":{"type":"object","properties":{"px":{"type":["number","null"],"description":"Size in pixels"},"rem":{"type":["number","null"],"description":"Size in rem"},"name":{"description":"Name"},"step":{"type":["number","null"],"description":"Step relative to the base size (0 is base)"},"fluid_clamp":{"description":"Fluid clamp"},"line_height":{"description":"Line height"}}},"description":"Scale steps with name, px, rem, line height and a fluid clamp() value"},"source":{"type":"string","description":"Data source the values come from"},"base_px":{"type":"number","description":"Base px"},"ratio_name":{"type":"string","description":"Ratio name"},"css_variables":{"type":"string","description":"Css variables"},"recommended_body_line_height":{"type":"number","description":"Recommended body line height"}}}}}}},"responseSchema":null,"example":null,"exampleRequest":null,"tags":["x402"],"displayCostAmount":"0.01","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.01/call","primary":{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.01","per":"call","confidence":"exact"},"accepted":[{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.01","per":"call","confidence":"exact"}]},"paymentMethods":[{"uid":"pm_3RBkWpEQovvOxzNuD8FM9","protocol":"x402","methodType":"crypto","chain":"base","mode":"charge","costAmount":"0.01","costPer":"request","priority":0,"asset":"0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913","unit":"request","depositMicros":null,"planRef":null}],"brandName":null,"brandSlug":null,"brandBaseUrl":null,"brandDocsUrl":null,"whatItDoes":"Generates a modular typographic scale from a base font size and ratio, returning px/rem values, line heights, CSS variables, and fluid clamp() values for each step","exampleAgentPrompt":"Generate a typographic scale starting from a 16px base using a perfect-fourth ratio with 6 steps up, and give me the px, rem, line heights, CSS variables, and fluid clamp() values for each step.","exampleUseCases":[{"title":"Design system type scale setup","prompt":"I'm building a design system and need a full typographic scale — start from 18px base, use a major-third ratio, and give me 8 steps up with CSS variables and fluid clamp values for responsive layouts."},{"title":"Golden ratio typography for landing page","prompt":"Can you calculate a modular type scale using the golden ratio starting from 16px with 5 steps up? I want the px and rem values plus line heights for each step."},{"title":"Fluid typography for responsive site","prompt":"I need fluid typography clamp() values for a website — use a 1.25 ratio, base size 16px, and 6 steps up so the fonts scale smoothly between viewport sizes."}],"resultDescription":"A JSON object containing the base px size, ratio value and name, an array of scale steps (each with step index, name, px size, rem size, line height, and fluid clamp() CSS value), CSS custom property declarations, recommended body line height, source attribution, and an optional note providing context.","failureModes":["Invalid ratio name returns an error — only recognized names like major-third, perfect-fourth, golden-ratio are accepted","steps_up outside 1–10 range may return a validation error","Non-numeric base value causes a parse error","Missing required method or type fields in the request wrapper return a 400 error"],"whenToPreferThis":"Choose this endpoint when you need a complete, ready-to-use typographic scale with CSS variables and fluid clamp() values in a single call — particularly useful for design system automation, code generation agents, or front-end scaffolding tools that need responsive typography without manual calculation.","instructions":null,"reviewSummary":null,"reviewSummaryHighlights":null,"reviewSummaryConcerns":null,"reviewSummaryGeneratedAt":null,"activationCount":0,"lastUsedAt":null,"lastSuccessfullyRanAt":null,"lastHealthCheckAt":"2026-10-18T12:56:23.900Z","isFirstParty":false,"canonicalSlug":"saylor-innovations-typographic-scale-generator-c04c20ed"}