NinetNet    LAYOUT & DESIGN    Mått & Enheter   skriv ut  

Webbsidor & Enheter

När man anger storlek på text och andra delar av innehållet på en webbsida - som boxar och tabeller - måste man förstås använda någon typ av mått / enhet.

De mest användbara enheterna på webbsidor är px, em och %. Men det finns en hel del andra enheter att välja på:

px	pixlar	10 x 10 px
pt	punkter / 1 pt = 1/72 inch	10 x 10 pt
mm	millimeter	1 x 1 mm
pc	picas / 1 pc = 12 pt	1 x 1 pc
cm	centimeter	1 x 1 cm
in	inches - tum	1 x 1 in
em	- utgår från teckensnittets storlek
ex	- utgår från teckensnittets x-höjd
%	( procent ) - anpassar sig procentuellt till omgivningen

Pixlar

Pixlar är en enhet som används ofta på webbsidor. Pixlar används för att bestämma upplösningen på en bildskärm och därför kan en pixel på en webbsida i praktiken betraktas som en absolut enhet - ett fast mått.

En bildskärms pixel är ju så att säga alltid en pixel i förhållande till alla andra pixlar som får plats på skärmen. Det gör att man med mått angivna i pixlar får en god uppfattning om hur sidan kommer att ta sig ut även på andra bildskärmar.

Men egentligen är pixlar en relativ enhet ( enligt W3C's CSS-specifikation ) eftersom en pixel faktiskt kommer att bli större - växa - om man sänker upplösningen på skärmen. Eller bli mindre - krympa - om man höjer upplösningen.

Enligt samma logik som att Anna Lindmarkers näsa kommer att vara större om du ser "Nyheterna" på en 28-tums-TV än på en 21-tums-TV...

Samma upplösning	Samma upplösning

Om TV-apparaterna ovan var bildskärmar skulle man kunna ändra deras upplösning. Och se mer - eller mindre - av Anna. Och då förändras ju storleken på näsan också... Såklart!

Högre upplösning	Lägre upplösning

Men som sagt:
Ur alla praktiska aspekter av webbside-tillverkning kan man absolut betrakta pixlar som en absolut enhet...   

Här kan du läsa mer om olika upplösningar:
LAYOUT & DESIGN / Skärmar & Upplösning

Em

Enheten em är en relativ enhet som utgår från textens storlek. Utgångspunkten är den aktuella fontstorleken och besökaren kan förändra måttet genom att ändra storleken på texten manuellt i webbläsaren.

Enheten "em" är att föredra om man vill att sidan ska fungera för andra plattformar än en "vanlig dator". "Em" är nämligen en mycket användbar enhet när man vill skapa elastiska layouter och används då som mått både på teckensnitt och andra delar av sidan ( som boxar och tabeller ) - som då anpassar sig efter textens storlek. Men mer om det längre ner på sidan!

Procent

Enheten procent är - precis som "em" - en relativ enhet men uppför sig lite olika beroende på om man använder den för att ange storlek på texten eller andra områden på sidan.

Gäller det teckensnittet utgår "procent" precis som "em" från den aktuella fontstorleken och besökaren kan även här förändra måttet genom att ändra storleken på texten manuellt i webbläsaren.

"Procent" kan också användas för att skapa flyande layouter. Anger man storleken på sidans olika delar i "procent" är utgångspunkten kringliggande element och dess storlek. De olika delarna kommer inte att påverkas av att textens storlek förändras. Men mer om det - längre ner!

Ex

Enheten ex är en relativ enhet och utgår från teckensnittet och höjden på bokstaven: x. Precis som enheten "em" är utgångspunkten den aktuella fontstorleken och besökaren kan förändra måttet genom att ändra textens storlek manuellt i webbläsaren. "Ex" fungerar som "em" - men em är det mått man vanligtvis använder på webbsidor.

In, Cm, Mm, Pt, Pc

Inches, Centimeter, Millimeter, Points och Picas kategoriseras som absoluta enheter. Men de här enheterna är inte så användbara på webbsidor eftersom en inch (tum) och en centimeter i själva verket inte alltid är en inch eller centimeter på alla operativsystem och i alla webbläsare. Points och Picas är dessutom typografiska enheter och var ursprungligen avsedda för trycksaker.

På en webbsida är de här måtten alltså ungefär lika säkra som det är säkert att ett par stövlar i storlek 40 är exakt lika stora som ett annat par i samma storlek...

Här kan du ta del av W3C's information om olika enheter:
W3C - CSS - length-units - på engelska

 Till Toppen 

Teckensnitt & Enheter

Eftersom webbben är en plats som bör fungera för alla är det viktigt att användaren i viss mån själv kan styra utseendet på en webbsida. Särskilt viktigt är det att man kan ändra storleken på texten manuellt.

Alla har som bekant inte perfekt syn! Men även om man har det - kanske man ändå föredrar att läsa en text med större eller mindre textstorlek än vad webb-designern tycker blir snyggast...

Har man en personlig hemsida där man skriver lite om sin hund eller katt och vad man fick i julklapp kan man kanske strunta i det här. Men för t.ex. myndigheter, banker och kommersiella sidor har det avgörande betydelse - eftersom det kan vara förödande för dem att utestänga en del av besökarna.

Bra enheter för Teckensnitt

Pixlar är ett mått som varit mycket vanligt när man vill ange storleken för texten på webbsidor och allt skulle vara frid och fröjd om alla webbläsare fungerade likadant. Men som vanligt: Det gör de inte!  

Problemet uppstår eftersom en font-storlek angiven i måttet pixlar i vissa webbläsare inte kan förstoras eller förminskas genom att användaren själv ändrar textstorleken manuellt. Storleken på texten förblir densamma.

Man hade i och för sig kunnat strunta i det - om det nu inte var så att just webbläsaren Intenet Explorer har det här problemet. De flesta vanliga användare surfar ju som bekant med just den webbläsaren. Är det inte så att man blir rent GAAALEN?

Alltså! Om du vill anpassa sidans läsbarhet för flertalet besökare ska du använda dig av de relativa enheterna "em" och "procent" för att ange teckensnittets storlek.

Skillnaden mellan pixlar och andra relativa enheter

Skillnaden mellan att ange storlek på teckensnitt i "pixlar" (som i det här sammanhanget ska betraktas som ett fast mått) och ett relativt mått som "em" eller "procent" är att det relativa måttet hela tiden anpassar sig efter tidigare angivna mått.

Om man angett att storleken på en sidas teckensnitt generellt ska vara 12 pixlar kan man glatt ange att en rubrik däremot ska vara 16 pixlar och det kommer att fungera utmärkt.

Men om man använder en relativ enhet och anger att teckensnittet generellt på sidan ska vara 75% gäller den storleken fortsättningsvis som 100%. Alltså måste man utgå från DET när man anger rubrikens storlek.

Krångligt? Nädå! Håll i hatten och läs vidare!

Webbläsarens Standardstorlek

Om man inte använder CSS för att bestämma teckensnittetets storlek på en webbsida kommer webbläsarens standardstorlek att gälla.

I de flesta webbläsare för "vanliga datorer" är standardstorleken för teckensnitt 16 pixlar och det är vad vi kommer att utgå från fortsättningsvis!!

Klicka här för att se en testsida! (öppnas i nytt fönster)

Om man inte särskilt anger någon storlek på texten kommer den alltså att visas i storleken 16 pixlar.

Em och Procent är relativa enheter som anpassar sig efter tidigare angivna mått.

1em är alltid detsamma som 100% - när det gäller teckensnittets storlek.

Standard är alltså:  1em och 100% = 16 pixlars teckenstorlek.

 Till Toppen 

Ange Teckensnittets storlek i em och %

Okej! Håller du i hatten? Vi tar det bit för bit!

Inledning

Em och Procent anpassar sig alltså efter tidigare angivna mått och det första elementet på en webbsida är ju <HTML> och för själva innehållet på sidan gäller <BODY>.

Därför kan det vara bra att börja med att ange den teckenstorlek som man vill ska vara den "övergripande" för sidan med taggen body som selektor - och använda enheten procent. Sedan kan man anpassa resten av sidan efter det.

Varför procent?

Som nämndes ovan fungerar pixlar som enhet på teckensnitt mindre bra eftersom textens storlek då inte kommer att kunna förändras manuellt i Internet Explorer.

Men Internet Explorer har också problem med att hantera boxar / områden innehållande text vars storlek angetts med enheten em...

Genom att ange att hela sidans font-storlek ska styras av enheten procent - med body som selektor undviker man det här problemet.

Sedan kan man lugnt använda enheten "em" som font-storlek och mått på "elastiska boxar" och det kommer att fungera som det ska - även i Internet Explorer. Men mer om det längre ner!

Även om man inte har för avsikt att ändra teckensnittets storlek - utan utgå från standardstorleken - kan det alltså vara bra att ange den "övergripande" font-storleken till 100% - vilket i praktiken innebär att ingenting egentligen förändras.

Så här skulle det se ut i Stilmallen:

På resten av sidan kan man sedan välja antingen "em" eller "procent" för att ange teckensnittets storlek. I exemplen nedan används "em".

1. Ange Teckensnittets storlek för  <BODY>  i   %

Eftersom man utgår från att standarstorleken för teckensnitt i webbläsaren är 16 pixlar och vi nu ska använda procent måste man ta till lite matematik...

16 px är alltså inledningsvis 100%. Men om jag nu vill att mitt teckensnitt ska visas i storlek 12px?

Matematik:
12 / 16 = 0,75

Alltså:
75 %

Några vanliga font-storlekar och dess motsvarighet i % om man utgår från 16px = 100%:

24 px = 150 %
20 px = 125 %
18 px = 112.5 %
16 px = 100 %
14 px = 87,5 %
12 px = 75 %
11 px = 68.75 %
10 px = 62.5 %
  8 px = 50 %

Så här anger man att teckensnittet för innehållet på sidan ska vara Verdana motsvarande 12 pixlar - med utgångspunkten att 16 pixlar = 100%:

Klicka här för att se en testsida med exempel! (öppnas i nytt fönster)

2. Ange Teckensnittets storlek för Text och Rubriker m.m.

Inledning

Okej! Nu är alltså teckensnittet för sidan angivet till vad som motsvarar 12 pixlar - och det är vad man ska utgå ifrån fortsättningsvis!

12 px är nu alltså 100% = 1 em

Men om jag nu vill att min text ska visas i storlek 11 px?

Matematik:
11 / 12 = 0.9

Alltså:
0.9 em   eller   90 %

Några vanliga font-storlekar och dess motsvarighet i em och % - om man utgår från 12px = 1 em = 100%:

24 px = 2 em = 200 %
20 px = 1.66 em = 166 %
18 px = 1.5 em = 150 %
16 px = 1.33 em = 133 %
14 px = 1.16 em = 116 %
12 px = 1 em = 100 %
11 px = 0.9 em = 90 %
10 px = 0.83 = 83 %
  8 px = 0.66 em = 66 %

Rubriker

Om du inte särskilt anger vad dina rubriker ska ha för storlek kommer de fortfarande att visas med webbläsarens standardstorlek. Alltså måste man ändra på det!

Så här anger man att h1 ska visas med vad som motsvarar 18 pixlar och h2 med vad som motsvarar 16 pixlar med enheten em - om man utgår från 12px = 1 em = 100%:

Text

Texten på sidan kommer automatiskt att få den storlek som angavs tidigare i body. Vill man ändra den storleken för vissa stycken kan man skapa klasser (eller id'n) för det ändamålet.

Så här anger man att klassen small ska visas med vad som motsvarar 11 pixlar och klassen big med vad som motsvarar 14 pixlar med enheten em - om man utgår från 12px = 1 em = 100%:

Klicka här för att se en testsida där texten formaterats som beskrivits ovan! (öppnas i nytt fönster)

Radavstånd

Oberoende av vad man använder för teckensnitt och fonstorlek mår de flesta sidor bra av att man utökar radavståndet lite. Mellanrummet mellan raderna, alltså!

Den aktulla teckenstorleken motsvarar ju alltid 1em och när man anger radavståndet är det inte så dumt att använda den enheten. Eftersom 1em är utgångspunkt innebär t.ex 1.3em att radavståndet blir lite större än normalt.

Så här:

3. Felsökning

När du börjar använda relativa enheter kommer du förr eller senare klia dig i huvudet och grymta: Va? Varför blev det så hääär?

Oftast beror det på att du glömt att "em" och "procent" utgår från den aktuella storleken på teckensnittet!

När man anger font-storlek i pixlar har man en tendens att bestämma storleken här och var och överallt - fast det egentligen inte hade behövts eftersom storleken skulle ha gått i arv och visats korrekt ändå. Men så kan man inte hålla på om man använder relativa enheter!

Exempel

Låt oss säga att du vill skapa en box eller tabell som ska innehålla grön text. Texten ska vara lite mindre än den aktuella font-storleken. Eftersom 1em alltid motsvarar den aktuella font-storleken - väljer du kanske 0.75em.

Låt oss säga att HTML-koden på sidan ser ut så här:

Med följande CSS-kod skulle den gröna texten bli betydligt mindre än vad du tänkt dig!

.box { font-size: 0.75em; }
.green { font-size: 0.75em; color: green; }

Eftersom texten med klassen "green" ligger inom ett område där teckenstorleken redan bestämts till 0.75em skulle den gröna textens storlek beräknas utifrån DET!

Och få storleken: 0.75em av 0.75em, så att säga...

Så här blir bättre!

.box { font-size: 0.75em; }
.green { color: green; }

Det fungerar på samma sätt om HTML-koden ser ut så här:

 Till Toppen 

Ange Storlek på Boxar & Tabeller

Inledning

Med CSS kom möjligheten att formge en webbsidas layout med boxar - som i praktiken är rektangulära områden som kan innehålla i stor sett vad som helst. Man kan t.ex skapa boxar för menyer och innehåll - för att sedan ge dem olika bredd och placera ut dem i förhållande till varandra på sidan.

Tidigare användes tabeller för layout på webbsidor - eftersom det inte fanns så mycket annat att välja på! Tabeller används fortfarande i stor utsträckning för fomgivning - men egentligen är de till för att strukturera data och ingenting annat!

Men huruvida man ska använda tabeller eller boxar för att formge sin sida är en helt annan diskussion! Här handlar det om att bestämma storleken rätt och slätt.

Enheter för Boxar & Tabeller

De mest användbara enheterna för att bestämma storlek på boxar och tabeller är pixlar, em och procent! Alla fungerar lite olika så här ska man välja utifrån hur man vill att det ska fungera.

Pixlar

Om man anger bredden på en box eller tabell i pixlar kommer bredden att förbli densamma även om man förändrar texten manuellt i webbläsaren eller förändrar storleken på webbläsar-fönstret.

Om texten förstoras kommer rutan att expandera nedåt. Höjden kommer att anpassa sig även om texten förminskas! Med pixlar kan man alltså skapa layouter som har fast bredd.

Men se upp! Texten kommer att hamna utanför boxen även på bredden - om texten förstoras tillräckligt mycket!

Gäller det en tabell kommer tabellcellen att anpassa sig efter innehållets stolek även om det "inte får plats"!

Procent

Om man anger bredden på en box eller tabell i procent kommer bredden att anpassa sig efter omgivningen.

Bredden kommer inte att påverkas av att man förstorar textens storlek manuellt i webbläsaren - rutan kommer att expandera nedåt. Höjden kommer att anpassa sig även om texten förminskas! Med procent kan man skapa flytande layouter som anpassar sig efter webbläsarfönstrets storlek.

Men även här kommer texten förr eller senare att hamna utanför boxen även på bredden - om texten förstoras tillräckligt mycket!

Gäller det en tabell kommer tabellcellen att anpassa sig efter innehållets stolek även om det "inte får plats"!

Em

Om man anger bredden på en box eller tabell i em kommer bredden i utgångsläget att vara "fast"- enligt regeln: 1em = teckensnittets aktuella storlek.

Förändras textstorleken i webbläsaren kommer bredden (och höjden) att anpassa sig proportionerligt efter textens storlek. Om man förändrar storleken på webbläsar-fönstret kommer bredden (och höjden) att förbli densamma!

Med em kan man skapa elastiska layouter som alltid anpassar sig efter textens storlek.

Lite längre ner skapas en elastisk box steg för steg!

Höjden då?

Om man inte särskilt anger höjden på en box eller tabell kommer den att anpassa sig efter innehållets storlek i höjdled.

Visst kan man ange höjden också! Men när man använder boxar för layout är det i de flesta fall inte användbart eftersom det kan vara svårt att förutse vad som händer med boxen när texten förstoras...

Här kan det vara bra att hålla i minnet att radavstånd och marginaler på stycken inte tar lika stor plats i alla webbläsare!

En bild som Exempel:

OBS! I Internet Explorer kommer boxar felaktigt att anpassas på höjden efter innehållet - och man kommer inte att upptäcka att texten i själva verket hamnar utanför! Därför är det viktigt att kolla sin sida i fler än en webbläsare! Mozilla Firefox är ett bra alternativ!

Klicka här för att se en testsida med boxar och tabeller - med storlek i olika enheter! (öppnas i nytt fönster)

 Till Toppen 

Skapa en Elastisk Box med enheten Em

Inledning

Nedan skapas en box med bredd, font-storlek m.m i enheten em. Boxen kommer alltså att bli elastisk. När man ändrar textens storlek manuellt i webbläsaren kommer boxen att anpassa sig proportionerligt efter textens storlek.

Men! Eftersom webbläsaren Internet Explorer uppför sig lite som den vill i många sammanhang skulle boxen inte få samma utseende i flertalet webbläsare om man inte tog till några trix.

Nedan jämförs boxens utseende med bildexempel i Mozilla Firefox och Internet Explorer. Firefox hanterar nämligen boxar på ett korrekt sätt! Teckensnittet är: Tahoma.

1. Skapa boxen

Först skapas ett "område" på sidan - med hjälp av taggen <div>.

Låt oss säga att HTML-koden på sidan ser ut så här - en box med lite text:

Bredden på boxen anges med enheten "em" i css-koden:

Och så storleken på texten i boxen:

Och så här ser det ut - med kantlinje för syns skull:

• Som du ser är det en viss skillnad!

Fixa!!

Det fixar man till genom att bestämma marginalerna på texten!

• Ovanstående CSS-kod anger att "boxtexten" endast ska ha marginal under! Storlek: 1em !

Och då ser det ut så här:

• Som du ser: Ingen skillnad!

Klicka här för att se en testsida! (öppnas i nytt fönster)

2. Stycken & Padding

Nu tänker vi oss att det här är en box som ska innehålla flera stycken med text. Därför blir det smidigare att skapa en "textbox" så att alla text-stycken inom boxen får samma formatering.

Då kan HTML-koden på sidan se ut så här i stället:

Och CSS-koden:

Och så padding runt all text i boxen:

Och så här ser det ut - med kantlinje för syns skull:

Klicka här för att se en testsida! (öppnas i nytt fönster)

3. Förändra Textstorleken Manuellt i Webbläsaren

Vitsen med att skapa en elastisk box är ju att den ska anpassa sig efter textens storlek om text-storleken förändras manuellt i webbläsaren.

HTML-koden på sidan ser alltså ut så här:

Och CSS-koden så här:

Och så här kan det se ut om man förminskar texten manuellt:

• Som du ser är det en viss skillnad - men det borde se likadant ut. Förstoras texten blir det lika galet!
• Det beror på att Internet Explorer gör fel!
• Om man använder procent för att ange font-storleken uppstår inte det här problemet!

Fixa!!

Procent, ja... Men vi skulle ju använda enheten em !!!

Det går att komma runt genom att ange att hela sidans font-storlek ska styras av enheten procent.

Ett litet tillägg i CSS-koden:

• 100% innebär i själva verket att man inte förändrar någonting!

Då kan det se ut så här om man förminskar texten manuellt:

• Ingen skillnad! HURRA!!  

Klicka här för att se en testsida! (öppnas i nytt fönster)

4. Felsökning

En elastisk box ska ju anpassa sig efter textens storlek om text-storleken förändras manuellt i webbläsaren.

Men det finns gränser!

Enheten "em" är ju på sätt och vis ett "fast mått" eftersom det utgår från font-storleken - som alltid har en viss storlek!

Därför måste man se till att texten får plats i boxen från första början. Annars anpassar sig boxen efter texten med en bredd som är för snålt tilltagen!

Så här skulle det kunna se ut - bredden på boxen rymmer inte ens det första ordet:

OBS!
Internet Explorer kommer felaktigt att anpassa bredden på boxen efter innehållet - och man kommer inte att upptäcka att texten i själva verket hamnar utanför! Därför är det viktigt att kolla sin sida i fler än en webbläsare! Mozilla Firefox är ett bra alternativ!

 Till Toppen 

Avslutningsvis...

Avslutningsvis är det lika bra att betona: En del anser att man inte ska påverka teckensnittets storlek ALLS! Att man alltid ska låta besökarens egna inställningar vara standard på sidan utan att man behöver ändra textens storlek manuellt. Om du vill att din webbsida ska fungera främst på andra plattformar än "vanliga datorer" är det kanske något du bör överväga...

Men annars tycker inte jag att det är någon bra idé - eftersom de flesta aldrig använder sig av funktionen för att ändra textstorleken! En sida som inte anpassar storleken på teckensnittet skulle för flertalet besökare upplevas som att texten var alldeles för stor. Det är precis lika funktionellt att använda textstorlekar som förhåller sig till besökarens egna inställningar för textstorlek. Som till exempel "em" eller "procent". Då kan man ju dessutom anpassa textstorleken till sidans design...

Opera

Webbläsaren Opera använder sig av "zoom" när besökaren vill "förändra storleken på texten" manuellt i webbläsaren. Hela webbsidan kommer då att skalenligt zoomas in och ut. Det är Opera ganska ensam om. I de flesta webbläsare förändras allt i förhållande till textstorleken.

Om du själv är Opera-användare och håller på att knåpa ihop en webbsida bör du installera en webbläsare som fungerar som webbläsare gör mest. Du måste ju kunna kontrollera hur sidan ser ut för dem som inte surfar med Opera! Ett bra alternativ är: Mozilla Firefox!