Wzorzec 22

Font, który wchodzi po cichu

Webfont zawsze się spóźnia, pytanie brzmi tylko, co widać w międzyczasie. font-display: swap renderuje tekst natychmiast fontem systemowym, ale naiwny fallback ma inne proporcje i po podmianie akapity łamią się od nowa. Deskryptory size-adjust, ascent-override i descent-override kalibrują fallback do metryk webfontu, więc zamiana dotyczy kształtu liter, nie geometrii strony.

Podmiana fontu w dwóch wersjach

Przełączaj między webfontem a fallbackiem i patrz na linię pod akapitem. Po lewej goły Arial łamie tekst inaczej i zmienia wysokość bloku. Po prawej ten sam Arial dostał size-adjust i overrides policzone z metryk Intera, więc geometria stoi.

✕ Fallback bez kalibracji

Webfont zawsze się spóźnia o kilkaset milisekund. Użytkownik zaczyna czytać fallbackiem, a gdy plik dotrze, przeglądarka podmienia krój w trakcie lektury. Jeśli metryki obu fontów się różnią, każda linia łamie się od nowa i wzrok gubi miejsce, w którym był.

↑ ta linia nie ma prawa się ruszyć

✓ Fallback z size-adjust

↑ ta linia nie ma prawa się ruszyć

Wartości 107.4%, 90.2% i 22.48% to metryki Intera przełożone na Ariala. Dokładnie takie deskryptory generuje next/font przy adjustFontFallback, które w tym projekcie jest włączone domyślnie.

Reguły

Tekst renderuje się od razu z font-display: swap, rendering nigdy nie czeka na plik fontu.
Fallback ma size-adjust, ascent-override i descent-override policzone z metryk webfontu, więc łamanie linii i wysokości nie drgną przy podmianie.
next/font liczy te wartości automatycznie (adjustFontFallback), ręczny @font-face wymaga ich policzenia raz, nie zgadywania.
Preload dostaje wyłącznie font pierwszego ekranu, odmiany zastępuje jeden plik variable font.

Wzorzec w kodzie

Fallback skalibrowany do metryk webfontu

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}

body {
  font-family: "Inter", "Inter Fallback", sans-serif;
}

next/font liczy deskryptory automatycznie

import { Inter } from "next/font/google";

const body = Inter({
  subsets: ["latin", "latin-ext"],
  display: "swap",
});

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

Zaimplementuj w moim projekcie wzorzec „Font, który wchodzi po cichu" z metodologii Liquid Design.

font-display: swap pokazuje tekst od razu, a fallback z size-adjust dziedziczy metryki webfontu, więc podmiana nie rusza ani jednej linii.

Wymagania:
- Tekst renderuje się od razu z font-display: swap, rendering nigdy nie czeka na plik fontu.
- Fallback ma size-adjust, ascent-override i descent-override policzone z metryk webfontu, więc łamanie linii i wysokości nie drgną przy podmianie.
- next/font liczy te wartości automatycznie (adjustFontFallback), ręczny @font-face wymaga ich policzenia raz, nie zgadywania.
- Preload dostaje wyłącznie font pierwszego ekranu, odmiany zastępuje jeden plik variable font.

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/wzorce/fonty