Addon · Typography

Type that flows.

Fluid font sizes with three intensity modifiers: standard, reduced, extreme.

Three modifiers

Resize the window to see each modifier scale at a different rate.

.fs-72-px (static) Aa

.fs-72 (standard fluid) Aa

.fs-72_ (reduced) Aa

.fs-72__ (extreme) Aa

Use as variable

font-size: var(--fs-36);
font-size: var(--fs-36_);
font-size: var(--fs-36__);

Use as utility class

<h1 class="fs-72">Headline</h1>
<p class="fs-16">Body</p>

Configure scale

@use 'eva-css-fluid' with (
  $font-sizes: (12, 16, 24, 36, 72)
);

Full reference

Modifier maths, calculation constants ($Φ, $ez), every --fs-* variable. /llms.txt has it all.