Om relativa enheter

Procent och em

Procent och em kommer att bete sig exakt likadant då de sätts som textstorlek, så det är egentligen bara en smaksak vilken man väljer att använda där. 100% motsvarar 1em och 75% är samma som 0.75em.

Procent och em är (för textstorlek) alltid relativa det omslutande elementets textstorlek. Det betyder att textstorlek satt i procent och em kan vara olika på olika delar av en webbsida om man exempelvis har satt en CSS-regel på en modul och den regeln har en inställning för textstorlek.

Här är ett exempel, där vi tänker oss en CSS-regel som heter "Finstilt" som har textstorlek 0.875em.

• BODY, 1em (resultat: 16px)
  • Brödtext, 87.5% (resultat 14px)
  • Modul med CSS-regel "Finstilt" (0.875em ger ny grundinställning på 14px)
    
    • Brödtext, 87.5% (resultat 12.25px)

rem

Den nya enheten rem (root em) är annorlunda jämfört med procent och em. Den har kvar alla de fördelar som finns med procent och em. Tillgängligheten är den samma - dina besökare har fortfarande möjlighet att påverka textstorleken. Skillnaden är att storleken på text satt i rem inte förändras på olika delar av sidan, den är alltid relativ rotelementet (HTML-taggen).

Exemplet för procent och em, men nu med "Brödtext" satt till 0.875 rem istället för 87.5%:

• BODY, 1em (resultat: 16px)
  • Brödtext, 0.875rem (resultat 14px)
  • Modul med CSS-regel "Finstilt" (0.875em ger ny grundinställning på 14px)
    • Brödtext, 0.875rem (resultat 14px)

Vilken enhet ska du använda?

Vilken typ av enhet du ska använda är beroende på vad du vill uppnå. Vill du att texten anpassar sig till sin omgivning eller vill du att den har en och samma storlek överallt? En teckenformatmall är troligen bäst att sätta i procent eller em och en rubrikformatmall kanske passar bättre att sätta i rem.