Skip to content

Fluid type

Preview Available in release assets

Expose three bounded, rem-based fluid type roles generated from recorded minimum and maximum scale inputs.

Fluid type primary example

Show code
<div class="thin-prose">
  <h2 style="font-size: var(--thin-text-2)">Fluid heading</h2>
  <p style="font-size: var(--thin-text-0)">Body and headings share one viewport progress value by default, with bounded rem sizes and no JavaScript.</p>
</div>

Anatomy

  • --thin-text-0 body role
  • --thin-text-1 supporting heading role
  • --thin-text-2 display role
  • Recorded scale provenance
  • Shared progress by default with a clamped trigonometric fallback

Variants and sizes

  • Body
  • Heading
  • Display
  • Shared progress

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Minimum viewport bound
  • Fluid interval
  • Maximum viewport bound
  • 200% and 400% zoom
  • Long localized text

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

No interaction is added. Values respond to viewport width within bounds and retain a rem contribution for user text settings.

Accessibility

Token size does not establish heading level; use semantic headings. Test zoom and reflow, avoid viewport-only type formulas, and do not shrink long labels to force a fit.

Contract
PLATFORM
Basis
Native CSS layout and document defaults over semantic HTML; no APG widget

API

Consume --thin-text-0, --thin-text-1, and --thin-text-2 from a complete theme. Every theme uses one shared viewport progress ratio by default, including nested themes, without an opt-in attribute. Set viewport and font endpoints on :root or the relevant theme scope; keep viewport maximum greater than minimum and font maximum at least minimum. For a plain local content scope, data-fluid-type=progress recomputes inherited type roles using local endpoints. Direct unlayered token overrides still win. Generation inputs and legacy clamp fallback values are exported from ./tokens.

Behavior tier: css-only

Hosts

Apply the class to the HTML element that supplies the appropriate landmark or content role.

  • :root
  • [data-theme]
  • [data-fluid-type="progress"]

Custom properties

PropertyDefaultDescription
--thin-type-viewport-min20remViewport length where progress starts; use rem to retain user font scaling.
--thin-type-viewport-max77.5remViewport length where progress ends; must exceed the minimum.
--thin-text-0-min1remMinimum rem size of --thin-text-0 in a progress scope.
--thin-text-0-max1.125remMaximum rem size of --thin-text-0 in a progress scope.
--thin-text-1-min1.4remMinimum rem size of --thin-text-1 in a progress scope.
--thin-text-1-max1.9125remMaximum rem size of --thin-text-1 in a progress scope.
--thin-text-2-min1.96remMinimum rem size of --thin-text-2 in a progress scope.
--thin-text-2-max3.25125remMaximum rem size of --thin-text-2 in a progress scope.

Examples

Default shared progress with named endpointsLoad themes.css, then set endpoints on the root or a theme scope. No progress opt-in is needed. The original clamp tokens remain the last-resort fallback if neither progress nor CSS trigonometry is supported.

Coordinated fluid type

Explicit endpoints, one shared viewport interval.

<section data-theme="neutral" style="--thin-type-viewport-min: 20rem; --thin-type-viewport-max: 77.5rem; --thin-text-2-min: 2rem; --thin-text-2-max: 3.25rem">
  <h2 style="font-size: var(--thin-text-2)">Coordinated fluid type</h2>
  <p style="font-size: var(--thin-text-0)">Explicit endpoints, one shared viewport interval.</p>
</section>

Fallback

Browser font sizing remains readable without the generated type roles.

Assets and dependencies

  • /themes.css
  • /foundation.css

Dependencies: None

Source: packages/ui/src/tokens/scales.ts

Composition

Derived from the examples and style specs, not authored.

Composes