Image may be NSFW.
Clik here to view.
Linjering av text över spalter, och mellan olika grader är viktigt för att få en lättläst och harmonisk layout. Det här är väl beprövat för trycksaker, och framför allt i tidningsproduktion. Tyvärr har webben inte lika enkla typografiska hjälpmedel som layoutprogrammen erbjuder. Trots det går det att komma långt med de medel som finns till hands.
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.
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. De använder också olika kvalitet och storlek på skärmarna, vilket också kan medföra ganska stora skillnader mot vad din dyra, färgkalibrerade 27-tumsskärm visar.
Avstavning och 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 är väldigt långt ned på prioriteringslistan hos standardorgan som W3C och WHATWG, som är 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.
Terminologi och måttenheter
I sidbeskrivningsspråket för webben (CSS) används en terminologi som skiljer sig en aning från det vi är van vid från traditionell sättning. Dels är den baserad på engelska, men också 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– Gradfont-variantochfont-style– Viktfont-family– Teckensnittline-height– Typhöjd (inte kägeln, vilket man kan tro)text-align– Justeringtext-indent– Indragletter-spacing– Spärra/knipword-spacing– Ordmellanrummargin– Avstånd före/efter
För måttenheter gäller att man kan välja vilken enhet man vill använda bland alla de som 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 typografiska fyrkanten som bas, men skiljer sig en aning. 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 till 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.
Image may be NSFW.
Clik here to view.
Rörigt? 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 typografimallar baserade på varandra. Gör man en storleksförändring i ursprungsmallen så 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 de 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 till att typografimallarna kan ärva varandra.
För att göra det ännu mer krångligt så finns det två typer av pixlar som man talar om i webbdesign. Dels har vi de faktiska pixlarna på skärmen. Vi kan kalla dem de fysiska på 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 istä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 baserad på en fysisk måttstandard.
En typografisk punkt (pt) i CSS beräknas som en 72:a-dels 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.
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.
Detsamma gäller för avstånd före och efter texten. För rubriken vill vi 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 punkt som decimalavskiljare).
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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 kan man komma väldigt långt. Just för webben gäller det att man förstår hur det fungerar, eller inte fungerar, för att kunna komma till ett bra slutresultat.
Image may be NSFW.Clik here to view.
