Textutformning i en digital miljö
Textframställning i en digital miljö bör skilja sig från 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 % långsammare än från en boksida. Nya skärmar med högre upplösning 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 % (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 klart vanligaste sättet att göra styckeindelningar när man skriver för webben är att använda en tom rad. Det gör 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. Samma rubrik som ryms på en rad på en större skärm kan kräva flera rader på en mindre. Radavståndet i rubriken behöver inte vara särskilt stort, men bokstäverna får inte överlappa eller tangera 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 ändå 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 kan bli 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 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 framtaget 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
Typsnittens namn kan skilja sig beroende på om det är en PC eller Mac. På en Mac är Helvetica motsvarigheten till Arial och Geneva motsvarigheten till Verdana 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å grund av de många 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ända 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.