Zasada 04

Płynna typografia

Sztywne rozmiary czcionek na breakpointach tworzą martwe strefy, w których layout jest już za ciasny, a tekst jeszcze za duży. Funkcja clamp() daje skalę, która rośnie liniowo z viewportem i ma bezpieczne granice z obu stron.

Zwężaj scenę i patrz, jak tekst płynie

Rozmiary w podglądzie liczone są z szerokości kontenera (jednostki cqi), więc suwak działa jak zmiana ekranu. Ramka rezerwuje wysokość najwęższej sceny, dlatego reszta strony nawet nie drgnie.

Szerokość sceny100%

Studio na miarę

Tekst płynie razem ze sceną

Żadnych progów, żadnych przeskoków. Nagłówek, akapit i odstępy skalują się z jednej formuły, więc kompozycja zachowuje proporcje na każdej szerokości, od zegarka po billboard.

text-fluid-sm: clamp(0.875rem, 0.83rem + 0.19vw, 1rem)
text-fluid-base: clamp(1rem, 0.93rem + 0.29vw, 1.1875rem)
text-fluid-lg: clamp(1.125rem, 1.01rem + 0.48vw, 1.4375rem)
text-fluid-xl: clamp(1.375rem, 1.14rem + 0.95vw, 2rem)
text-fluid-2xl: clamp(1.75rem, 1.31rem + 1.81vw, 2.9375rem)
text-fluid-3xl: clamp(2.25rem, 1.46rem + 3.24vw, 4.375rem)

Krok skali	Formuła
text-fluid-sm	clamp(0.875rem, 0.83rem + 0.19vw, 1rem)
text-fluid-base	clamp(1rem, 0.93rem + 0.29vw, 1.1875rem)
text-fluid-lg	clamp(1.125rem, 1.01rem + 0.48vw, 1.4375rem)
text-fluid-xl	clamp(1.375rem, 1.14rem + 0.95vw, 2rem)
text-fluid-2xl	clamp(1.75rem, 1.31rem + 1.81vw, 2.9375rem)
text-fluid-3xl	clamp(2.25rem, 1.46rem + 3.24vw, 4.375rem)

Reguły

Każdy rozmiar tekstu to clamp(minimum, wartość płynna, maksimum), nigdy goła jednostka vw.
Skala jest systemem: kilka nazwanych kroków zamiast przypadkowych wartości per komponent.
Skala jest kalibrowana do ekranów referencyjnych: minimum przypada dokładnie na 390 px, maksimum dokładnie na 1440 px.
Interlinia i światło skalują się razem z rozmiarem, nie osobno.
Długość wiersza trzyma się zakresu od 45 do 75 znaków niezależnie od szerokości ekranu.

Wzorzec w kodzie

Skala zdefiniowana raz, jako design tokens

@theme {
  --screen-mobile: 390px;
  --screen-desktop: 1440px;

  --text-fluid-base: clamp(1rem, 0.93rem + 0.29vw, 1.1875rem);
  --text-fluid-base--line-height: 1.65;
  --text-fluid-xl: clamp(1.375rem, 1.14rem + 0.95vw, 2rem);
  --text-fluid-xl--line-height: 1.3;
  --text-fluid-3xl: clamp(2.25rem, 1.46rem + 3.24vw, 4.375rem);
  --text-fluid-3xl--line-height: 1.04;
}

Użycie: nazwane kroki plus kontrola długości wiersza

<h1 className="text-fluid-3xl font-semibold text-balance">
  Nagłówek, który nigdy nie przeskakuje
</h1>
<p className="max-w-[65ch] text-fluid-base text-pretty">
  Akapit trzyma od 45 do 75 znaków w wierszu na każdej szerokości.
</p>