Nastavit na webu správně fonty u všech nadpisů, textů, tlačítek… může být někdy pekelně složité. A když do toho začne mluvit ještě responzivita, kdy je potřeba řešit velikosti pro jednotlivé breakpointy, je to úplně peklo.
Dobrá zpráva: odteď to dělat nemusíte. Stačí se naučit používat tuto kalkulačku a dáte sbohem různým přepíná breakpointů, nastavení @media queries… a dalším, jen kvůli fontům.
Jak na to
Nastavíte minimální a maximální šířku obrazovky (tedy rozsah, ve kterém se bude velikost fontu plynule měnit) a k nim odpovídající minimální a maximální velikost fontu.
clamp(...)
Co výsledek znamená?
Kalkulačka vypočítá CSS funkci clamp(min, opt, max). Ta má 3 parametry:
- minimum (nižší hodnota se nenastaví)
- optimum – protože používá k výpočtu fontu velikost obrazovky
vw, fonty se dynamicky zmenšují a zvětšují právě podle toho, - maximum (vyšší hodnota nikdy nenastane)
rem je jednotka, která se odvíjí od root elementu (html) – pokud s ní nehýbete, tak na 99,99% je to 16px nativně, jak to mají prohlížeče nastavené v sobě.
vw je jednotka, která se vypočítá jako 1/100 šířky obrazovky (vh je obdobná jednotka pro výšku).
Jak výsledek použít?
1. Přidáte clamp jako proměnnou do CSS. Nejčastěji se to dělá v root (nebo v definici proměnných, pokud je vaše nástroje mají zabudované):
:root {
--h2-size: clamp(1.375rem, 0.282vw + 1.309rem, 1.563rem);
}2. Následně pak přiřadíte proměnnou (v našem případě --h2-size) tam, kde je třeba, např. do nadpisů jako klasickou hodnotu:
h2{
font-size: var(--h2-size);
}A máte hotovo. Jakmile si na práci s clamp() zvyknete, zjistíte, že vám ubylo nemalé množství práce.
Příklad kompletního zápisu CSS proměnných
/* @link https://utopia.fyi/type/calculator?c=350,15,1.2,1512,18,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
--step--2: clamp(0.651rem, 0.6118rem + 0.1793vw, 0.7813rem);
--step--1: clamp(0.7813rem, 0.7342rem + 0.2151vw, 0.9375rem);
--step-0: clamp(0.9375rem, 0.881rem + 0.2582vw, 1.125rem);
--step-1: clamp(1.125rem, 1.0572rem + 0.3098vw, 1.35rem);
--step-2: clamp(1.35rem, 1.2687rem + 0.3718vw, 1.62rem);
--step-3: clamp(1.62rem, 1.5224rem + 0.4461vw, 1.944rem);
--step-4: clamp(1.944rem, 1.8269rem + 0.5354vw, 2.3328rem);
--step-5: clamp(2.3328rem, 2.1923rem + 0.6424vw, 2.7994rem);
}Pozn: Pro velmi malé texty (např. 12px a méně) nebo extrémní titulky má pořád smysl použít pevnou hodnotu (px nebo vw).
