Typography Scale Generátor
Zadej výchozí velikost a poměr — dostaneš harmonickou typografickou škálu v px i rem. Plus hotové CSS proměnné.
Živý náhled
Hodnoty
| Krok | px | rem | Použití |
|---|
Spravuješ živnost nebo zakázky?
Spravuješ živnost nebo zakázky? VšeVKapse — fakturace, zakázky, klientský portál a AI v jedné aplikaci. Česky.
K čemu je Typography Scale Generátor
Pokud si někdy nastavoval písmo na webu tak, že jsi zkusil h1 na 32px, pak h2 na 26px, pak 22px a výsledek stejně nevypadal dobře – tohle je přesně pro tebe. Typography Scale Generátor je nástroj pro webové designéry, frontendové vývojáře a OSVČ, kteří chtějí konzistentní typografii bez toho, aby museli hrát na číselnou loterii.
Reálný problém je jednoduchý: náhodně zvolené velikosti písma vypadají neuspořádaně. Harmonická škála naopak vychází z matematického poměru – každý stupeň je předchozí vynásobený konstantou (třeba zlatým řezem 1.618, nebo oblíbeným 1.25 pro jemnou hierarchii). Výsledek je typografie, kde velikosti "dávají smysl" i podvědomě.
Výhodou tohoto generátoru je, že dostaneš hodnoty hned ve dvou formátech – v px pro přehlednost a v rem pro reálné nasazení v CSS – takže nemusíš nic přepočítávat ručně. Na převody px ↔ rem se hodí i samostatný nástroj Pixel ↔ REM / EM, ale tady to máš v jednom kroku.
Co dostaneš
- Kompletní typografickou škálu o 6–10 stupních podle zvoleného rozsahu
- Hodnoty v px i rem vedle sebe pro každý stupeň
- Výběr z běžných poměrů: Minor Third (1.2), Major Third (1.25), Perfect Fourth (1.333), Golden Ratio (1.618) a další
- Možnost zadat vlastní základní velikost (výchozí je 16px, ale změnit jde na cokoliv)
- Přehledný výstup, který snadno překopíruješ rovnou do CSS nebo design systému
Jak to funguje
- Zadej základní velikost – typicky 16px (odpovídá `1rem` v prohlížeči), ale klidně i 18px nebo 14px podle projektu.
- Vyber poměr – pro editorial weby zkus Golden Ratio, pro UI aplikace stačí Major Third.
- Nastav počet kroků nahoru i dolů od základu – dostaneš škálu od malých popisků až po velké nadpisy.
- Prohlédni výsledek – každý stupeň vidíš v px i rem, takže hned víš, co použít v proměnných CSS nebo Tailwindu.
- Zkopíruj hodnoty přímo do kódu nebo design systému.
Časté otázky
Jaký poměr mám zvolit?
Záleží na projektu. Pro blogy a obsahové weby funguje dobře Perfect Fourth (1.333) nebo Golden Ratio (1.618). Pro dashboardy a UI s hustším layoutem je lepší jemnější Minor Third (1.2), aby rozdíly mezi stupni nebyly příliš dramatické.
Proč jsou výsledky v rem a ne jen v px?
Rem je relativní k výchozí velikosti v prohlížeči a respektuje uživatelské nastavení písma. V praxi je lepší v CSS používat rem – px ho přebijí a přístupnost trpí.
Mají se data odesílat někam na server?
Ne, celý výpočet probíhá přímo v prohlížeči. Žádná data se nikam neposílají.
Jak škálu použiju v CSS?
Nejčastěji jako CSS custom properties (`--text-sm`, `--text-lg` apod.) nebo v konfiguračním souboru Tailwindu. Hodnoty z generátoru prostě zkopíruješ a pojmenuješ podle svého systému.