CSS clamp() Min/Preferred/Max Builder

Build bounded fluid CSS typography clamp from caller font/viewport endpoints and rem root; root changes affect rem representation, no universal breakpoints or accessibility certification.

Description

Fluid font sizing interpolates between chosen viewport endpoints and clamps at font-size endpoints.

Fluid font sizing interpolates between chosen viewport endpoints and clamps at font-size endpoints. rem representation depends on the supplied root size.^[1]

Enter positive sizes/viewports/root, increasing viewport endpoints and nondecreasing font endpoints. Return clamp expression, 100×slope vw coefficient and rem intercept, rounded to 12 significant digits in CSS.

When to use CSS clamp() Min/Preferred/Max Builder

Use CSS clamp() Min/Preferred/Max Builder when you need to evaluate the supplied records under the calculation and evidence rules below. No universal breakpoints, browser measurement or accessibility guarantee is provided.

Prepare measured font or typeset-layout values and the explicit design policy requested. For text or font bytes, use the supported syntax explained below.

How to use CSS clamp() Min/Preferred/Max Builder and understand its results

Prepare measured font or typeset-layout values and the explicit design policy requested. For text or font bytes, use the supported syntax explained below.
Enter minimumFontPx, maximumFontPx, minimumViewportPx, maximumViewportPx, rootFontPx using the field table and calculation rules, then run the tool.
Read cssClampExpression, preferredVwCoefficient, preferredInterceptRem. The explanation below defines the units, signs, ordering and any flags or placeholder values.
If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.

Input field	Meaning	Value type; see rules below	Requirement
minimumFontPx	Minimum font px	number	Required
maximumFontPx	Maximum font px	number	Required
minimumViewportPx	Minimum viewport px	number	Required
maximumViewportPx	Maximum viewport px	number	Required
rootFontPx	Root font px	number	Required

slope=(maxFont−minFont)/(maxViewport−minViewport); interceptRem=(minFont−slope×minViewport)/root

Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.

Output field	Meaning	Value type
cssClampExpression	Css clamp expression	string
preferredVwCoefficient	Preferred vw coefficient	number
preferredInterceptRem	Preferred intercept rem	number

json

{
  "input": {
    "minimumFontPx": 16,
    "maximumFontPx": 24,
    "minimumViewportPx": 400,
    "maximumViewportPx": 800,
    "rootFontPx": 16
  },
  "output": {
    "cssClampExpression": "clamp(1rem, 0.5rem + 2vw, 1.5rem)",
    "preferredVwCoefficient": 2,
    "preferredInterceptRem": 0.5
  }
}

Limitations and assumptions

No universal breakpoints, browser measurement or accessibility guarantee is provided.

Numeric inputs, where present, must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors.

Alternative or Complementary methods

Use Type Scale Token Naming Export: Named type-scale tokens export measured design choices as CSS custom properties. Naming policy should be explicit and stable. For a complementary task, use Heading Step Consistency Checker: Adjacent heading-size ratios describe a measured hierarchy. Consistency with a target scale differs from generating an ideal hierarchy.

References

CSS clamp() Min/Preferred/Max Builder — tool.io

Similar or alternative tools

Type Scale Token Naming Export
Named type-scale tokens export measured design choices as CSS custom properties. Naming policy should be explicit and stable.
Heading Step Consistency Checker
Adjacent heading-size ratios describe a measured hierarchy. Consistency with a target scale differs from generating an ideal hierarchy.