Meny

Textutformning i en digital miljö

Textens utformning i en digital miljö bör skilja sig från den typiska utformningen i en bok eller tidning. Om du till exempel gör manuell avstavning kan resultatet bli en grafisk katastrof eftersom radlängden kan förändras på grund av skärmstorlek (detta gäller responsiv design och när mått på sidelementet som berörs inte är fixerat).

Undersökningar har visat att vi läser text från skärmen 25 procent långsammare än från en boksida. Nya skärmar med högre upplösningar förbättrar dock hela tiden situationen för textläsning framför skärmen.

Du kan underlätta för besökaren att ta till sig din text på flera sätt, vilket inbegriper rubriker, styckeindelning, typsnitt och färg. Läs mer: Typografi.

Rubriker

Precis som för traditionell textutformning är rubriker en given del av presentationen. Förutom huvudrubrik kan du gärna använda underrubriker. Inom webbdesign finns sex rubriknivåer:

H1 – huvudrubrik
H2-h6 – underrubriker

Huvudrubriken kan betraktas obligatorisk och sedan kan en eller flera underrubriker användas. Ibland används fler än två rubriknivåer, men det är sällan nödvändigt att använda samtliga nivåer ned till h6.

html<h1>Huvudrubrikens text</h1>
<h2>Underrubrikens text</h2>
<h3>Underrubrikens text</h3>

Radavstånd och styckeindelning

När det gäller radavstånd brukar det vara lagom med är ungefär 150 procent (100 % är i stort sett inget radavstånd alls). För anpassning till mobilen kan något mindre radavstånd eventuellt användas. På denna sida är radavstånd för löpande text för stor skärm angivet enligt:

cssp{line-height:160%}

Det allra vanligaste sättet att göra styckeindelningar när man skriver för webben är att använda en tom rad. Det gör bland annat texten lättare att överblicka och det förekommer knappast några extra kostnader för papperstillgång.

Radavståndet kan även behöva justeras för rubriker. När olika skärmar används kan rubriker som ryms på en rad på en större skärm kräva flera rader på en mindre. Radavståndet i rubriken behöver inte vara särskilt stort, men bokstäverna får inte tangera eller överlappa varandra.

Textradens längd

Det finns många diskussioner kring vad som är en lämplig längd på textraden i texter som publiceras på Internet.

Tidigare har angivelser gällt en begränsning till maximalt 50–80 tecken per rad, men den nyare standard som tas efter av många tillåter runt 85–100 tecken per rad (inkl. mellanslag).

Radavbrott med avstavning

I tryckmedia används avstavning flitigt, det sparar papper och skapar jämna sidmarginaler.

I digital textutformning är det inte standard däremot. Det finns inga behov att spara på utrymme.

Vill du ända använda avstavning på webben ska du undvika fallgropen att göra det manuellt. Bortsett från det tidsödande arbetet kommer det sannolikt se illa för en del som läser texten eftersom raderna blir olika långa på olika skärmar. I stället kan du ange avstavning i stilmallen enligt följande:

csshyphens:auto;
-webkit-hyphens:auto;
-moz-hyphens:auto

Använd hela koden då den inkluderar egenskaper för olika webbläsare. "-webkit" gäller bland annat för Chrome och Safari, "-moz" bland annat för Firefox. Det finns även fler så kallade vendor-prefix, men dessa är de som huvudsakligen används.

Typsnitt (font)

Trots förbättrade skärmar anser en del att typsnitt med seriffer bör undvikas i längre texter. Arial är alltså att föredra framför Times New Roman. Ett undantag är typsnittet Georgia som är speciellt framtagen för datorskärmen (vilket för övrigt används för den löpande texten på den här sidan).

När typsnitt anges i stilmallen (css-koden) så anges normalt flera typsnitt, vilket gör att det finns reservalternativ ifall webbläsaren inte hittar förstavalet:

cssfont-family:Georgia,"Times New Roman",Times,serif

Typsnitten har ibland också olika namn beroende på om det är en PC eller Mac. På en Mac heter Arial i stället Helvetica och Verdana heter Geneva medan Georgia har samma namn. Läs mer: Typsnitt och dess användning ...

Tycker du det är tråkigt att använda Arial, Verdana eller Georgia som så många andra gör finns Google Fonts som är ett stort "font-bibliotek" som fungerar med de flesta webbläsare och dessutom är gratis att använda. Tänk annars på att ett typsnitt måste finnas installerat på besökarens dator/surfplatta/mobil för att synas (detta gäller alltså inte Google Fonts som använder ett API).

Textstorlek

En fråga som är extra aktuell på senare tid på grund av de många olika skärmupplösningar som numera existerar är storleken på texten. En tydlig trend är att textens storlek ökar och det är inte längre något konstigt att den vanliga brödtexten (det som ingår i <p> elementet på HTML-språk) är 18 pixlar.

För några år sedan var 12–14 pixlar standard så det har skett en ganska dramatisk utveckling på området. Ett råd är att titta på hur texten ser ut på olika skärmupplösningar och, om du har möjlighet (t.ex. med responsiv design) använd eventuellt olika storlekar beroende på upplösning och skärmstorlek.

Så här kan typsnittets storlek anges i stilmallen antingen med em (emphemeral unit) eller px (pixlar):

cssfont-size:1.2em
font-size:16px

Färg – text och bakgrund

Om vi börjar med bakgrunden är vit den vanligaste färgen. Det ger möjligheter att laborera med olika färguppsättningar för text samtidigt som det blir rent och tydligt. Det går förstås att avvika från regeln, särskilt om det handlar om kortare texter. Handlar det om längre texter bör dock läsbarheten prioriteras framför design.

Vit bakgrund behöver inte anges i stilmallen då det är "default" i alla webbläsare, men eventuellt finns det en ytterligare bakgrund och då kan detta behöva anges:

cssbackground-color:#FFF

Angående textfärg är självfallet en mörk textfärg praxis om ljus bakgrund används. Svart textfärg är dock inte att rekommendera då det blir en något obehaglig kontrast. Använd hellre en mörkgrå färg eller någon annan färg i mörk ton.

I stilmallen kan färg anges med ord eller med hexadecimal färgkod (det senare alternativet har självklart fler färgnyanser som möjligheter):

csscolor:green
color:#009900

Mer läsning

Länkar till andra artiklar.