Fluid Scaling

Continuous viewport-responsive type and spacing with clamp() — no breakpoints, no jumps. Activate with a single attribute.

Why Fluid

Traditional responsive design uses breakpoints — fixed thresholds where layouts snap between states. This creates three problems:

Jarring jumps. A heading that's 2rem at 767px and 3rem at 768px creates a visible pop.
False taxonomy. "Mobile", "tablet", "desktop" are marketing categories, not engineering primitives. A 1024px laptop in portrait mode isn't a tablet.
Combinatorial explosion. Every breakpoint doubles the test matrix. Three breakpoints means eight states to verify.

Fluid scaling replaces this with continuous interpolation. Values ease smoothly from a minimum (at 320px) to a maximum (at 1440px). One rule, infinite states, zero jumps.

Activation

Add the data-fluid attribute to <html>. Remove it to revert to fixed values instantly.

Fluid scaling is opt-in so existing sites aren't affected. Once activated, it overrides the static --font-size-* and --size-unit tokens with clamp() values.

What Changes

Typography

Each of the nine --font-size-* tokens gets a clamp() value. Small sizes barely change (xs stays near 0.75rem); large sizes scale dramatically (5xl grows from ~2rem to ~4rem). This creates a tighter ratio at narrow viewports (more uniform hierarchy, easier to scan) and a wider ratio at wide viewports (more dramatic headings, clearer visual weight).

Spacing

All nine --size-* tokens (3xs through 3xl) are derived from --size-unit via calc(). Making --size-unit a clamp() value makes every spacing token fluid automatically — a single override cascades to the entire system.

Content Widths

--content-normal and --measure-normal also scale, expanding reading areas on wider screens while keeping comfortable line lengths on narrow ones.

Presets

Attribute	Type Ratio	Space Swing	Character
`data-fluid="compact"`	1.067 → 1.2	±11%	Tight, uniform hierarchy. Good for dense UIs and dashboards.
`data-fluid`	1.125 → 1.25	±10%	Balanced, general-purpose. Works for most content sites.
`data-fluid="spacious"`	1.2 → 1.333	±11%	Generous, dramatic headings. Marketing pages and editorial layouts.

Pointer Detection

Pointer detection is always on — no opt-in attribute needed. It uses CSS media queries to adapt interaction style to the device's input capabilities.

What It Does

@media (pointer: coarse): Touch and stylus devices get 44px minimum target sizes on buttons, inputs, and selects — enforcing WCAG 2.5.8 target size requirements.
@media (hover: none): On devices without hover (phones, tablets), hover-only motion effects like lift and scale are disabled. Content remains accessible without hover interactions.

With Themes

data-fluid composes with data-theme. Most themes only customize colors and fonts, so fluid scaling works without any theme-side changes.

The a11y-large-text accessibility theme includes dedicated fluid compound rules — its larger base sizes (1.25rem body, 0.3125rem unit) also scale fluidly when data-fluid is present.

Custom Parameters

For full control over ratios and viewport ranges, use the interactive tools:

Fluid Sizing tool — visualize and export fluid type/space scales. Use the "VB-native" export mode for [data-fluid="custom"] output.
Theme Lab — when fluid sizing is enabled, the exported CSS includes a [data-fluid] compound block scoped to your theme.

Both tools produce production-ready clamp() CSS. Paste it into your project stylesheet:

When Not To Use Fluid Scaling

Pixel-precise dashboards — data-dense UIs where every pixel matters may prefer fixed tokens.
Print stylesheets — print media has a fixed page size; fluid scaling adds no value.
Embedded widgets — components that render at a known fixed size don't benefit from viewport-relative scaling. Use container queries instead.
Existing breakpoint systems — if your project already has a mature breakpoint-based approach, mixing in fluid tokens can create unpredictable interactions.