Vad är 1rem i pixlar? Den kompletta guiden utan fackspråk

Vad är 1rem i pixlar? Den kompletta guiden utan fackspråk

Om du har pysslat med webbdesign eller skrivit CSS på sistone har du förmodligen stött på termen ”rem” och omedelbart undrat: Vänta, varför kan vi inte bara använda pixlar? Och ännu viktigare: vad exakt är 1rem i pixlar?

Här är det korta, raka svaret: Som standard motsvarar 1rem 16 pixlar.

Men innan du börjar hårdkoda 16px överallt, låt oss prata om varför rem överhuvudtaget existerar, och varför ett strikt beroende av pixlar kan göra din webbplats mycket mindre användarvänlig än du tror.

Vad är ens en ”Rem”?

”Rem” står för Root EM. Oroa dig inte för mycket för den hundraåriga typografihistorien bakom ”em”. I modern webbdesign syftar ”root” (roten) helt enkelt på ditt HTML-dokument.

Tänk på det som att baka kakor. ”Root” är ditt grundrecept. Om grundreceptet säger ”1 sats = 16 kakor”, får du 32 kakor om du ber om 2 satser (2rem).

Om du senare bestämmer dig för att ändra grundreceptet så att 1 sats motsvarar 20 kakor, betyder plötsligt 2rem 40 kakor. Du behövde inte gå igenom och ändra instruktionen ”2 satser” överallt; du uppdaterade bara grundplanen, och allt annat skalades perfekt.

Pixlar mot Rems: Uppgörelsen

Pixlar är stela. De är som att rista in instruktioner i en stentavla. 16px är exakt 16 pixlar på en skärm, oavsett vad.

Så vad händer om en användare med nedsatt syn ändrar sin webbläsares standardtypsnittsstorlek till 24px för att kunna läsa bekvämt utan att kisa? Om din sida är byggd strikt med pixlar förblir din text envist fast vid 16px. Du har i princip ignorerat deras webbläsarinställningar.

Om du däremot använder rem, lyssnar din webbplats aktivt på användaren. 1rem betyder i princip bara ”1 gånger vad än användarens standardinställning är”. Om deras standard är 16px ser de 16px. Om deras standard är 24px, skalas din 1rem text sömlöst upp till 24px. Det är en omedelbar vinst för tillgängligheten som gör din sida bättre för alla.

Att räkna ut det (och hur man undviker det)

Att konvertera rems till pixlar är bara enkel multiplikation. Du tar din basstorlek i pixlar (vanligtvis 16) och multiplicerar den med ditt rem-värde.

• 0.5rem = 8px (16 x 0,5)

• 1.5rem = 24px (16 x 1,5)

• 2rem = 32px (16 x 2)

Men låt oss vara helt ärliga: ingen gillar att räkna i huvudet när man är mitt uppe i kodandet. Om du försöker lista ut vad 2.125rem är i farten behöver du inte ta fram en miniräknare. Låt verktygen göra grovjobbet åt dig.

Bokmärk dessa otroligt praktiska omvandlare för att spara tid:

• Har du ett rem-värde men behöver veta hur stort det faktiskt kommer att se ut? Använd denna Rem till Pixel-omvandlare.

• Stirrar du på en pixel-perfekt Figma-design och behöver översätta den till CSS? Hoppa över till Pixel till Rem-omvandlaren.

Utvecklarens fusklapp

Om du bara behöver en snabb referens för de vanligaste storlekarna är här din fusklapp. Detta förutsätter standardstorleken 16px för webbläsare.

Vanligt användningsområde	Motsvarande i pixlar	REM-värde
Små UI-avstånd eller ramar	4px	0.25rem
Marginaler, utfyllnad, små mellanrum	8px	0.5rem
Liten text, bildtexter, metadata	12px	0.75rem
Standard brödtext	16px	1rem
Underrubriker, inledande stycken	20px	1.25rem
H3-rubriker, stora knappar	24px	1.5rem
H2-rubriker, sektionstitlar	32px	2rem
H1-rubriker, hero-text	48px	3rem