Storlek på text

Med CSS kan du ändra den förinställda textstorlek som webbläsaren ger alla webbelement.

I CSS kan man använda flera värdeenheter till sådana egenskaper som kräver att man beskriver storlek eller avstånd. Textstorlek bör anges i dynamiska enheter som ems eller procent, vilket gör det möjligt för användaren att själv justera sin textstorlek i webbläsaren.

Webbläsarens förinställda textstorlek är den som visas när menyn Visa/Textstorlek är inställd på Medel eller Normal.

OBS! I de flesta nya webbläsare går det numera också att zooma en webbsida för att kunna se bättre.

Textstorlek anges i CSS med egenskapen font-size. Med ett värde i enheten em eller % jämförs den nya storleken med normal text (inte rubriker). Enhetsbeteckningar skall sättas direkt efter siffervärdet.

Eftersom body omfattar allt innehåll på en webbsida, ger exemplet nedan all text en 20 % mindre textstorlek än webbläsarens förinställda.

body { font-size:80% }

Enheten em får också anges med decimaltal och den beskriver hur många gånger större eller mindre man menar. Detta jämförs i de flesta fall med den textstorlek elementet har. Tänk på att decimaltal alltid ska innehålla punkt (amerikansk standard) och inte kommatecken som vi har.

Samma storlek som ovan, angivet i ems, ser ut så här:

body { font-size:0.8em }

När du vill ändra storlek på en rubrik relaterar värden i ems eller procent även här till normal textstorlek, och inte till rubrikens egen storlek.

Exemplet nedan resulterar därför i att huvudrubrikerna får samma textstorlek som normal text. Värdet 1em motsvarar 1 gånger normal textstorlek, d.v.s. lika stor. Samma storlek skulle också kunna formuleras 100%.

h1 { font-size:1em }