Titulek se nejprve nezobrazí a pak skočí do jiného řádku. Fotografie už přitom dávno přišla. Za podobnou situací může být webové písmo a způsob, jakým jej šablona načítá. Začněte inventářem skutečně používaných fontů a řezů. Další optimalizační plugin přidávat nepotřebujete, dokud nevíte, které soubory a pravidla už stránka má.
Pro obsahový magazín je podstatný čitelný text na telefonu, dobrá diakritika a stabilní rozložení. Výrazná typografie může být součástí značky, ale každý další řez má mít důvod. Následující postup pomáhá připravit konkrétní úpravu se zachováním čitelnosti, nikoli vyhlásit jeden font za univerzálně nejrychlejší.
Nejdřív sepište rodiny, řezy a místa použití
Otevřete reprezentativní článek a zkontrolujte titulek, běžný odstavec, tučný text, kurzivu, menu i tabulku. U každého prvku zjistěte skutečně použitou rodinu a řez. Název v nastavení šablony je začátek, nikoli úplný obraz: jiný font může přidávat formulář nebo starší blok obsahu.
Sepište také odkud soubor přichází a kdo jej spravuje. Pokud stejnou rodinu zavádí šablona i plugin, může být konfigurace zbytečně složitá. Dvě deklarace ovšem nemusí automaticky znamenat dva přenosy stejného souboru. Rozhodujte podle skutečných požadavků a aplikovaných stylů, ne podle pouhého počtu řádků v CSS.
| Místo | Co ověřit | Praktické rozhodnutí |
|---|---|---|
| Běžný text | Rodinu, řez a české znaky | Zachovat dobře čitelnou základní sazbu |
| Titulky | Šířku znaků a zalomení | Prověřit dlouhé české nadpisy |
| Tučný text a kurziva | Dostupné skutečné řezy | Odstranit jen nepoužívané varianty |
| Menu a tlačítka | Vejití textů a náhradní font | Nerozbít ovládání při pomalém načtení |
| Tabulky | Číslice, jednotky a šířku buněk | Zachovat srozumitelnou sazbu hodnot |
Neviditelný text a výměna písma jsou dvě různé věci
Webové fonty mohou odkládat zobrazení textu a jejich pozdější výměna může změnit rozložení. V CSS ovlivňuje chování descriptor font-display. Swap dovoluje rychle použít náhradní font a později jej vyměnit; optional pracuje s krátkým blokováním a bez následného období výměny. Přesné chování je nutné posoudit v prohlížeči.
Swap sám o sobě neslibuje nulové posuny. Pokud se náhradní a cílová rodina výrazně liší rozměry, titulek může změnit počet řádků. Při návrhu proto kontrolujte obě podoby. Zároveň ponechte použitelnou náhradní rodinu pro situaci, kdy webový soubor nedorazí vůbec.
Omezte nepotřebné varianty, zachovejte jazyk
Ptejte se, zda redakce opravdu používá několik rodin, všechny tloušťky a italiku v každém řezu. Odstraňujte nejprve varianty, které nemají skutečné použití. Běžný a tučný text však potřebují jasně odlišit význam; optimalizace nesmí z hlavního závěru udělat nerozlišitelnou větu.
Moderní formát WOFF2 je vhodným výchozím kandidátem pro současné prohlížeče. Případné dělení znakové sady přizpůsobte jazyku. U češtiny nesmí optimalizace odříznout háčky a čárky; u dalších jazyků zkontrolujte jejich vlastní znaky. Správce musí mít také oprávnění font používat a upravovat podle licence.
- Zachovejte znaky pro skutečné jazyky magazínu, včetně diakritiky.
- Před odstraněním řezu ověřte jeho použití v článcích i ovládání.
- Porovnejte číslice, procenta, měny a jednotky v praktických tabulkách.
- Ověřte načtení bez chyb i náhradní stav, kdy soubor není dostupný.
Vlastní hosting fontů není automatická výhra
Přesun souboru na vlastní doménu mění doručovací cestu a odpovědnost za údržbu. Sám o sobě však nezaručuje rychlejší stránku. Posuďte spojení, kompresi, cache a dostupnost souborů. Srovnejte odpovídající scénář první návštěvy a opakovaného načtení; jinak můžete měřit hlavně rozdíl už naplněné cache.
U více magazínů evidujte, které soubory se nasazují a kdo provádí aktualizaci. Kopie na několika doménách mohou postupně ztratit jednotnost. Nepřenášejte změnu z jednoho webu na všechny instalace bez kontroly jejich šablon a jazyků. Jedna společná grafická značka ještě neznamená shodnou technickou konfiguraci.
Preload používejte pro doloženou potřebu
Přednačtení může přiblížit důležitý font, ale soutěží o prostředky s dalším obsahem. Nezařazujte do něj všechny řezy jen proto, že existují. Nejdřív zjistěte, zda se problém týká pozdního objevení deklarace, přenosu souboru nebo jeho použití. Nadbytečné požadavky mohou zhoršit prioritu hlavního obrázku.
Každá přednačtená varianta má mít konkrétní viditelné použití. Ověřte její shodu s následně požadovanou adresou a parametry. Pokud prohlížeč stahuje jiný soubor, zdánlivá optimalizace může přinést další náklad. Tyto úpravy patří správci šablony; pouhé přidání návodu do článku konfiguraci webu nemění.
| Návrh změny | Možný přínos | Podmínka převzetí |
|---|---|---|
| Odstranit nepoužitý řez | Méně zbytečné konfigurace a případných přenosů | Žádná chybějící významová sazba |
| Použít náhradní font včas | Čitelný text při čekání | Přijatelný vzhled a stabilita |
| Přesunout font na vlastní doménu | Kontrola doručování a správy | Naměřené srovnání a platná licence |
| Přidat vybraný preload | Dřívější objev důležitého zdroje | Skutečně využitý soubor bez nadbytečného stahování |
| Upravit znakovou sadu | Menší potřebná data | Úplné znaky všech podporovaných jazyků |
Model: magazín načítá řezy, které redakce nepoužívá
Vlastní model: šablona nabízí devět tlouštěk a kurzivu, ale magazín používá hlavně běžný text, tučné závěry a jeden titulkový řez. Správce navrhne omezit konfiguraci na skutečnou potřebu. Než změnu přijme, projde také starší texty a formuláře, protože právě tam může být výjimka.
Model neříká, že se všech devět tlouštěk vždy stahuje, ani nepředpovídá konkrétní úsporu. Ta záleží na deklaracích, použití a chování prohlížeče. Smyslem inventáře je rozhodnout o každé variantě s důkazem, nikoli odstranit soubory podle zdánlivě vysokého čísla v nabídce nastavení.
Kontrolní text připravte podle skutečného magazínu
Vyberte dlouhý český titulek, několik běžných odstavců, seznam, výrazné tučné místo a tabulku s čísly. Přidejte skutečné položky menu. Testujte připravený vzorek před načtením cílového fontu i po něm. U cizojazyčných verzí vytvořte samostatný jazykový příklad; čeština jejich znakovou sadu neověří.
Prohlédněte také užší telefon. Dvě podobná písma na široké obrazovce mohou v úzkém titulku vytvořit zásadně jiný počet řádků. Pokud text tlačítka přeteče, opravte příčinu v sazbě a rozložení. Pouhé zmenšení všech písmen může poškodit čitelnost zbytku stránky.
- Uložte inventář použitých rodin, řezů a původu souborů.
- Připravte český vzorek článku, menu a tabulky.
- Na kopii změňte jednu část konfigurace a porovnejte požadavky.
- Ověřte první načtení, náhradní písmo a hotovou sazbu.
- Po nasazení projděte veřejný desktop i mobil a zachovejte důkazy.
Přípravu kopie řeší návod ke stagingu WordPressu. Pokud se po načtení mění poloha obsahu, navazuje diagnostika CLS a posunů stránky. Když je hlavní problém v čekání na největší textový blok, připojte rozpad metriky LCP.
Při širší změně vzhledu použijte přejímací protokol redesignu. Samotná změna rodiny může ovlivnit více míst, než ukazuje první obrazovka článku. Výsledek přijímejte podle čitelnosti a doloženého chování. Neoznačujte vlastní font za rychlejší, dokud jej ve vašem doručování skutečně neporovnáte.
Nezapomeňte na čitelnost delších návodů
Font nehodnoťte jen na krátké kartě článku. Projděte delší odstavec, seznam podmínek a tabulku, kterou čtenář potřebuje skutečně porovnat. Výkonová úspora nemá zhoršit orientaci v informacích. Příliš těsná sazba či nezřetelné zvýraznění mohou praktickou hodnotu návodu zmenšit, i když se počet přenesených souborů sníží.
Předem určete, které vlastnosti značky potřebujete zachovat. Někdy je důležitý charakter titulku, zatímco běžný text může použít jednodušší řešení. Jindy je prioritou jednotná diakritika nebo výška řádků. Takové rozhodnutí patří k návrhu a má předcházet technické změně, aby se po optimalizaci nezačal vzhled znovu náhodně přepisovat.
Ověřte i nový článek s neobvykle dlouhým názvem. Vzorek musí pokrýt skutečné redakční výjimky. Když se problém objeví až po vydání delšího titulku, doplňte jej do přejímacího seznamu. Nepředpokládejte, že úspěch na několika krátkých nadpisech zaručuje dobrou sazbu každého budoucího textu.
Při předání uložte schválené příklady a konfiguraci, ke které se vztahují. Další správce pak nebude vybírat nové řezy podle nejasného dojmu, ale naváže na ověřené použití a známé limity.
Časté otázky
Musím používat webový font?
Ne. Návrh může pracovat i s vhodnou systémovou sadou. Rozhodujte podle značky, čitelnosti a skutečných provozních podmínek.
Zaručí font-display: swap nulové CLS?
Ne. Text se může po příchodu cílového fontu přeskupit, pokud se liší rozměry a zalomení.
Mohu ponechat jen základní latinku?
Pouze pokud odpovídá skutečnému jazyku. Český obsah potřebuje příslušnou diakritiku a další podporované jazyky vlastní znaky.
Je vlastní hostování vždy rychlejší?
Ne. Záleží na doručování, konfiguraci a podmínkách. Přínos porovnejte na stejném vzorku a typu návštěvy.
Mám přednačíst všechny fonty?
Ne automaticky. Vyberte doložené kritické použití a ověřte, že přednačtený soubor prohlížeč opravdu využije.
