liquiddesign

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.

Poszerzaj ekran i patrz, jak tekst płynie

Suwak symuluje coraz szerszy ekran: scena renderuje się w symulowanej szerokości i skaluje do podglądu, jak w narzędziach preview. Rozmiary tekstu liczą się z szerokości kontenera (jednostki cqi), a ramka rezerwuje z góry najwyższy wariant, więc reszta strony nawet nie drgnie.

symulowany ekran

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.0625rem, 0.92rem + 0.57vw, 1.4375rem)
text-fluid-xl
clamp(1.25rem, 0.97rem + 1.14vw, 2rem)
text-fluid-2xl
clamp(1.5rem, 0.97rem + 2.19vw, 2.9375rem)
text-fluid-3xl
clamp(1.875rem, 0.95rem + 3.81vw, 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>

Prompt dla Claude

Wklej do Claude Code w swoim projekcie. Prompt niesie komplet reguł tej lekcji i ogólne zasady Liquid Design, więc implementacja trafia w metodologię bez tłumaczenia jej od zera.

Prompt do wklejenia
Zastosuj w moim projekcie zasadę „Płynna typografia" z metodologii Liquid Design.

Tekst nie przeskakuje między breakpointami. Płynie razem z ekranem, od zegarka po billboard.

Wymagania:
- 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.

Ogólne reguły Liquid Design, których implementacja nie może złamać:
- HTML jest semantyczny: button, a, nav, form, label, dialog, details, ul, dl i nagłówki h1-h6 zamiast div z onClick i ARIA dopisywanym ręcznie. div i span służą wyłącznie do layoutu, nigdy do interakcji ani struktury treści.
- Layout jest umową: treść, która dociera później, ma miejsce zarezerwowane od pierwszego renderu. Nic nie skacze.
- Stany ładowania, pustki, błędu i treści dzielą jeden layout.
- Typografia pochodzi z nazwanej, płynnej skali opartej o clamp(), nie z gołych rozmiarów.
- Animacje dotyczą wyłącznie transform i opacity, a prefers-reduced-motion redukuje je do natychmiastowej zmiany stanu.
- Breakpoint jest ostatecznością: najpierw container queries i repeat(auto-fit, minmax(...)).

Sposób pracy – zanim napiszesz pierwszą linię kodu:
- Sprawdź w plikach projektu, jak stylowane są komponenty (Tailwind, CSS Modules, vanilla-extract, styled-components, Sass, czysty CSS...) i pisz wyłącznie w tej konwencji. Niczego nie zakładaj z góry i nie dodawaj nowych zależności.
- Wymagania powyżej opisują właściwości CSS i atrybuty HTML, nie klasy narzędziowe. Przełóż je na system stylowania zastany w projekcie.
- Sprawdź framework komponentów, wersję i konwencje nazewnictwa, zamiast zakładać konkretny stack.
- Używaj istniejących tokenów projektu (kolory, typografia, odstępy). Jeśli czegoś brakuje, zaproponuj minimalne uzupełnienie w duchu istniejącego kodu, nie osobny system.
- Nie używaj klas, tokenów ani API, których nie znalazłeś w tym projekcie.

Pełny opis z żywym demo i kodem: https://liquid-design.website/zasady/typografia