Hela idén med att få en harmonisk layout är att formen inte ska stå i vägen för läsaren och hindra henne från att konsumera innehållet. I en layout med texten satt i flera olika grader och vikter, kanske med olika typsnitt, i flera spalter och kanske rent av olika spaltbredder är det lätt hänt att det blir rörigt om man inte är noggrann.

För att kunna hantera sättningen så att den blir harmonisk och texten lätt att läsa, finns det några få riktlinjer som man kan hålla sig till för att enkelt få det resultatet. Dels kan man se till att få en jämn kägel mellan olika grader och vikter. Dels kan man använda baslinjelinjering mellan spalter och för bilder som ligger i texten.

Jobbar man med trycksaker är det här väldigt enkelt att göra genom att man använder ett baslinjeraster som man fäster typografimallarna mot, och som man använder när man linjerar och beskär bilder.

På webben finns inte motsvarande funktioner och verktyg, utan man får manuellt räkna fram kägel för olika grader, bestämma storlekar för bilder och se till att spalter är placerade på rätt ställe för att de ska linjera mot varandra.

Använder man ett publiceringsverktyg blir det här något som formgivaren av layoutmallarna måste ta hänsyn till och anpassa för redan innan innehållet är på plats. Publiceringsverktyg som inte automatiskt beskär och placerar ut bilder kan ställa till en del förtret, och då måste användarna läras upp för att själva ta hand om storleksanpassningar och beskärningar.

Oavsett förutsättningarna för implementeringen i det dagliga arbetet så kan man komma väldigt långt med en välstrukturerad typografi för sin sajt.

• I webbläsarna används typhöjden i stället för kägeln i regeln line-height, vilket gör att det är svårt att få baslinjelinjering mellan spalter och texter på sidan.

Typografi på webben är betydligt krångligare än för trycksaker. Det är – när man försöker ta steget över – tydligt att det är tekniker som utformat verktygen åt typograferna och formgivarna. Måttenheter, terminologi, beteende och detaljkontrollen stämmer inte alls med hur det fungerar i layoutprogram eller för den skull i sättmaskiner. Men skam den som ger sig. Med lite tålamod går det att få ett väldigt bra resultat ändå. För det är trots allt resultatet som räknas.

Först och främst måste man vara medveten om att olika webbläsare tolkar och visar layout och typografi en aning olika. Det finns både stora och små skillnader, där de stora främst är mellan äldre och nyare versioner, och där de små är mellan webbläsare och plattformar.

Man måste också vara medveten om att besökarna även kan ändra vissa saker i webbläsarna som gör att skillnaderna mot vad du som formgivare ser och vad de möter är betydligt större än man kan förvänta sig. Användarna har också olika kvalitet och storlek på skärmarna, vilket kan medföra ganska stora skillnader jämfört med vad din dyra, färgkalibrerade 27-tumsskärm visar.

Terminologi & måttenheter

I sidbeskrivningsspråket för webben (css) används en terminologi som skiljer sig en aning från det vi är vana vid i traditionell sättning. Dels är den baserad på engelska, dels på en engelska som inte alltid följer facktermer för typografi. De regler som berör typografin och i viss mån bildsättning är följande:

font-size: Grad
font-variant och font-style: Vikt
font-family: Teckensnitt
line-height: Typhöjd (inte kägeln, vilket man kan tro)
text-align: Justering
text-indent: Indrag
letter-spacing: Spärra/knip
word-spacing: Ordmellanrum
margin: Avstånd före/efter

För måttenheter gäller att man kan välja vilken enhet man vill använda bland alla dem det finns stöd för i webbläsarna. Bland dem finns pixlar, punkter, millimeter och något som kallas för em. Den sistnämnda kan liknas vid artondelssystemet med den typografiska fyrkanten som bas, men det skiljer sig en aning från det.

Först och främst är det ett decimalt mått som är baserat på graden (inte kägeln), och dels likställs 1 em med det hierarkiskt föregående elementets storlek på sidan. Det är alltså relativt till graden på det senast hierarkiskt föregående storleksbestämda textelementet.
Rörigt? Det är bara förnamnet. Graden på texten räknas nämligen som det föregående elementet när man sätter typhöjden (line-height). Vilket innebär att en helt tom sida med en text på får två olika värden på måttet em. Ett för graden, som är relativ till body, och ett för typhöjden som är relativ till graden.

Trots detta kan em vara användbart. Eftersom den är relativ till föregående element kan man konstruera css:en så att typografimallarna fungerar på samma sätt och blir baserade på varandra. Gör man en storleksförändring i ursprungsmallen slår det igenom på samtliga arv, och man bibehåller samma linjering och harmoni rätt igenom en layout trots att man ändrar storleken.

Det enda som riskerar att hamna på sidan av det här är bilder, där de flesta publiceringssystem automatiskt sätter storleken på dem i pixlar. Normalt sett sätter man dem också i skala 1:1 i pixlar, vilket omöjliggör skalbarhet av bilderna. Det finns lösningar för och fördelar med att sätta även bilder så att de blir skalbara, men än så länge är det inte speciellt utbrett på nätet. Med fler högupplösta skärmar, liknande dem i mobiltelefoner som Iphone 4, ute på marknaden så kommer behovet att bli större, och då förmodligen även vanligare, men än så länge är vi inte riktigt där.

Föredrar man att använda pixlar eller punkter som måttenhet går det naturligtvis bra, men man förlorar då möjligheten att typografimallarna kan ärva varandra.

För att göra det ännu mer krångligt så finns det två typer av pixlar i webbdesign. Dels har vi de faktiska pixlarna på skärmen. Vi kan kalla dem de fysiska pixlarna. På en högupplöst skärm som Iphone 4 finns det 640 pixlar i bredd och 960 pixlar i höjd.

Men anger man mått i pixlar i css så används i stället det man kallar css-pixlar. På nämnda ­Iphone 4 finns bara plats för 320 css-pixlar i bredd och 480 css-pixlar i höjd.

Som grädde på moset används ett samplingsvärde för att beräkna hur många pixlar som ska tändas när man anger ett mått i millimeter eller punkter. Det vi kan kalla organiska mått, alltså fasta måttskalor som är baserade på en fysisk måttstandard.

En typografisk punkt (pt) i css beräknas som en sjuttioandradels tum (samma som en postscript-punkt). En tum (in) beräknas som 96 css-pixlar. Alltså blir en typografisk punkt (1∕72) × 96 ≈ 1,333 css-pixlar.

• h1 ⁄  h3 ⁄  h4 ⁄  p ⁄  h2 ⁄  h5 ⁄  h6 ⁄  h6 10/15

Avstavning & marginaljustering

En avgörande skillnad mot annan satt text är att en webbläsare aldrig avstavar. Det finns tankar och utkast på skisser för att lägga till en avstavningsfunktion, men webbläsartillverkarna har inte klarat av att enas om hur man ska göra. Förutom avstavningsordlista måste det gå att styra när en avstavning ska ske beroende på radlängd, typsnitt och textens justering. Där klämmer skon ganska hårt, och frågan ligger väldigt långt ner på prioriteringslistan hos standardorgan som W3C och WHATWG, de som fastställer standarden för webben.

Bland annat på grund av avsaknaden av avstavning blir marginaljusterad text väldigt gles. Webbläsarna spärrar och kniper heller inte marginaljusterad text, utan ändrar bara ordmellanrummen. Så även om funktionen finns i specifikationen
blir resultatet ganska tvivelaktigt.

Låt texten följa baslinjen

Eftersom baselementet på en html-sida är body så kan man använda den för att sätta motsvarande baslinjerastret. Man bestämmer alltså en grad, kägel och ett bastypsnitt för sidan som alla andra texter och storlekar kommer att utgå från.

Enklast blir det om man använder brödtexten som bas, och sätter body-typografin att motsvara just brödtexten.

I det här exemplet sätter vi brödtexten till Helvetica 12/18 pixlar. Om då en rubrik ska vara betydligt större så måste man se upp så att inte kägeln hamnar ur fas. Vill man göra rubriken tre gånger större än brödtexten kan man sätta graden (font-size) till 3 em. Typhöjden på rubriken blir sedan relativ till graden på densamma, och påverkar kägeln. Så för att få en rubrik satt i 36/36 blir regeln font-size: 3em; line-heigt: 1em; i css:en.

Både grad och kägel måste vara jämt delbar med grundstorleken för att linjeringen ska fungera. Eftersom line-height styr typhöjden och inte kägeln innebär det att texten linjeras vertikalt inom den yta man satt i regeln, och baslinjen rör sig därför på ett ganska oförutsägbart sätt. Här gäller det att ha tungan rätt i mun och anpassa positionen av baslinjen med marginalerna för elementet. I vissa fall både negativa och positiva marginaler för att få baslinjen att placera sig på rätt höjd.

• Bakgrundsbild med baslinje för att lättare kunna måtta textens grad och typhöjd under layoutarbetet. Här 18 pixlar hög med baslinjen placerad på 13 pixlars höjd.

Detsamma gäller för avstånd före och efter texten. Vi vill ha en blankrad, alltså 18 pixlar, efter rubriken så att det blir lite luft. För att få rätt mått måste vi dela baslinjerastrets avstånd i graden för att få måttet i em. Det blir alltså 18∕36 = 0,5 em. Regeln blir då margin-bottom: 0.5em; (observera att punkt används som decimalavskiljare).

På det här sättet kan man bygga upp en layout som är baserad på en baslinjelinjering. En bra idé är att lägga en bakgrundsbild med baslinjen under tiden man arbetar med layouten. Då blir det lättare att se att texten verkligen fäster mot baslinjen.

I exemplet ovan används en bild som är 18 pixlar hög – samma som radavståndet – med baslinjen placerad 13 pixlar från överkant. Eftersom baslinjens höjd kan variera mellan olika typsnitt så får man kompensera det med negativa marginaler, eller innermarginaler (padding) i CSS-reglerna för de taggarna.

Att arbeta med typografi på webben är, trots mödan, värt att lägga tid på. Resultatet lyfter sajten väsentligt, och i kombination med länkade typsnitt går det att komma väldigt långt. Just för webben gäller det att förstå hur det fungerar, eller inte fungerar, för att kunna komma till ett bra slutresultat.