Variabilní fonty v produkci: kompromisy, o kterých vám nikdo neřekne

Variabilní fonty nejsou kouzelná komprese písem

Variabilní fonty se často představují jako elegantní odpověď na webovou typografii: jeden soubor, mnoho řezů, méně požadavků, plynulejší design systémy. Tento argument je v zásadě správný, ale neúplný.

V produkci variabilní font nepřipomíná ani tak nahrazení šesti souborů jedním, jako spíše přijetí nového typografického runtime. Získáte výrazovou kontrolu nad tloušťkou, šířkou, sklonem, optickou velikostí a někdy i nad vlastními osami. Zároveň ale přebíráte nová rozhodnutí o velikosti souboru, vykreslování v prohlížečích, chování záložních písem, řízení designu a měření výkonu.

Výsledek může být vynikající. Může být ale také horší než statické nastavení, které nahradil.

Pokud váš současný web načítá pět řezů stejné rodiny, dobře subsetovaný variabilní font může snížit počet požadavků a zjednodušit CSS. Pokud váš web načítá jen základní řez a tučný řez, variabilní font může přidat bajty kvůli flexibilitě, ze které žádný uživatel nikdy nebude mít prospěch. Právě tento produkční kompromis se často vynechává.

Pro širší základ ke strategii načítání písem je užitečným doplňkem náš průvodce tím, proč webové fonty stále patří mezi nejsnazší výkonnostní zlepšení na většině webů. Variabilní fonty nemění základy: posílejte méně bajtů, snižujte zpoždění vykreslení a zajistěte, aby byl text se záložním písmem přijatelný.

Zřejmá výhoda: méně souborů, výraznější typografie

Tradiční nastavení statických fontů obvykle vypadá takto:

• Regular 400
• Italic 400
• Medium 500
• Semibold 600
• Bold 700
• Možná samostatné display písmo

Každý soubor se samostatně stahuje, cachuje a vykresluje. Pokud stránka používá více řezů v první obrazovce, požadavky se rychle hromadí.

Variabilní font může několik těchto řezů sloučit do jednoho souboru. Místo načítání Inter-Regular.woff2, Inter-Medium.woff2 a Inter-Bold.woff2 načtete jeden variabilní soubor a použijete font-weight: 400 700 v souvislém rozsahu.

To přináší skutečné výhody:

• Méně souborů písem ke správě
• Konzistentnější interpolaci mezi řezy
• Jemně odstupňovanou responzivní typografii
• Snazší systémy motivů
• Lepší sladění s design tokeny

Pro design systémy je tato kontrola obzvlášť užitečná. Popisek tlačítka může používat 580 místo toho, aby byl nucen do 500 nebo 600. Titulek v úzké kartě může použít mírně zúženou osu šířky, pokud ji font podporuje. Velký nadpis může využít optickou velikost, když je dostupná.

To, že tyto možnosti existují, ale neznamená, že byste je měli používat všechny.

První skrytý kompromis: jeden soubor může být větší než soubory, které skutečně potřebujete

Variabilní font obsahuje interpolační data pro určitý designový prostor. Tento designový prostor má svou cenu. Jeden soubor variabilního fontu může být větší než jeden nebo dva soubory statických fontů.

To není problém, když nahrazuje mnoho souborů. Problém to je, když nahrazuje střídmou sadu.

Zvažte dva běžné případy:

Případ A: marketingový web s mnoha řezy

Web napříč stránkami používá 300, 400, 500, 600, 700 a kurzívy. Pečlivě subsetovaný variabilní font pravděpodobně pomůže. Sníží režii požadavků a zjednoduší budoucí údržbu.

Případ B: produktová aplikace pouze se základním a tučným řezem

Rozhraní používá 400 a 700 a jako zálohu systémová písma. Variabilní font může přidat zbytečné bajty. Flexibilita je příjemná ve Figma, ale v prohlížeči není vždy užitečná.

Chybou je porovnávat „jeden variabilní soubor“ s „mnoha teoretickými statickými soubory“ místo porovnání se soubory, které vaše skutečné stránky aktuálně používají.

Změřte skutečné bajty písem načtené na klíčových šablonách. Potom otestujte variabilní verzi se stejným subsetem znaků a stejnou strategií preloadu. Nepředpokládejte, že variabilní verze vyhraje.

Druhý kompromis: subsetování je důležitější, ne méně důležité

Variabilní fonty zvyšují hodnotu subsetování, protože základní soubor může obsahovat mnoho věcí: glyfy, jazykovou podporu, OpenType funkce, více os a metadata.

Většina produkčních webů nepotřebuje každý glyf ve fontu. Pokud obsluhujete jen angličtinu, pravděpodobně nepotřebujete plné panevropské pokrytí, cyrilici, řečtinu, vietnamštinu a každý blok symbolů. Pokud obsluhujete více jazyků, i tak můžete chtít jazykově specifické subsety místo jednoho univerzálního souboru.

Praktický přístup obvykle vypadá takto:

1. Udržujte základní latinský subset pro většinu uživatelů.
2. Rozšířené subsety přidávejte jen tam, kde je obsah potřebuje.
3. Používejte unicode-range, aby prohlížeč vybral správný soubor.
4. Pro vzácná písma ponechte v případě potřeby statické zálohy.

Právě tady mohou být variabilní fonty nepohodlné. Některé fontové pipeline snadno subsetují statické fonty, ale špatně zacházejí s variabilními osami, hintingem nebo metadaty. Vždy ověřte, že výstupní font se stále chová správně v celém rozsahu os, který plánujete používat.

Rozbitý subset je horší než velký font. Selhává potichu: zvláštním vykreslováním, chybějícími glyfy, nekonzistentními řezy nebo změnami layoutu, které se projeví jen v konkrétní lokalizaci.

Třetí kompromis: CSS může být až příliš chytré

Variabilní fonty zpřístupňují osy přes CSS. Standardní osy, jako je tloušťka a šířka, se čistě mapují na vlastnosti jako font-weight a font-stretch. Vlastní osy často používají font-variation-settings.

Tato síla svádí týmy k přílišné vynalézavosti:

.card-title {
  font-variation-settings: "wght" 623, "wdth" 92;
}

To může být technicky platné, ale jen zřídka jde o dobré rozhraní pro design systém. Náhodné hodnoty os rozeseté po CSS se špatně kontrolují, špatně refaktorují a snadno se zneužijí.

Dávejte přednost design tokenům nebo pojmenovaným utilitám:

:root {
  --font-weight-body: 400;
  --font-weight-heading: 680;
  --font-width-compact: 94;
}

.card-title {
  font-weight: var(--font-weight-heading);
  font-stretch: var(--font-width-compact);
}

Kde je to možné, používejte standardní CSS vlastnosti. font-variation-settings si vyhraďte pro osy, které nemají vlastnost na vyšší úrovni.

Opatrní buďte také u animací. Animace tloušťky nebo šířky může být v malých dávkách vkusná, ale může také způsobit přepočet layoutu, vizuální nestabilitu a zbytečnou práci na méně výkonných zařízeních. Typografie by se neměla stát hřištěm pro pohyb jen proto, že to font umožňuje.

Čtvrtý kompromis: rozdíly ve vykreslování stále existují

Podpora variabilních fontů v moderních prohlížečích je silná, ale vykreslování není všude totožné. Rasterizátory textu v operačních systémech, prohlížečová jádra, antialiasing a hinting fontů ovlivňují výsledek.

Řez variabilního fontu o hodnotě 500 nemusí vypadat přesně jako statický soubor 500 ze stejné rodiny. U některých rodin jsou statické instance ručně laděné, zatímco interpolované variabilní instance jsou generované matematicky. U malých velikostí na tom může záležet.

To je obzvlášť relevantní pro běžný text, navigaci, husté tabulky a popisky v UI. Čím více textu vaše rozhraní obsahuje, tím víc byste měli testovat skutečné podmínky čtení, ne jen hero typografii.

Pokud při přechodu na variabilní fonty zároveň přehodnocujete svůj typografický systém, začněte čitelností, ne novostí. Náš praktický průvodce čitelnou typografií na moderním webu pokrývá neokázalá rozhodnutí — délku řádku, velikost, kontrast, rozestupy — na kterých obvykle záleží víc než na 1 000 dostupných tloušťkách písma.

Pátý kompromis: caching může pomoci i uškodit

Jeden soubor variabilního fontu lze jednou uložit do cache a znovu používat napříč stránkami. To je dobré.

Pokud je ale soubor velký a blokuje vykreslení, první návštěvy zaplatí plnou cenu předem. Statické fonty lze někdy načítat selektivněji: nejdřív základní řez pro běžný text, tučný později, display písmo jen na stránkách, které ho potřebují.

Univerzální odpověď neexistuje. Správné nastavení závisí na vzorcích návštěvnosti:

• Navštěvují uživatelé během jedné relace mnoho stránek? Sdílený variabilní soubor se může vyplatit.
• Přijdou uživatelé na jeden článek a odejdou? Menší statické soubory mohou být lepší.
• Potřebuje domovská stránka jen jeden řez? Nepreloadujte velký designový prostor kvůli budoucím stránkám.
• Je aplikace za přihlášením a uživatelé se často vracejí? Opakované využití cache nabývá na hodnotě.

I preload vyžaduje zdrženlivost. Preloadujte font potřebný pro text v první obrazovce, ne každý možný font. Preload je nárok na prioritu. Příliš mnoho nároků na prioritu se mění v šum.

Šestý kompromis: Lighthouse nevysvětlí celý příběh

Výkonnostní nástroje mohou ukázat nevyužité bajty písem, požadavky blokující vykreslení, posun layoutu a síťové náklady. Nedokážou vám ale říct, zda vizuální flexibilita stojí za datovou zátěž.

Migraci na variabilní font je potřeba posuzovat podle několika signálů:

• Celkový objem přenesených bajtů písem při prvním zobrazení
• Počet požadavků na fonty
• Dopad na Largest Contentful Paint
• Cumulative Layout Shift způsobený výměnou písem
• Chování cache při opakovaném zobrazení
• Vizuální shoda se schválenými návrhy
• Čitelnost v běžných velikostech

Pokud se report po migraci fontů zabarví červeně, nepanikařte. Problémem může být pořadí preloadu, metriky záložního písma nebo nesoulad subsetu, nikoli samotný variabilní font. Náš průvodce jak číst report Lighthouse bez paniky je zde relevantní: berte laboratorní skóre jako diagnostické indicie, ne jako rozsudek.

Praktický produkční checklist

Před nasazením variabilního fontu si odpovězte na tyto otázky:

1. Jaké statické soubory nahrazuje?

Seznamte skutečné soubory používané v produkci, ne to, co design systém teoreticky podporuje. Zahrňte řezy, styly, znakové sady a šablony stránek.

2. Které osy zpřístupníte?

Většina týmů by měla zpřístupnit tloušťku, možná šířku a jen zřídka něco dalšího. Optická velikost může být užitečná, pokud ji font dobře podporuje, ale otestujte ji. Vlastní osy by měly mít jasný produktový účel.

3. Dokážete bezpečně subsetovat?

Po subsetování spusťte vizuální regresní kontroly. Otestujte znaky s diakritikou, interpunkci, měnové symboly, ikony, pokud jsou zahrnuté, a všechny podporované jazyky.

4. Jsou nastavené metriky záložního písma?

Kde je to vhodné, používejte moderní CSS nástroje jako size-adjust, ascent-override, descent-override a line-gap-override. Dobré metriky záložního písma snižují posun layoutu během načítání fontu.

5. Je font-display záměrné?

font-display: swap je běžné, ale ne vždy dokonalé. Zlepšuje viditelnost textu, ale pokud jsou metriky záložního písma špatné, může způsobit nápadnou výměnu. optional může fungovat pro nekritické fonty, kde je důležitější vyhnout se narušení než garantovat značkovou typografii.

6. Testovali jste méně výkonná zařízení?

Font, který působí bez problémů na vývojářském notebooku, se může na levném hardwaru s Android vykreslovat pomalu. Otestujte alespoň jedno méně výkonné zařízení nebo throttlovaný profil.

7. Máte plán návratu?

Změny písem ovlivní každou stránku. Ponechte staré statické nastavení k dispozici dostatečně dlouho, abyste se mohli rychle vrátit, pokud se objeví problémy s vykreslováním, lokalizací nebo výkonem.

Kdy jsou variabilní fonty dobrou produkční volbou

Variabilní fonty obvykle stojí za zvážení, když:

• Používáte tři nebo více řezů ze stejné rodiny.
• Udržujete design systém napříč mnoha šablonami.
• Potřebujete responzivní typografii s kontrolou šířky nebo optické velikosti.
• Uživatelé běžně procházejí více stránek během jedné relace.
• Dokážete správně subsetovat a testovat fontovou pipeline.

Méně přesvědčivé jsou, když:

• Potřebujete jen základní a tučný řez.
• Variabilní soubor je výrazně větší než vaše současné nastavení.
• Font má špatnou interpolaci v textových velikostech.
• Váš tým bude po CSS rozesívat libovolné hodnoty os.
• Nedokážete otestovat lokalizaci a chování záložních písem.

Střízlivý pohled je tento: variabilní fonty jsou schopnost, ne optimalizace ve výchozím stavu. Odměňují týmy, které už dnes s fonty zacházejí pečlivě. Trestají týmy, které berou typografii jako dekoraci a načítání písem jako dodatečnou úvahu.

<!-- tool-cta:start -->

💡 Vyzkoušejte toto: Při vytváření podmnožiny a balení variabilního fontu pro produkci vytváří Webfont Generator výstup WOFF2 s odpovídajícím CSS.

<!-- tool-cta:end -->

Produkční pravidlo palce

Používejte variabilní fonty tehdy, když snižují složitost nebo umožňují jasný designový výsledek. Nepoužívejte je proto, že „jeden soubor“ zní čistěji.

Nejlepší produkční implementace bývají nudné: jeden pečlivě subsetovaný variabilní font, malý počet schválených hodnot os, rozumná záložní písma, zdrženlivý preload a testování na skutečných zařízeních. Není to tak vzrušující jako nekonečné typografické možnosti. Je ale mnohem pravděpodobnější, že to váš web zlepší.