CSS Font Sizing: Pixlar vs Em vs Rem vs Procent vs Viewport Units

Mycket har diskuterats om pixlar vs em vs procent vs rem och vilken typsnittsegenskap som ska användas och när. Trots alla över 100 artiklar på nätet kan det här ämnet vara mycket förvirrande med tanke på hur användningen av dessa teckensnittsegenskaper skiljer sig åt beroende på behoven i våra projekt. Vissa föreslår till exempel att man inte ska använda fasta pixelvärden på basnivå (html- och body-element) eftersom användaren inte kommer att få möjlighet att ställa om teckensnittsstorleken enligt sina önskemål. Men för personer som jag som är beroende av bootstrap är detta inte tillrådligt. Det slutar med att vi har ett fast basvärde i pixlar och måste skapa hela projektets teckensnittsegenskaper i förhållande till baspixelvärdena.

Denna artikel förklarar skillnaden mellan dessa teckensnittsegenskaper och hur man bäst använder dem. Naturligtvis finns det inget rätt sätt att göra detta och en stor del av vilka typsnittsstorlekar som ska användas och hur kommer till stor del att vara deterministiskt baserat på vår förståelse av dessa typsnittsstorleksenheter och projektet i fråga.

Pixlar: Före tillkomsten av responsiv design användes pixel i stor utsträckning som DEN storlek på typsnitt för allt från typografi till bredd, utfyllnad och höjd. Pixlar är dock enheter med fast storlek och ändras inte baserat på visningsfönstrets storlek eller är skalbara. Om du vill bygga en responsiv webbplats med hjälp av pixlar kan det bli mycket svårt att hålla reda på alla pixelbaserade värden i hela CSS-stilarket, inklusive värdena i mediaqueries. Så vilken typsnittsegenskap kan vi använda som gör att vi kan göra minimala ändringar i CSS-stilarket men som ändå är skalbar? Det är där em, rem, procent och viewport-enheter kommer in i bilden.

Em:Em är en flexibel, skalbar enhet som omvandlas av webbläsaren till pixelvärden. Om standardtypsstorleken i chrome är 16 px är 1 em = 16 pixlar. En stor missuppfattning om em är att den är relativ till teckensnittsstorleken för det överordnade elementet. Enligt W3-specifikationen är em relativa till teckensnittsstorleken på det element där de används. Den här artikeln här har gjort ett fantastiskt jobb med att förklara begreppet em på ett tydligt och detaljerat sätt. Om du verkligen vill lära dig hur em fungerar ska du inte hoppa över den ovan nämnda artikeln. Ems används vanligen för typografi som rubriker, texter , stycken och de element som är förknippade med typografi som marginaler, utfyllnad osv. Om du ställer in din bas html- och bodyelementens typsnittsstorlek i pixlar och dina typografielementens egenskaper definieras med hjälp av ems, behöver du för responsiv design bara ändra standardtypsnittsstorleken på basnivå, t.ex.

@media (max-width: 400px) {
html, body { font-size: 15px; }
}

och alla em-värden kommer automatiskt att räknas om till basnivån.

Ems har dock en stor invändning, nämligen arv!!! Ett <div> med en typsnittsstorlek på 16px som innehåller ett <p> med en typsnittsstorlek på 2em innebär till exempel 32 px för <p>-elementet. Lägg nu till en <div> inuti <p> med en typsnittsstorlek på 0,5em också, resultatet för div:n blir 16px, hälften av 32 px, inte 8px. Det är här rems kommer in i bilden.

Rem: Rem är relativt till teckensnittsstorleken för rotelementet (html-elementet). Om html-elementets teckensnittsstorlek är 16 px är 1rem = 16 px. Rem kommer ALLTID att vara relativt till rotelementet, oavsett hur inbäddade elementen är. Att endast använda rems och inga ems kan dock medföra en del problem eftersom typografin antingen kan bli för stor eller för liten, vilket kan leda till skalningsproblem. Den här artikeln förklarar ett bra sätt att lösa detta problem.

Percents: Procentvärde: Procentvärde är alltid relativt till ett annat värde, oavsett om det är elementets överordnade värde eller från en annan egenskap hos själva elementet. Procentvärden används i stor utsträckning i responsiv design. Ett bra exempel är Twitters ramverk Bootstrap. Bootstraps 12-kolonnslayout har sina bredder inställda i procent, så att de alltid är flytande och dimensionerade i förhållande till sitt överordnade element
Procentandelar används ofta för bredd och höjd på containrar, divs och för dimensionering av responsiva bilder.

Vyport-enheter:

1vw = 1 % av visningsbredden
1vh = 1 % av visningshöjden

Visningsbredd och -höjd är relativa till bredden/höjden för den aktuella visningsstorleken.

Visningsbredd betyder här webbläsarens fönsterstorlek. Om du vill storleksbestämma ditt element baserat på viewportbredden och inte på det överordnade elementet/rotelementet är viewport-enheter den enhet för typsnittsstorlek som du måste använda. vw/vh-enheter fungerar utmärkt med typografi och används vanligen för samma sak.
Här finns en bra artikel som förklarar hur du använder den här egenskapen.

Slutomdöme: Eftersom jag använder bootstrap ofta är min standardbasstorlek i pixlar. Jag använder procent för att ställa in bredden och höjden på bilder, containrar och divs, ems och rems för typografi och element relaterade till typografi som marginal, padding etc. Jag leker för närvarande med viewport-enheter för responsiv typografi och tycker att det är häftigt. Experimentera mycket med dessa typsnittsegenskaper och du kommer snart att falla in i en stil som är skräddarsydd för dig.