---
name: fluid-typography
description: "Build responsive type systems with deliberate contrast and stable line wrapping. Use for clamp, type scale, fonts."
---

# Fluid typography

Build responsive type systems with deliberate contrast and stable line wrapping.

## Implementation decisions

1. Keep body text at least 1rem, line height near 1.6, reading measure near 65ch.
2. Use clamp with a preferred value containing rem so font enlargement remains useful.
3. Balance short headings; allow long content to wrap naturally without forced truncation.
4. Self-host licensed font subsets including the writing systems actually used.

## Working source

Read [components/demos.tsx](../webcraft-shared/source/components/demos.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions.

## Verify observable behavior

- No overflow at 360px or 200% text zoom.
- Hierarchy remains legible without color.
- Content remains readable during font loading.

## Scope

Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative.

Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/typography

Version 2.0.0 · Original WEBCRAFT content · MIT