Hva er 1rem i piksler? Den komplette guiden uten fagspråk

Hva er 1rem i piksler? Den komplette guiden uten fagspråk

Hvis du har syslet med webdesign eller skrevet CSS i det siste, har du sikkert støtt på begrepet «rem» og umiddelbart lurt på: Vent, hvorfor kan vi ikke bare bruke piksler? Og enda viktigere: hva er egentlig 1rem i piksler?

Her er det korte, konsise svaret: Som standard tilsvarer 1rem 16 piksler.

Men før du begynner å hardkode 16px overalt, la oss snakke om hvorfor rem eksisterer i utgangspunktet, og hvorfor det å stole utelukkende på rigide piksler kan gjøre nettstedet ditt mye mindre brukervennlig enn du tror.

Hva er egentlig en «Rem»?

«Rem» står for Root EM. Ikke bekymre deg for mye om typografiens århundregamle historie der «em» kommer fra. I moderne webdesign refererer «root» (roten) bare til selve HTML-dokumentet ditt.

Tenk på det som å bake småkaker. «Roten» er hovedoppskriften din. Hvis hovedoppskriften sier «1 porsjon = 16 kaker», vil 2 porsjoner (2rem) gi deg 32 kaker.

Hvis du senere bestemmer deg for å endre hovedoppskriften slik at 1 porsjon tilsvarer 20 kaker, betyr plutselig 2rem 40 kaker. Du slapp å gå gjennom og endre instruksjonen om «2 porsjoner» overalt; du oppdaterte bare hovedplanen, og alt annet skalerte perfekt.

Piksler vs. Rems: Oppgjøret

Piksler er rigide. De er som å hogge instruksjoner i en steintavle. 16px er nøyaktig 16 piksler på en skjerm, uansett hva.

Så, hva skjer hvis en bruker med nedsatt syn endrer nettleserens standard skriftstørrelse til 24px for å kunne lese komfortabelt uten å myse? Hvis nettstedet ditt er bygget strengt med piksler, forblir teksten din gjenstridig låst på 16px. Du har i praksis ignorert nettleserinnstillingene deres.

Hvis du derimot bruker rem, lytter nettstedet ditt aktivt til brukeren. 1rem betyr i utgangspunktet bare «1 ganger det som er brukerens standard». Hvis deres standard er 16px, ser de 16 piksler. Hvis deres standard er 24px, skalerer din 1rem-tekst sømløst opp til 24 piksler. Det er en umiddelbar seier for tilgjengelighet som gjør nettstedet ditt bedre for alle.

Regnestykket (og hvordan du unngår det)

Å konvertere rems til piksler er bare enkel multiplikasjon. Du tar basisstørrelsen din i piksler (vanligvis 16) og ganger den med rem-verdien din.

• 0.5rem = 8px (16 x 0.5)

• 1.5rem = 24px (16 x 1.5)

• 2rem = 32px (16 x 2)

Men la oss være helt ærlige: ingen liker å drive med hoderegning mens de er dypt inne i kodingen. Hvis du prøver å finne ut hva 2.125rem er i farten, trenger du ikke å ta frem kalkulatoren. La verktøyene ta seg av grovarbeidet.

Bokmerk disse utrolig praktiske konverteringsverktøyene for å spare tid:

• Har du en rem-verdi, men trenger å vite hvor stor den faktisk vil se ut? Bruk denne Rem til piksel-konvertereren.

• Stirrer du på et piksel-perfekt Figma-design og må oversette det til CSS? Hopp over til Piksel til rem-konvertereren.

Utviklerens huskeliste

Hvis du bare trenger en rask referanse for de vanligste størrelsene, er dette huskelisten din. Dette forutsetter standarden på 16px som nettleserens basisstørrelse.

Vanlig bruksområde	Piksel-ekvivalent	REM-verdi
Små UI-mellomrom eller rammer	4px	0.25rem
Marger, padding, små mellomrom	8px	0.5rem
Liten tekst, bildetekster, metadata	12px	0.75rem
Standard brødtekst	16px	1rem
Underoverskrifter, innledende avsnitt	20px	1.25rem
H3-overskrifter, store knapper	24px	1.5rem
H2-overskrifter, seksjonstitler	32px	2rem
H1-overskrifter, hovedtekst (hero)	48px	3rem