webForumDet fria alternativet

Skillnaden på att använda em och px

HTML & CSS

3 svar · 893 visningar · startad av peppar

Medlem sedan dec. 2001873 inlägg
Frågan#1

Vad är det för skillnad på att använda em och px när man anger storlekar i tex. formateringen för text i css?
Vad har dom för för och nackdelar... Validering, webstandardskillnader?

Medlem sedan nov. 200013 890 inlägg
#2

Här är några trådar (med bra länkar) som tar upp detta:
http://www.webforum.nu/showthread.php?s=&forumid=12&threadid=63536
http://www.webforum.nu/showthread.php?s=&forumid=12&threadid=74569
http://www.webforum.nu/showthread.php?s=&forumid=12&threadid=55400

Kort sagt: Använde em (eller %) för att besökaren själv ska kunna ändra storleken på typsnittet i sin webbläsare. :)

Medlem sedan juni 2003771 inlägg
#3

Vassego, lite (mycket) läsning om olika måttenheter!

Absoluta mått
mm = millimeter

cm = centimeter

in = inch

pt = point (72pt = 1inch)

pc = pica (1pc = 12pt)

Relativa mått
em = fyrkanten (emspace), anges som delar av teckenstorleken, t.ex. 0.5em

ex= x-höjden, anges som em

% = som procent i förhållande till sidans standard eller den omgivande textens utformning,

Pixel
px = pixel, bildskärmspunkt, den minsta enheten i webbtypografi

Mått kan anges på många sätt, som gör det möjligt att i detalj styra formgivningen, med samma exakthet som i tryck.

Pixelmått ger detaljkontroll
De klassiska absoluta måtten har nackdelen att de visas olika på Mac och PC, beroende på att Mac anser att bildskärmen har en upplösning på 72 dpi och Windows anser att den har 96 dpi för text. Ett givet mått får alltså 133 % större utrymme på PC och 75 % mindre utrymme på Mac. Därmed används olika teckenstorlekar för samma pt-storlek.

Pixel-måttet rekommenderas generellt. Det negligerar bildskärmsupplösning och anger direkt antalet pixlar, varvid samma storlek används på Mac och PC. Pixel ger dessutom möjlighet till noggrannare kontroll av formgivningen, och kan ta fram teckenstorlekar som ligger mellan punktstorlekar.

Relativa måttet em är lämpligast för typografi
Relativa mått bör användas om man ska ändra något textelement i förhållande till den omgivande texten, t.ex. förstaradsindrag eller ändring av teckenstorlek, eftersom det anpassas till teckenstorleken på texten. Relativa mått anpassas också till inställningar av teckenstorlek i webbläsaren.

Webbläsaren kan förstora visningen av texten i ett dokument. Det är särskilt viktigt för funktionshindrade, men med tanke på den minimala teckenstorleken på många webbplatser är den av nytta för många.

Den förutsätter att texten är angiven med relativa mått. (Opera har dock en zoom-funktion som förstorar själva bildskärmens visning som inte kräver relativa mått.)

Mått som pixel (px), punkt (pt) och millimeter (mm) är absoluta och kan inte storleksförändras. Måtten "em" och "%" är relativa mått som är användbara. Procentmåttet är lite knepigt ibland, eftersom procenten beräknas utifrån det sammanhang som texten ingår i. Mest användbart är måttet "em" som rekommenderas av W3C som typsnittsmått.

Måttenheten "em" står för "bredden på bokstaven M", och avser typsnittets teckenstorlek. (På svenska blir det "fyrkant", en kvadrat med teckenstorleken som sida.) Detta mått anger hur stort något ska vara i förhållande till den aktuella teckenstorleken. Radavstånd angivet som "1.4em" innebär "1.4 x teckenstorleken". Ett litet varningsord: måttet "%" ger inte alltid samma resultat som "em", så bäst är att hålla sig till "em".

Men hur beräknas teckenstorleken om även den är angiven i "em"?. Givetvis enligt ärftlighetsprincipen, alltså utifrån det överordnade märkets teckenstorlek, som normalt sett är BODY. Bäst är att ange ett absolut värde för teckenstorlek i BODY-märket, som referens för beräkningen av "em". Om man anger den storleken i pixelmått kan man dessutom hantera skillnaden i teckenstorlek på PC och Mac.

Om man inte anger något referensvärde beräknas relativ teckenstorlek utifrån webbläsarens standard för teckenstorlek. Det brukar vara 12 pt, så i allmänhet är teckenstorleken 1em = 12 pt och 0.5em = 6 pt. (Om man har ändrat webbläsarens inställning så att ett annat värde gäller för standardstorlek för typsnitt, så blir det utifrån detta värde som em beräknas.)

Översatt i måttet pixel blir det 1em = 12pt = 16px, 0.5em = 6pt = 8px. Man kan beräkna värdet för teckenstorlek i em genom att dividera pixelmåttet med 16, alltså 8px/16 = 0.5em, om referensevärdet är 16 px eller 12 pt.

Detta stämmer i stort när det gäller teckenstorlek. Måtten kan anges med flera decimaler, men endast steg om fem hundradelar 0.05 fungerar i webbläsaren. Därvid kan man i vilket fall få fram alla teckenstorlekar som finns i "px" och mer kan man inte begära.

Observera att andra typografiska värden beräknas utifrån den aktuella teckenstorleken. För radavstånd, indrag och andra enheter måste man alltså ange relativa värden i förhållande till den teckenstorlek som anges av värdet för "em" i förhållande till referensvärdet.

Det innebär att absoluta pixelmått måste översättas till "em" från fall till fall. ("0.5em" motsvarar 6pt och 8px om teckenstorleken är 12 pt, men blir 4.5pt och 6px om teckenstorleken är 9pt.)

För andra mått än de som rör typsnitt fungerar inte "em", eftersom det måste utgå från uppgifter om just teckenstorlekar.

Använd vanliga punktmått i utskriftsmallen.
Vid utskrift kan det hända att skrivaren använder pixelmåtten, varvid texten blir mycket liten. I en formatmall för utskrift bör vanliga absoluta pt-mått användas för typografin.

Det förenklar dessutom utformningen eftersom man kan använda mått som man är van vid från andra tryckta produkter.

Delar av denna text är hopplockad från olika webbsidor, minns dock inte adressen.

Medlem sedan dec. 2001873 inlägg
#4

Tack båda två, nu är jag med i matchen igen, fast spelplanen utvidgades ganska mycket.

264 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
119 ms — deklarationer (db)
0 ms — hämta statistik (cache)
139 ms — hämta tråd, inlägg och bilagor (db)
122 ms — ändringar (db)