Gå til hovedinnhold
ØVRIGE TOKENS

PX vs REM

Pixel er faste størrelser som ikke endrer seg. Rem, derimot, tilpasser seg automatisk fontstørrelsen på root i HTML, og derfor er den ofte best for responsivt design.

Pixel er bedre egnet for designelementer som skal være faste i størrelse, som logoer eller ikoner, mens rem kan være mer egnet for typografiske elementer og layoutelementer som skal skalere basert på skjermstørrelse.

I designsystemet er alle relevante tokens i CSS, SASS og LESS i rem-enheten. Men ønsker du valgmuligheten finnes våre tokens i Javascript i både px- og rem-enheter. De kan hentes ut slik:

import { fontSizes } from '@entur/tokens';

fontSizes.small; // gir tallet 12 (i px)
fontSizes.rem.small; // gir tallet 0.75 (i rem)

En .rem etter token-navnet vil altså la deg velge mellom rem-størrelser i stedet for px-størrelser.