text fluid responsive clamp typography responsive headings without breakpoints smoothly scaling text across viewports fluid typography for hero sections font sizes jump between breakpoints need smooth responsive typography want fluid text scaling without media queries
Fluid Size
Fetch snippet JSON:
curl https://webspire.de/snippets/text/fluid-size.json
Caption scales gently
Body copy grows with the viewport
Section heading adapts without jumps
Fluid type supports responsive rhythm
Large display text scales cleanly
Background
Quick Start
<h1 class="text-fluid-2xl font-bold">Fluid heading</h1>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Size
- 345 bytes · 19 lines
- Classes
-
.text-fluid-sm.text-fluid-base.text-fluid-lg.text-fluid-xl.text-fluid-2xl
text fluid responsive clamp typography
Responsive font sizes using clamp() that scale smoothly between a minimum and maximum size based on the viewport width. No media queries or breakpoints needed.
Fluid heading stack
<div class="space-y-2">
<p class="text-fluid-sm text-white/50">Small fluid</p>
<p class="text-fluid-base text-white/60">Base fluid</p>
<p class="text-fluid-lg text-white/70 font-medium">Large fluid</p>
<h2 class="text-fluid-xl text-white font-bold">Extra large fluid</h2>
<h1 class="text-fluid-2xl text-white font-black tracking-tight">2XL fluid heading</h1>
</div>