Vertical Rhythm

{
  "asOf": "2026-10-11T14:32:45.478Z",
  "baseFontPx": 16,
  "baseLineHeight": 1.5,
  "baselinePx": 24,
  "css": ":root { --baseline: 24px; } p { margin-block: 0 var(--baseline); }",
  "degraded": false,
  "disclaimer": "Screening signal computed from the named public source. Not financial, legal or investment advice; provided as is. Verify at the source before acting.",
  "minLineHeight": 1.2,
  "notChecked": [
    "font metrics: the visual baseline can sit off the grid for fonts with unusual ascent or descent",
    "WCAG 1.4.12 text-spacing overrides, which users can apply on top of your values",
    "…1 more"
  ],
  "reasons": [
    "Each size gets the fewest baseline units that keep its line-height at least 1.2 times the font size.",
    "Use margins in whole baseline units to keep text on the grid."
  ],
  "rows": [
    {
      "baselineLines": 1,
      "fontSizePx": 12,
      "lineHeightPx": 24,
      "lineHeightUnitless": 2,
      "marginBottomPx": 24,
      "rem": 0.75
    },
    {
      "baselineLines": 1,
      "fontSizePx": 16,
      "lineHeightPx": 24,
      "lineHeightUnitless": 1.5,
      "marginBottomPx": 24,
      "rem": 1
    }
  ],
  "source": "Baseline-grid arithmetic (line-height = a whole number of baseline units), computed locally",
  "summary": "Baseline unit 24px (16px x 1.5); 6 sizes snapped to whole multiples.",
  "verdict": "COMPUTED"
}

# bash or zsh: see the payment challenge. Nothing is charged.
curl -sS -g -i 'https://css-design-calc.x402tookit.com/vertical-rhythm?baseFontPx=16&baseLineHeight=1.5&sizes=12%2C16%2C20%2C24%2C32%2C48'

# x402 v2 sends the challenge base64-encoded in the PAYMENT-REQUIRED header (v1 sends it in the body).
# To read the header:
curl -sS -g -o /dev/null -D - 'https://css-design-calc.x402tookit.com/vertical-rhythm?baseFontPx=16&baseLineHeight=1.5&sizes=12%2C16%2C20%2C24%2C32%2C48' \
  | grep -i '^payment-required:' | cut -d' ' -f2 | tr -d '\r' | base64 --decode

// npm i @x402/fetch @x402/evm viem
import { wrapFetchWithPayment, x402Client } from "@x402/fetch";
import { registerExactEvmScheme } from "@x402/evm/exact/client";
import { privateKeyToAccount } from "viem/accounts";

// Pays at most $0.02 per call.
const client = new x402Client().setSpendControls({ maxAmountPerPayment: "$0.02" });
registerExactEvmScheme(client, { signer: privateKeyToAccount(process.env.EVM_PRIVATE_KEY) });
const pay = wrapFetchWithPayment(fetch, client);

// Not sure it's safe to pay? ToolVet checks it first for $0.005. Pay for that from a separate
// client: this one is capped at $0.02 per payment. GET https://toolvet.app/api/v1/check?url=https%3A%2F%2Fcss-design-calc.x402tookit.com%2Fvertical-rhythm
const res = await pay("https://css-design-calc.x402tookit.com/vertical-rhythm?baseFontPx=16&baseLineHeight=1.5&sizes=12%2C16%2C20%2C24%2C32%2C48");
console.log(res.status, await res.text());

# pip install "x402[requests,evm]"
import os
from eth_account import Account
from x402 import x402ClientSync
from x402.http.clients import x402_requests
from x402.mechanisms.evm import EthAccountSigner
from x402.mechanisms.evm.exact.register import register_exact_evm_client

# Pays at most $0.02 per call.
client = x402ClientSync().set_spend_controls({"max_amount_per_payment": "$0.02"})
register_exact_evm_client(client, EthAccountSigner(Account.from_key(os.environ["EVM_PRIVATE_KEY"])))

with x402_requests(client) as session:
    res = session.get("https://css-design-calc.x402tookit.com/vertical-rhythm?baseFontPx=16&baseLineHeight=1.5&sizes=12%2C16%2C20%2C24%2C32%2C48")
    print(res.status_code, res.text)