Převeď rem na pixely s libovolnou základní velikostí
Při výchozím nastavení prohlížeče má jeden rem 16 pixelů, takže 1,5rem dá 24. Zadej hodnotu v rem, nastav základní velikost písma a přečti výsledek: základ 10 px z techniky 62,5 % funguje stejně.
K čemu slouží převod rem na pixely?
Rem se změní na pixely jediným násobením: hodnota v rem krát základní velikost písma. Při výchozím nastavení prohlížeče má tento základ 16 px, takže 1rem dá 16 pixelů a 1,5rem dá 24. Jednotka odkazuje na velikost textu prvku html, kořene dokumentu, odtud i název root em [1].
Převod se hodí, jakmile pracuješ podle grafického návrhu. Grafik předá rozměry v pixelech, styly je uchovávají v rem a ty potřebuješ jedno číslo, abys ověřil, jestli nadpis o velikosti 1,875rem opravdu odpovídá 30 pixelům z návrhu.
Základ může mít i jinou hodnotu než 16 px. Technika 62,5 % ho nastaví na 10 px a čtenář si ho může zvýšit v nastavení prohlížeče, proto pole přijímá libovolnou hodnotu od 1 do 100.
Níže najdeš tabulku 26 hodnot při třech základech, kompletní škálu velikostí písma Tailwind CSS a vysvětlení, proč je číslo 16 jen výchozí. Opačnou cestu pokrývá převodník pixelů na rem.
Jak spočítat rem na pixely ručně? Vzorec a příklad
Vzorec obsahuje jedinou operaci: pixely = rem × základní velikost písma. Základní velikost písma je ta, kterou nese prvek html, a pokud ji nikdo nezměnil, prohlížeč použije 16 px.
Příklad s mezerou 1,25rem: při základu 16 px vyjde 1,25 × 16 = 20 pixelů. Stejná hodnota při základu 10 px dá 12,5 pixelu a u čtenáře, který si nastavil 20 px, vyroste na 25.
Technika 62,5 % spočívá v zápisu html { font-size: 62.5% }, který sníží základ na 10 px, protože 62,5 % z 16 je přesně 10. Výpočet se pak dělá zpaměti: 2,4rem je 24 pixelů. Přichází s jednou podmínkou: textu v body je nutné vrátit čitelnou velikost, obvykle 1.6rem, jinak celá stránka zůstane vysázená v desítkovém stupni.
Jednotka em se počítá stejně, jen odkazuje na rodičovský prvek místo na kořen dokumentu: ten výpočet obstará převodník em na pixely. Stejných 16 pixelů odpovídá 12 typografickým bodům v sazbě, o což se stará převodník bodů na pixely.
Kolik pixelů mají běžné hodnoty v rem?
| Hodnota v rem | Základ 16 px (výchozí) | Základ 10 px (62,5 %) | Základ 20 px (zvětšený text) |
|---|---|---|---|
| 0,25 rem | 4 px | 2,5 px | 5 px |
| 0,375 rem | 6 px | 3,75 px | 7,5 px |
| 0,5 rem | 8 px | 5 px | 10 px |
| 0,625 rem | 10 px | 6,25 px | 12,5 px |
| 0,75 rem | 12 px | 7,5 px | 15 px |
| 0,875 rem | 14 px | 8,75 px | 17,5 px |
| 1 rem | 16 px | 10 px | 20 px |
| 1,125 rem | 18 px | 11,25 px | 22,5 px |
| 1,25 rem | 20 px | 12,5 px | 25 px |
| 1,375 rem | 22 px | 13,75 px | 27,5 px |
| 1,5 rem | 24 px | 15 px | 30 px |
| 1,625 rem | 26 px | 16,25 px | 32,5 px |
| 1,75 rem | 28 px | 17,5 px | 35 px |
| 1,875 rem | 30 px | 18,75 px | 37,5 px |
| 2 rem | 32 px | 20 px | 40 px |
| 2,25 rem | 36 px | 22,5 px | 45 px |
| 2,5 rem | 40 px | 25 px | 50 px |
| 2,75 rem | 44 px | 27,5 px | 55 px |
| 3 rem | 48 px | 30 px | 60 px |
| 3,5 rem | 56 px | 35 px | 70 px |
| 3,75 rem | 60 px | 37,5 px | 75 px |
| 4 rem | 64 px | 40 px | 80 px |
| 4,5 rem | 72 px | 45 px | 90 px |
| 5 rem | 80 px | 50 px | 100 px |
| 6 rem | 96 px | 60 px | 120 px |
| 8 rem | 128 px | 80 px | 160 px |
Tři základy pokrývají tři situace: 16 px je výchozí nastavení prohlížeče, 10 px pochází z techniky 62,5 % a 20 px je typické číslo u člověka, který si text zvětšil v nastavení.
Proč je 16 px jen výchozí hodnota?
Číslo 16 pochází z prohlížeče, nikoli ze specifikace CSS. Je to velikost textu, kterou prohlížeč dokumentu přiděluje, a čtenář ji mění v nastavení svého programu. Kdo hůř vidí, nastaví si tam 20 nebo 24 px a čeká, že ho stránka bude následovat.
Právě v tom leží celý rozdíl mezi rem a pixelem. Prvek zapsaný jako font-size: 24px zůstane vysoký 24 pixelů bez ohledu na volbu čtenáře. Tentýž prvek zapsaný jako 1.5rem roste se základem: při 20 px dá 30 pixelů, při 24 px jich dá 36.
Kritérium WCAG 1.4.4 vyžaduje, aby šel text zvětšit až na 200 % bez ztráty obsahu a funkčnosti [2]. Rozvržení postavené na rem ho splní samo, protože se škáluje spolu s nastavením čtenáře.
V Česku má toto kritérium oporu v zákoně. Zákon č. 99/2019 Sb. přenáší evropskou směrnici 2016/2102 a webům i mobilním aplikacím veřejného sektoru ukládá harmonizovanou normu EN 301 549 V2.1.2, tedy WCAG na úrovni A a AA [3]. Styly psané v rem pokrývají kritérium 1.4.4 dřív, než audit vůbec začne.
Odtud praktické rozdělení: velikosti písma, mezery a šířky sloupců v rem, a pixel tam, kde má rozměr zůstat pevný bez ohledu na text, tedy u rámečků, stínů a vlasových linek.
Odkud se berou hodnoty jako 0,875 nebo 1,875rem?
| Třída Tailwindu | Hodnota v rem | Pixely při základu 16 px | Kde se používá |
|---|---|---|---|
| text-xs | 0,75 rem | 12 px | Popisek obrázku, malý štítek |
| text-sm | 0,875 rem | 14 px | Nápověda, popisek pole |
| text-base | 1 rem | 16 px | Běžný text, referenční hodnota |
| text-lg | 1,125 rem | 18 px | Úvodní odstavec |
| text-xl | 1,25 rem | 20 px | Nadpis karty |
| text-2xl | 1,5 rem | 24 px | Nadpis sekce |
| text-3xl | 1,875 rem | 30 px | Podnadpis stránky |
| text-4xl | 2,25 rem | 36 px | Titulek stránky |
| text-5xl | 3 rem | 48 px | Nadpis v hlavičce |
| text-6xl | 3,75 rem | 60 px | Velký nadpis na širokém displeji |
| text-7xl | 4,5 rem | 72 px | Heslo na úvodní stránce |
| text-8xl | 6 rem | 96 px | Dekorativní logotyp |
| text-9xl | 8 rem | 128 px | Číslo ve statistickém bloku |
Je to výchozí škála velikostí písma Tailwind CSS ve verzi 4.3, ověřená 7. srpna 2026 v dokumentaci výrobce [4]. Pokud ve stylech narazíš na 0,875 nebo 1,875rem, hodnota téměř jistě pochází odtud.
Rem a pixel vedle sebe
| Vlastnost | rem | px |
|---|---|---|
| Vztažný bod | Velikost písma prvku html | Žádný, jde o absolutní hodnotu |
| Výchozí hodnota | 1rem = 16 px | 1 px = 1/96 palce |
| Reakce na nastavení čtenáře | Škáluje se spolu s ním | Zůstává beze změny |
| Vnořené prvky | Bez vlivu, výpočet vždy vychází z kořene | Bez vlivu |
| Obvyklé použití | Velikosti písma, mezery, šířky | Rámečky, stíny, vlasové linky |
| V Tailwind CSS | Jednotka škály písma a mezer | Libovolná hodnota v hranatých závorkách |
Kdy se ti tenhle převod bude hodit?
Kontrola grafického návrhu
Návrh uvádí nadpis o velikosti 30 px a kód říká 1,875rem. Jedno násobení ti řekne, jestli obě čísla popisují stejnou velikost.Čtení cizích stylů
Otevřeš projekt psaný v rem a chceš vědět, kolik měří mezery. Základ 16 px promění 0,75rem ve známých 12 pixelů.Test přístupnosti
Nastav základ na 20 px a podívej se, o kolik naroste každý prvek, když si někdo zvětší text v prohlížeči.Práce s technikou 62,5 %
Při základu 10 px vycházejí hodnoty kulaté: 2,4rem je 24 pixelů. Převodník tenhle základ přijímá stejně jako výchozí.
Převést jiné jednotky na Pixely
Další převodníky jednotek
Zdroje
- CSS Values and Units Module Level 4 — W3C
- Understanding SC 1.4.4: Resize Text (WCAG 2.2) — W3C
- Přístupnost webových stránek — Digitální a informační agentura
- font-size – Typography — Tailwind CSS
Všechny hodnoty v tabulkách jsme spočítali z definic jednotek a před zveřejněním ověřili výpočtem. Historické údaje a názvy místních jednotek vycházejí ze zdrojů uvedených výše.
Poslední revize obsahu: · napsal a zkontroloval tým Arteon
Časté otázky
Kolik pixelů je 1rem?
Při výchozím nastavení prohlížeče je 1rem 16 pixelů. Číslo vychází z velikosti textu prvku html, takže po zápisu html { font-size: 62.5% } dá tentýž 1rem 10 pixelů a u čtenáře se zvětšeným textem 20 i více.
Je 1rem vždy 16 px?
16 px je výchozí velikost textu prohlížeče, hodnota, kterou specifikace CSS nechává otevřenou. Čtenář ji mění v nastavení programu a autor stránky ve stylech. Proto pole základní velikosti přijímá libovolnou hodnotu od 1 do 100 px.
Kolik pixelů je 1,5rem?
24 pixelů při základu 16 px, 15 pixelů při základu 10 px a 30 pixelů při 20 px. Hodnota 1,5rem odpovídá třídě text-2xl v Tailwind CSS a je běžnou velikostí nadpisu sekce.
Kolik pixelů je 1,25rem?
20 pixelů při výchozím základu 16 px. Je to třída text-xl v Tailwind CSS, používaná u nadpisů karet a zvýrazněných prvků rozhraní.
Kolik pixelů je 0,875rem?
14 pixelů při základu 16 px. Hodnota odpovídá třídě text-sm a je obvyklou velikostí nápovědy a popisků formulářových polí.
Kolik pixelů je 32rem?
512 pixelů při základu 16 px. Hodnoty tohoto řádu popisují šířku sloupce nebo maximum kontejneru, nikoli velikost písma.
Co je technika 62,5 %?
Zápis html { font-size: 62.5% } sníží základ na 10 px, protože 62,5 % z 16 je přesně 10. Výpočet se pak dělá zpaměti: 2,4rem je 24 pixelů. Textu v body je nutné vrátit čitelnou velikost, obvykle 1.6rem, aby celá stránka nezůstala vysázená v desítkovém stupni.
Jaký je rozdíl mezi rem a em?
Rem odkazuje na velikost písma prvku html a dává stejný výsledek v celém dokumentu bez ohledu na to, jak hluboko je prvek vnořený. Em odkazuje na velikost rodičovského prvku, takže se hodnoty při vnořování sčítají. Velikosti písma se zapisují v rem, jehož výsledek zůstává předvídatelný.
Používá Tailwind CSS rem?
Ano. Výchozí škála velikostí je v rem: text-base má 1rem, text-2xl má 1,5rem a text-9xl má 8rem. Škála mezer pracuje ve stejné jednotce, takže změna základu posune celé rozvržení naráz.
Kdy se hodí pixel víc než rem?
Všude tam, kde má rozměr zůstat pevný bez ohledu na velikost textu: rámečky, stíny, vlasové linky a jednotlivé grafické prvky. Velikosti písma, mezery a šířky sloupců se zapisují v rem, aby rozvržení reagovalo na nastavení čtenáře.
Jak rem ovlivňuje přístupnost?
Kritérium WCAG 1.4.4 vyžaduje, aby šel text zvětšit až na 200 % bez ztráty obsahu a funkčnosti. Rozvržení psané v rem roste s nastavením prohlížeče a splní ho bez další práce. V Česku ukládá tuhle povinnost webům veřejného sektoru zákon č. 99/2019 Sb.
Kolik rem je 1 pixel?
Při základu 16 px je jeden pixel 0,0625rem. Pár dvojic v opačném směru stojí za zapamatování: 12 px je 0,75rem, 14 px je 0,875rem, 20 px je 1,25rem a 24 px je 1,5rem.
Pomoz nám vylepšit naše nástroje
Máš nápad na funkci, našel jsi chybu nebo chceš navrhnout další nástroj? Napiš nám, odpovídáme do 24 hodin.