Fluid type clamp() API

Builds a CSS clamp() for fluid type by linearly interpolating font size between a min/max viewport, returning the slope (vw), intercept (rem), and a ready-to-paste clamp() string. Answers 'What clamp() scales 16px to 24px between 320px and 1280px viewports?', 'What is the vw slope for fluid type?'.

Price$0.04per request

MethodPOST

Route/v1/design/fluid-type-clamp

StatusLive

MIME typeapplication/json

Rate limit120/minute

Cache0s public

designtypographyclampfluid-typeresponsivecssviewportvw

API URLhttps://x402.hexl.dev/v1/design/fluid-type-clamp

Integration docs

Example request

{
  "minFontPx": 16,
  "maxFontPx": 24,
  "minViewportPx": 320,
  "maxViewportPx": 1280
}

Example response

{
  "minFontPx": 16,
  "maxFontPx": 24,
  "minViewportPx": 320,
  "maxViewportPx": 1280,
  "rootPx": 16,
  "slopeVw": 0.8333,
  "interceptRem": 0.8333,
  "minRem": 1,
  "maxRem": 1.5,
  "clamp": "clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)",
  "css": "font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);",
  "interpretation": "Scales from 16px at 320px viewport to 24px at 1280px."
}

Input schema

{
  "type": "object",
  "required": [
    "minFontPx",
    "maxFontPx",
    "minViewportPx",
    "maxViewportPx"
  ],
  "properties": {
    "minFontPx": {
      "type": "number",
      "description": "Font size at min viewport",
      "examples": [
        16
      ]
    },
    "maxFontPx": {
      "type": "number",
      "description": "Font size at max viewport",
      "examples": [
        24
      ]
    },
    "minViewportPx": {
      "type": "number",
      "description": "Min viewport width in px",
      "examples": [
        320
      ]
    },
    "maxViewportPx": {
      "type": "number",
      "description": "Max viewport width in px",
      "examples": [
        1280
      ]
    },
    "rootPx": {
      "type": "number",
      "description": "Root font size for rem output (default 16)",
      "examples": [
        16
      ]
    }
  }
}

Output schema

{
  "type": "object",
  "additionalProperties": true
}