Typografi, typsnitt och olika måttenheter för dina texter är kanske ett fenomen du har stött på och funderat över? Vissa teman och plugin har stöd för att ange olika enheter och du som är bekant med CSS har kanske lärt dig att man kan ange teckenstorlek med olika sorters enheter?
Vad är då egentligen skillnaden mellan alla de här enheterna?
I det här inlägger tänker jag utgå ifrån att du bygger responsivt och mobile-first. Du bygger alltså med mobilens vy som det primära och bygger en sida som anpassar sig utefter diverse olika skärmstorlekar.
Så när ska jag använda PX, EM, VH, VH eller REM?
PX (pixlar)
Pixlar använder du för exakta storlekar när du vill att någonting ska förbli exakt samma höjd i oavsett vilken enhet eller skärmstorlek som används. Pixelstorlek används både för typsnitt men även för bilder.
Använder du CSS skriver du t.ex. font-size: 22px. Om vi tar en produktbild i en webbshop kan den ha måtten 300x300px vilket betyder att den är 300 pixlar bred samt även 300 pixlar hög.
EM – EMS
Em en är en skalbar enhet som utgår ifrån standardmåttet. Har du ett standardmått på dina typsnitt på 12px blir alltså 1em 12pixlar och 2em blir 24 pixlar.
Med CSS anger du font-size:1em
REM
Rem är precis som Em eftersom det också är ett relativt mått. Måttet utgår ifrån basstorleken på hela hemsidan istället för det elementet som finns ovanför som Em gör.
Rem liknar måttet Em på så vis att måttet är relativt. Rem utgår dock ifrån webbsidans rot fontstorlek till skillnad från Em som utgår från sin förälder. Sätter man ingen storlek som standard utgår ofta webbläsarna från 16px. Dvs rem är då relativt till 16px fontstorlek. Om du ger din rubrik font-size: 3rem så anpassas den alltså efter rotstorleken och blir alltså 48px.
Med CSS anger du font-size:1rem
VH och VW
Nu kommer vi till det jag tycker är roligt – VH och VW! Det handlar om bredd och höjd av det du ser på din skärm ”Viewport”. 100vw täcker hela bredden på skärmen likväl som 100vh täcker hela höjden på skärmen. Det här är ett relativt mått då det anpassar sig fullständigt efter den ytan det återfinns på.
Använder du istället 50vh upptar det alltså 50% av skärmens yta.
Det är ett mått jag inte rekommenderar att använda för typsnitt men istället för sektioner. En herobild på en hemsida kan mycket väl vara 100vh för att verkligen uppta hela skärmen.
Procent
Procent är precis som övriga relativa mått skalbart och är relativt mot det objekt närmst ovanför. Det här fungerar ungefär som em. Skriver du font-size:200% blir det dubbelt så stort som typsnittet det ärver sin egenskap av.
Det här är ett mått du även kan använda till kolumner, bilder och alla andra element på din sida – gärna i kombination med max-height eller max-width.
Hur använder du alla de här måtten i praktiken?
Det viktiga är som i all CSSkod egentligen – du behöver se till att enheten alltid kommer direkt efter det värdet du har skrivit in. Har du t.ex. font-size:1em är det viktigt att det står just så – skriver du 1 em fungerar det inte.
