Density & Fluid typography
data-density on <html> scales every --size-* token. data-typo="fixed" disables the fluid clamp() scale.
Density:
Typo:
Type scale
text-5xl
text-4xl
text-3xl
text-2xl
text-lg — paragraph
text-base — body
text-sm — small
<html data-typo="fixed"> <!-- disables fluid scaling -->Spacing under density
Card 1
Card padding scales with density.
Try compact or spacious above.
<html data-density="compact"> <!-- ~80% spacing -->
<html data-density="spacious"> <!-- ~120% spacing -->Attribute reference
| Attribute | Effect |
|---|---|
data-density="compact" | All --size-1…-10 tokens scaled down ~80%. |
data-density="spacious" | All size tokens scaled up ~120%. |
data-typo="fixed" | Locks --text-* to static rem values (disables clamp()). |
data-theme="dark" | Force dark scheme (plus light / high-contrast / sepia / nord / ocean / rose). |
data-font="modern" | Swap font stack (modern / tech / minimal / artistic). |