Vysoký počet různých velikostí písma

Na stránce se projdou viditelné prvky s vlastním textem a spočítají se různé velikosti písma (zaokrouhlené na celé pixely). Nález vznikne, když je jich víc než 8: config/design.json#thresholds.maxDistinctSizes, hodnota označená PROPOSAL.

Počítají se jen prvky, které mají vlastní přímý text, ne obalové kontejnery. Stránka se prochází nejvýš do maxNodes prvků; velmi dlouhá stránka se tedy dopočítá jen zčásti.

Co kontrola nedělá: neposuzuje, jestli ty velikosti dávají dohromady smysluplnou škálu (8 velikostí v geometrické řadě je lepší návrh než 5 nahodilých), nerozlišuje velikosti z různých sekcí, a nepozná, že se dvě velikosti liší o jediný pixel; pro ni jsou to dvě.

Nález je na úrovni stránky a je informativní: skóre nesnižuje ani o bod.

Na viditelnost v odpovědích AI to nemá vliv žádný a na pozici ve vyhledávání také ne. Je to nález o vizuální konzistenci, tedy o řemesle, ne o měřitelném výsledku.

Budeme k tomu upřímní víc než u ostatních: číslo 8 je naše konvence, ne norma. Žádný standard neříká, kolik velikostí písma je správně. Je to pozorování z praxe: typografická škála obvykle vystačí se šesti až osmi stupni, a víc bývá příznakem toho, že velikosti vznikaly jednotlivě podle potřeby, ne návrhem.

Co z toho plyne prakticky: vysoké číslo samo o sobě není vada. Je to indicie, že se na webu vrstvily styly z různých dob nebo od různých lidí, a to má důsledek pro údržbu, ne pro návštěvníka. Web s dvaceti velikostmi písma se hůř mění a snáz se v něm něco rozjede.

Kdy to klidně ignorujte: když má váš web navrženou škálu a ta má devět stupňů. Proto je nález informativní a proto nesnižuje skóre: počítáme s tím, že ho někdy vědomě přeskočíte.

Je to úklid, ne oprava, a vyplatí se jen tehdy, když se do stylů stejně chystáte sáhnout. Postup, který funguje:

1. Vypište si, co na stránce doopravdy je. Konzole v prohlížeči to zvládne za vteřinu (viz níž).
2. Zvolte škálu o šesti až osmi stupních a pojmenujte ji proměnnými v CSS.
3. Každou existující velikost přiřaďte k nejbližšímu stupni. Rozdíl jednoho dvou pixelů si nikdo nevšimne.
4. Nové velikosti pak berte jen ze škály. Bez toho se to za rok vrátí.

const sizes = new Set();
document.querySelectorAll('*').forEach(el => {
  const hasOwnText = [...el.childNodes].some(n => n.nodeType === 3 && n.textContent.trim());
  if (hasOwnText) sizes.add(Math.round(parseFloat(getComputedStyle(el).fontSize)));
});
console.log([...sizes].sort((a, b) => a - b));

:root {
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
}

Jedna věc navíc, která se při tom vyplatí: používejte rem, ne px. Velikosti v pixelech ignorují nastavení velikosti písma v prohlížeči, takže člověk, který si zvětšil písmo kvůli zraku, si ho u vás nezvětší.