Per Holmbergs webbtips:

Textformatering och typografi

Man säger att en bild säger mer än tusen ord, men text är fortfarande den stora informationsbäraren på de flesta sajter. Därför är typografi viktig. Webben läses vanligtvis från skärm, vilket gör att det inte går att tillämpa samma typografiprinciper som för tryckt text.

Text på skärm

En skärm består av pixlar. Pixlar är kantiga. Teckensnitt som Times har seriffer för att göra texten mer lätt att följa med ögonen. På skärmen, på grund av "pixligheten" blir effekten den motsatta - serifferna blir ganska jobbiga och tillför inget. Därför bör man tänka sig för innan man väljer ett teckensnitt med seriffer till sina webbsidor. Här följer personligt tycke om några vanliga teckensnitt:

CSS-exempel:

p { font-family: "Trebuchet MS", "Gill Sans", Verdana, Arial, sans-serif; }

Textstorlek

Texten ska vara så läslig som möjligt. Vad är det som påverkar detta om inte textstorleken? Det finns ingen bra motivering till att ha texten i mikroskopisk storlek. Tänk också på att texten kan bli olika stor beroende på vilken plattform användaren kör. Alltså, hellre lite för stor text än för liten. Måtta på härligheten bör naturligtvis finnas; för stor text bidrar till att användaren måste skrolla onödigt mycket. Jag rekommenderar att man sätter textstorlek med CSS i relativ storlek; dvs i procent. Exempel:

body { font-size: 90%; }

Radmellanrum

För att göra det enklare att följa rader med ögonen, bör man ha ett litet extra avstånd mellan raderna. Med CSS kan man sätta radhöjden relativt till texthöjden (eller relativt till enkel radhöjd för att vara exakt):

p { line-height: 1.4em; }

Styckebredd

Det finns två läror när det gäller styckebredd. Den första är variabel styckebredd då bredden anpassas efter webbläsarfönstrets bredd. Den andra är att man låser styckebredden till ett visst antal pixlar. Fördelen med den förra är att användaren själv kan påverka styckebredden medan fördelen med den senare är att texten aldrig blir för bred för att den ska bli otrivsam att läsa. Vilken av dessa två läror ska man följa? CSS låter dig göra en smart kompromiss genom att sätta maxbredd:

div { max-width: 35em; }

Notera att detta sätter textbredden relativt till textstorleken (vilket är bra!). Jag har inte fått CSS-egenskapen att fungera med IE. Den känns igen av de övriga moderna webbläsarna.

Länkar

Förra tipset: Rätt MIME-typ på XHTML-filer
Nästa tips: Förklara förkortningar smart
© Per Holmberg [kontakt]. Sidan senast uppdaterad 2004-04-28. Till toppen av sidan