{"uid":"cap_fkiWnk4Eesa80o0498Jqi","slug":"css-design-calc-line-length-readability-dce81b74","name":"CSS Design Calc – Line Length Readability","description":"Estimate characters per line from column width and font size and rate it for readability (45-75 ideal, WCAG max 80).","url":"https://css-design-calc.x402tookit.com/line-length?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":["widthPx","fontSizePx"],"properties":{"widthPx":{"type":"number","description":"Text column width in px"},"fontSizePx":{"type":"number","description":"Font size in px"},"avgCharWidthEm":{"type":"number","description":"Average character width in em; 0.5 is typical for Latin text (default 0.5; 0.45 condensed, 0.55 wide)"}}}},"additionalProperties":false},"output":{"type":"object","required":["type"],"properties":{"type":{"type":"string"},"example":{"type":"object","properties":{"asOf":{"type":["null","string"]},"source":{"type":["null","string"]},"reasons":{"type":["array","null"],"items":{"type":"string"}},"summary":{"type":["null","string"]},"verdict":{"type":["null","string"]},"widthPx":{"type":["null","number"]},"degraded":{"type":["boolean","null"]},"disclaimer":{"type":["null","string"]},"fontSizePx":{"type":["null","number"]},"notChecked":{"type":["array","null"],"items":{"type":"string"}},"suggestedCss":{"type":["null","string"]},"widthFor45Px":{"type":["null","number"]},"widthFor66Em":{"type":["null","number"]},"widthFor66Px":{"type":["null","number"]},"widthFor75Px":{"type":["null","number"]},"widthFor80Px":{"type":["null","number"]},"withinWcagAaa":{"type":["boolean","null"]},"avgCharWidthEm":{"type":["null","number"]},"wcagAaaLineLimit":{"type":["null","number"]},"charactersPerLine":{"type":["null","number"]},"minimumLineHeight":{"type":["null","number"]},"wcagTextSpacingOverridePx":{"type":["null","object"],"properties":{"lineHeight":{"type":["null","number"]},"wordSpacing":{"type":["null","number"]},"letterSpacing":{"type":["null","number"]},"paragraphSpacing":{"type":["null","number"]}}},"minimumParagraphSpacingMultipleOfLineSpacing":{"type":["null","number"]}}}}}}},"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_SSctoyIWLsnqleXvKC1R9","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":"Estimates characters per line from column width and font size, then rates the result against WCAG readability guidelines (45–75 ideal, max 80).","exampleAgentPrompt":"Can you check how many characters per line I'll get in a 680px wide text column at 18px font size, and tell me if that's within WCAG readability guidelines?","exampleUseCases":[{"title":"Accessibility audit for article layout","prompt":"My blog article body text is 720px wide and I'm using a 16px font — how many characters per line is that, and does it pass WCAG line-length guidelines?"},{"title":"Choosing column width for a design system","prompt":"I'm building a design system and want a column width that gives roughly 66 characters per line at 18px font size with a normal Latin font — what pixel width should I use?"},{"title":"Responsive typography sanity check","prompt":"At 14px font size and a 600px container, will my text be readable? Tell me the characters per line and whether it's in the ideal 45–75 range, and suggest any CSS fix if needed."}],"resultDescription":"Returns the estimated characters per line, a readability verdict, whether the layout is within WCAG AAA limits (max 80 CPL), suggested CSS to fix issues, pixel widths corresponding to 45, 66, 75, and 80 CPL thresholds, minimum recommended line height, WCAG text spacing override values, and a human-readable summary of findings.","failureModes":["Missing required widthPx or fontSizePx parameters returns a validation error","Non-numeric or zero values for width or font size may produce nonsensical CPL estimates","Extremely large or small font sizes may yield edge-case outputs outside typical typographic ranges","avgCharWidthEm values far outside 0.45–0.55 may produce results inconsistent with real fonts"],"whenToPreferThis":"Use this endpoint when you need a fast, WCAG-aware calculation of line length readability for a specific column width and font size combination, especially when you want actionable CSS suggestions and exact pixel thresholds for ideal character counts. Prefer this over manual calculation whenever WCAG AAA compliance (80 CPL max) needs to be checked programmatically in a design or audit workflow.","instructions":null,"reviewSummary":null,"reviewSummaryHighlights":null,"reviewSummaryConcerns":null,"reviewSummaryGeneratedAt":null,"activationCount":0,"lastUsedAt":null,"lastSuccessfullyRanAt":null,"lastHealthCheckAt":"2026-10-30T00:35:49.791Z","isFirstParty":false,"canonicalSlug":"css-design-calc-line-length-readability-dce81b74"}