30 års erfarenhet – 10.000+ deltagare – 100+ kurser – Certifierade kursledare
En central del i att skapa visuellt tilltalande och responsiva webbplatser handlar om att bemästra måttenheter. Från pixlar till procent, viewport-relativa värden och typografiska em och rem. Varje enhet har sin unika roll och påverkar hur dina designelement beter sig på olika skärmar. Vi ska titta på de måttenheterna som är vanligast på webben, förklara deras innebörd och när du ska välja rätt enhet vid rätt tillfälle och skapa en webbplats som ser bra ut – oavsett enhet.
En klassiker bland måttenheter är pixlar. Troligen för att det länge var den enda måttenheten. En pixel är en fast enhet som motsvarar en enda punkt på enhetens skärm. Pixlar är vad man kallar en absolut måttenhet vilket innebär att storleken inte förändras beroende på andra element eller skärmstorlek.
Använd pixlar när du behöver exakt kontroll över storleken på ett element och vill att det ska vara konstant oavsett skärmstorlek eller textstorleksinställningar. Det kan handla om t.ex. tunna linjer där du vill ha ett skarpt och konsekvent utseende. Ofta brukar man ställa in brödtexten, den största delen av text med pixlar.
Många hemsidesmallar använder pixlar (px) som måttenhet för att definiera brödtextens storlek. Kanske är det av gammal vana eftersom pixlar tidigare var den enda måttenheten?
När du använder px för teckenstorlekar kan det leda till att texten blir svår att läsa på mindre eller större skärmar. Det vanligaste är att man inte använder pixlar till rubriker, men att man kanske gör det för brödtext. Att enbart förlita sig på pixlar kan göra din webbplats mindre responsiv och otillgänglig för användare som har ställt in en större standardtextstorlek i sin webbläsare.
Relativa Måttenheter vilket betyder att storleken anpassar sig till andra element.
Vi börjar med em där 1em motsvarar den beräknade teckenstorleken för det aktuella elementet. Om teckenstorleken för ett element t.ex. brödtexten är 16px, så är 1em också 16px i det sammanhanget. Om ett underordnat element har en annan teckenstorlek, så kommer 1em att vara relativt till den storleken.
Du använder det här när du vill att storleken på ett element ska vara proportionerligt mot dess egen teckenstorlek. Det är användbart för att skapa komponenter där alla delar skalar i förhållande till texten. Du använder det t.ex. till marginaler och padding runt textelement för att behålla ett visuellt sammanhang och det är också ganska vanligt att använda em för rubriker när man använt px till brödtexten.
Tänk på att eftersom em är relativt till det närmaste föräldraelementets teckenstorlek kan det leda till oväntade storlekar om du har många nästlade element med olika teckenstorlekar.
1rem motsvarar teckenstorleken för rotelementet i HTML-dokumentet (<html>-taggen). Detta gör rem mer förutsägbart än em eftersom det alltid baseras på en enda källa. Standardteckenstorleken i de flesta webbläsare är 16px, så om du inte har ändrat den globalt, är 1rem lika med 16px.
För majoriteten av din typografi och layout underlättar rem responsiv design och tillgänglighet eftersom du kan ändra basteckenstorleken på rotelementet för att skala hela webbplatsens text och relaterade avstånd proportionerligt.
Du använder rem för att skapa konsekventa avstånd och storlekar över hela webbplatsen som är relaterade till textstorleken.
Definiera en basteckenstorlek på <html>-elementet (antingen standard 16px eller en annan om du vill skala annorlunda). För att göra det behövs en enkel CSS-deklaration. Här är ett exempel på hur du kan göra det:
Du kan justera värdet av font-size för att skala hela webbplatsens text och relaterade avstånd proportionerligt. Om du till exempel vill ha en större basteckenstorlek, kan du ändra till 18px eller en annan prefererad storlek. Det gör att alla relativa enheter, såsom rem, som är baserade på denna teckenstorlek anpassar sig.
1vw motsvarar 1% av webbläsarens fönsters (viewportens) bredd. Om webbläsarfönstret är 1200px brett, så är 1vw lika med 12px.
Använd vw när du vill att ett elements bredd ska vara relativt till webbläsarfönstrets bredd. Det är användbart för att skapa fullbreddssektioner eller element som alltid fyller en viss procentandel av skärmens bredd. Var försiktig med att använda vw för textstorlekar eftersom texten kan bli väldigt liten på smala skärmar och väldigt stor på breda skärmar. Det är bättre att kombinera med andra tekniker som responsiv typografi.
1vh motsvarar 1% av webbläsarens fönsters (viewportens) höjd. Om webbläsarfönstret är 900px högt, så är 1vh lika med 9px.
När du vill att ett elements höjd ska vara relativ till webbläsarfönstrets höjd använder du vh. Använd för att skapa helskärmssektioner (”hero sections”) som alltid fyller hela skärmens höjd. Tänk på att precis som med vw kan användning av vh för textstorlekar leda till problem med läsbarhet på olika skärmstorlekar.
Procentvärden är alltid relativa till värdet för den överordnade egenskapen. Till exempel, om ett elements bredd är satt till 50% kommer det att vara hälften så brett som dess närmaste innehållande blockelement. För teckenstorlek är procent relativt till föräldraelementets teckenstorlek.
Använd procent när du vill skapa layouter där element ska ha proportionerliga storlekar i förhållande till sina föräldra-element. Du kan också använda procent för att definiera bredder och höjder på kolumner i ett responsivt grid-system och du kan också använda det till teckenstorlekar när du vill att de ska skala i förhållande till föräldraelementets text.
Liksom med em kan nästlade element med procentuella storlekar ibland vara svåra att förutsäga om du inte har en tydlig förståelse för hur arvet fungerar.
I slutändan finns det inget perfekt svar på när du ska använda vilka måttenheter framför andra. Generellt sett är det ofta bättre att välja en av de relativa enheterna snarare än px så att din webbplats har störst chans att fungera med en responsiv design.
Välj pxom du behöver säkerställa att ett element aldrig ändrar storlek vid någon brytpunkt och förblir detsamma oavsett om en användare har valt en annan standardstorlek. Px-enheten garanterar konsekventa resultat även om det inte är idealiskt.
För layout och avstånd (marginaler, padding, bredder, höjder) är rem och procent (%) ofta de mest flexibla och rekommenderade enheterna för att skapa responsiva webbplatser. vw och vh är användbara för specifika helskärmseffekter.
För typografi (teckenstorlek) är rem det bästa valet för att säkerställa responsivitet och tillgänglighet genom att skala i förhållande till en global basstorlek. Använd em mer sparsamt när du specifikt vill att textstorleken ska vara relativ till det närmaste föräldraelementet.
I många CRM kan du välja måttenhet för många egenskaper direkt i redigeringsgränssnittet. Tänk noga på vilka måttenheter du väljer och hur den kommer att påverka din design på olika skärmstorlekar och för användare med olika inställningar. Att kombinera måttenheter på ett genomtänkt sätt är nyckeln till en välfungerande och responsiv webbplats.
Preflight i InDesign är ett kraftfullt verktyg som hjälper dig att säkerställa att ditt dokument uppfyller trycktekniska och publiceringsmässiga krav innan export eller tryck. Genom
Färg är ett av de mest kraftfulla verktygen inom design. Den påverkar hur vi uppfattar ett varumärke, hur vi känner inför en produkt – och
Mediakurser Sverige AB | Drottninggatan 88 D | 111 36 Stockholm
Tel: 08 406 00 30 | E-post: info@mediakurser.se