Texten på sidorna

En websida skall inte vara vare sig för kort eller för lång. En regel som jag sett är att ariklar skall vara 400 - 1000 ord. En annan regel, som jag försöker följa, är att sidorna skall helst vara under 4 A4-sidor om man skriver ut dem. Blir sidantalet 5 är det kanske ingen större katastrof, men blir det sex sidor bör vi dela upp texten i två sidor. Vi skall gärna dela upp denna text i mindre stycken, gärna med mellanrubriker.

Om vi skriver en företagssajt kan man dela upp sidorna i allmänna sidor och instruktionssidor. Säljer vi brädgolv bör vi kanske inte skriva 5 sidor om brädor i allmänhet. Rena reklamsidor skall vara korta och koncisa. Däremot kan läggningsinstruktionerna få bli längre.

Grundregeln är väl att lagom är bäst. Vissa sidor måste få bli längre, andra kan vara kortare. Försök aldrig fylla ut en sida för att komma till ett visst ordantal eller sidantal.

Typsnitt

Datorn skärm är egentligen ett relativt uselt media att presentera någonting på. Små bokstäver tenderar att bli oläsliga. För att undvika detta skall du undvika allt för små typnitt, och även se till att använda linjära typsnitt som Verdana, Arial eller Helvetica.

All text som är mindre än 14 punkter måste vara linjär (utan "klackar"). För text som är över 14 punkter i storlek kan man använda ett antikva typsnitt, t.ex Georgia eller Times.

Storlekar på typsnitt är ett betydligt mer komplicerat problem än man först tror. Beroende på operativsystem och browser så kan texten bli större eller mindre. Dessutom har browsern oftast en meny för att ändra typsninttsstorlek (i engelsk IE är det View, Text Size). Viss text kan tillåtas ändras, t.ex. brödtexen, medan andra texter inte kan tillåtas ändra i storlek.

Man bör även beakta att alla typsnitt inte finns i alla system. Verdana är t.ex. ett Windows typsnitt, och finns kanske inte i andra system. Genom att ange ett antal likartade typsnitt kan man säkerställa att inte browsern börjar använda ett linjärt typsnitt när man egentligen ville ha en antikva, eller tvärsemot.

Nedan kommer ett antal normala kombinationer som dessutom visas i lite olika storlekar:

Ser du ingen skillnad, så kanske du inte har vissa av dessa typsnitt. Verdana mm. finns att ladda ner gratis från http://www.microsoft.com/typography/fontpack/

Oavsett hur fina typsnitt du har på din dator, kan du inte anta att surfaren, som ser på din sida, har samma typsnitt installerat på sin dator. Om du måste ha ett visst typsnitt för en text, så får du lov att skriva in texten i ett ritprogram för att sedan spara detta som en gif-bild.

Använd CSS för textens formatering

Om du börjar formatera texten på "gammaldags sätt" med <font> taggen, har du mycket svårt att ändra på texterna i efterskott. Du skall helst använda CSS, eftersom en ändring i en länkad CSS fil kommer att påverka samtliga sidor som använder denna. Genom att byta CSS fil kan man ändra stora delar av layouten på sidorna.

Ett argument mot CSS är att det kan vara svårt att hantera alla styles, men en bra webeditor t.ex Dreamweaver, Golive eller FrontPage, har inbyggda funktioner för hantering av CSS filen.

CSS storlekar i olika system

Nedan är en förteckning över typsnittsstorlekar i olika system. Kursiv betyder storlekar som är relativa, och som således påverkas av browserns textstorleksinställningar.

Som du ser är livet inte riktigt enkelt om man vill göra en layout som skall vara samma på alla system.

Ett ytterligare problem är att medan Mac alltid har 72 dpi (punkter per tum), så varierar skärmupplösningen på en PC. En 17" skärm med 1024*768 punkters upplösning har ca 80 dpi, och samma skärm med 1152*864 punkters upplösning har nästan 90 dpi.

På en PC verkar dock pixels vara mest konsekvent mellan NS och IE. Pixels är även Macromedia Dreamweavers rekommendation.

Storleksrekommendationer

Det är svårt att ge någon absolut rekommendation. Dessa sidor har den löpande texten (brödtexten) formaterad som 11 pixels Verdana, och för rubrikerna används 15 pixels Georgia. Drag dina egna slutsater...

Textens bredd

En rad skall inte innehålla mer än 35 till 50 tecken per rad. Översatt till "normala" ord betyder detta 6 till 9 ord. Blir raderna för långa så blir texten mer svårläst. I denna text har jag accepterat lite längre rader och försökt kompensera med en "luftigare" layout som bland annat innefattar ökat radavstånd.

Brödtexten formatering

Om vi inte vidtar åtgärder kommer brödtexten att komma vid vänstra marginalen. Mellan stycken kommer det att komma en tom rad. Detta är standardinställningarna för stycken.

Alla som har lärt sig maskinskrivning har lärt sig att brödtexten skall dras in i förhållande till rubriker. Dessutom måste det inte vara en tom rad mellan styckena. I tidningar används ofta en annan typ av styckesmarkering, där styckena kommer direkt efter varandra, men där första raden är mer indragen än de övriga. För mig som inte kan skriva maskin, men som läser mycket, känns denna formatering mer naturlig. Även denna typ av ändringar kan fixas med CSS.

Några av CSS inställningarna för dessa sidor:

p taggen omsluter stycken och kommer automatiskt när man trycker på enter i en webeditor

p {

font-family: Verdana, Arial,

Helvetica, sans-serif;

font-size: 11px;

line-height: 18px;

text-align: left;

text-indent: 20pt;

padding-right: 14px;

padding-left: 24px;

color: #333333;

margin-top: 0px;

margin-bottom: 0px;

margin-left: 10px;

}

h3 används för rubriker

h3 {

font-family: Georgia, "Times New Roman",

Times, serif;

font-size: 15px;

letter-spacing: 1px;

margin-top: 14pt;

margin-bottom: 4pt;

background-image: url(img/h1.gif);

background-attachment: fixed;

background-repeat: no-repeat;

background-position: left bottom;

margin-left: 0px;

color: #333333

}

img/h1.gif ser ut så här

<p class="firstP"> används för första stycket i en sektion. Vid långa sektioner kan det sättas några extra firstP för att få ett avbrott i textmassan. Används alltid tillsammans med fetstil på de första orden i stycket. Fungerar inte i Netscape 4.7x!

.firstP {

background-attachment: fixed;

background-image: url(img/P.jpg);

background-repeat: no-repeat;

background-position: left top;

}