# CSS Design Calc – Vertical Rhythm / Baseline Grid Snapper

> CSS Design Calc – Vertical Rhythm / Baseline Grid Snapper is a paid API for AI agents from css-design-calc.x402tookit.com, paid per call via x402, $0.02/call, status unknown (last checked 2026-10-29).

Snaps multiple font sizes to a baseline grid, returning unitless line-heights, baseline lines, and margins for each size in both px and rem.

## Facts

- Endpoint: GET https://css-design-calc.x402tookit.com/vertical-rhythm?utm_source=zero.xyz
- Price: $0.02/call
- Payment: x402
- Status: unknown
- Last checked: 2026-10-29
- Activations on Zero: 0
- Tags: x402
- Canonical page: https://www.zero.xyz/c/css-design-calc-vertical-rhythm-baseline-grid-snapper-ede4aaaf
- Structured record (JSON): https://api.zero.xyz/v1/capabilities/cap_e0Pu4kFpLo8iUiEvZsoND

Status and success rate cover calls made through Zero and Zero's own probes. Third-party monitors may report differently.

## How to call it through Zero

Zero handles the 402 payment challenge and records the run. With the Zero CLI installed (`npm i -g @zeroxyz/cli`):

```sh
zero fetch --capability css-design-calc-vertical-rhythm-baseline-grid-snapper-ede4aaaf
```

Example prompt: Snap font sizes 12, 14, 16, 20, 24, 32, and 48px to a baseline grid based on a 16px body font with a 1.5 line-height, and give me the unitless line-height and margin-bottom for each size.

## When to prefer this

Use this endpoint when you need to align a set of font sizes to a consistent vertical baseline grid — especially when building or auditing a CSS design system or component library. It is purpose-built for snapping multiple sizes simultaneously to a shared baseline, returning both the calculated CSS values and a ready-to-use CSS snippet. Prefer it over manual calculation or generic typography tools when you need precise unitless line-heights and baseline-consistent margins in one call.

## Known failure modes

- Missing required baseFontPx parameter returns an error
- Non-numeric or zero baseFontPx may cause division errors or unexpected output
- Extremely large font sizes or very small baselines may produce degenerate line counts
- minLineHeight greater than the computed optimal may cause overrides and warnings in reasons array
- Malformed comma-separated sizes string may be ignored or produce partial results

## How this service works

Snap line-heights for font sizes to a baseline grid: baseline unit, lines per element, unitless line-height and margins.

## Output

Returns a table of rows — one per font size — each with fontSizePx, rem, baselineLines, lineHeightPx, lineHeightUnitless, and marginBottomPx. Also includes the computed baselinePx, a summary, a ready-to-copy CSS block, and optionally reasons or warnings if any size could not be snapped cleanly.

## Request schema (JSON Schema)

```json
{
 "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": [
      "baseFontPx"
     ],
     "properties": {
      "sizes": {
       "type": "string",
       "description": "Comma separated font sizes in px to snap (default 12,14,16,20,24,32,40,48,64)"
      },
      "baseFontPx": {
       "type": "number",
       "description": "Body font size in px"
      },
      "minLineHeight": {
       "type": "number",
       "description": "Smallest allowed line-height multiple for any size (default 1.2)"
      },
      "baseLineHeight": {
       "type": "number",
       "description": "Body line-height as a multiple (default 1.5); baseline = fontsize x this"
      }
     }
    }
   },
   "additionalProperties": false
  },
  "output": {
   "type": "object",
   "required": [
    "type"
   ],
   "properties": {
    "type": {
     "type": "string"
    },
    "example": {
     "type": "object",
     "properties": {
      "css": {
       "type": [
        "null",
        "string"
       ]
      },
      "asOf": {
       "type": [
        "null",
        "string"
       ]
      },
      "rows": {
       "type": [
        "array",
        "null"
       ],
       "items": {
        "type": "object",
        "properties": {
         "rem": {
          "type": [
           "null",
           "number"
          ]
         },
         "fontSizePx": {
          "type": [
           "null",
           "number"
          ]
         },
         "lineHeightPx": {
          "type": [
           "null",
           "number"
          ]
         },
         "baselineLines": {
          "type": [
           "null",
           "number"
          ]
         },
         "marginBottomPx": {
          "type": [
           "null",
           "number"
          ]
         },
         "lineHeightUnitless": {
          "type": [
           "null",
           "number"
          ]
         }
        }
       }
      },
      "source": {
       "type": [
        "null",
        "string"
       ]
      },
      "reasons": {
       "type": [
        "array",
        "null"
       ],
       "items": {
        "type": "string"
       
… (truncated)
```

## More

- Live health (JSON, refreshed every minute): https://www.zero.xyz/c/css-design-calc-vertical-rhythm-baseline-grid-snapper-ede4aaaf/health.json
- [Zero catalog index](https://www.zero.xyz/llms.txt)
- [Other services from css-design-calc.x402tookit.com](https://www.zero.xyz/host/css-design-calc.x402tookit.com/llms.txt)