Typografin till exempel. Nog har vi lärt oss att antikvor som Garamond och Baskerville ger vackra och lättlästa texter och att linjärer som Franklin Gothic och Gill Sans är bra i rubriker. Att Sabon är en tålig arbetshäst och Frutiger aldrig fel. Men att Times och Helvetica är fel och ute. Och att kerning är viktig för att en text ska vara tilltalande och lättläst. Att stycken i löptext ska markeras genom indrag på första raden.

Glöm allt det där. Indrag är fel och blankrad är rätt. På webben är linjärer utmärkta i brödtext och antikvor bäst i stora rubriker. Och det är inte kerning som gäller, utan samma teckenmellanrum mellan alla tecken. Och Sabon, Gill Sans och andra favoriter betyder problem eller ingenting alls. Det är Times och Helvetica som gäller och resten kan man rensa ut från typsnittskatalogen. Allt blir så mycket enklare och så mycket svårare.

Antikva får motsatt effekt

I allmänhet anser vi nog att antikvor i allmänhet och renässansantikvor i synnerhet är bäst för löpande text, i såväl böcker som tidningar. Variationerna mellan tunna och breda streck skapar en vacker textbild med god teckenigenkänning och serifferna binder samman tecknen till ordbilder. Den diagonala betoningen, som hämtar sitt ursprung i pennans rörelse i de handskrivna förebilderna för dessa tecken, skapar en rörelse i textraderna.

I brödtext på bildskärm slår dessa goda egenskaper över i sin motsats, när det gäller textgrader från 14 punkter och nedåt. Variationen mellan tunna och breda linjer går förlorad, så att tecknen ser ut som dåligt formgivna linjärer. Seriffer och andra finesser blir fula klumpar av pixlar. Typsnittet blir både fult och svårläst.

Bild 2: Garamond och Baskerville skärmdump. "Antikva.gif"

Och det är acceptabelt så länge bildskärmen används för sitt ursprungliga syfte, att skriva in text och komponera trycksidor. Men på webb och i multimedia används bildskärmen som exponeringsenhet, och WYSIWYG (What You See Is What You Get) har fått en ny och verklig innebörd.

Däremot fungerar antikvor mycket bra i stora rubriker. Här återges det fina linjespelet och utmejslade detaljer på ett sätt som är jämförbart eller t.o.m. bättre än trycket.

BigCaslon kantutjämnad

Fina linjärer blir fula

Linjärer fungerar i allmänhet bättre som brödtypsnitt på bildskärm, eftersom de har en enklare formgivning. Alla linjer är i princip lika tjocka, även i trycket och små seriffer och andra detaljer är avskalade. Dessa tecken kan lättare anpassas till bildskärmens fyrkantiga pixelmatris.

Men säg den glädje som är beständig. Linjärer som är vackra och läsbara i tryck framträder ofta som ett otillgängligt gytter av linjer på bildskärmen. Teckenformerna kan i och för sig vara tydliga, men de skiljer sig avsevärt från trycket och teckenmellanrummen tycks leva sitt eget liv. Det blir gluggar mellan tecknen i orden och krockar mellan orden, som gör texten ordentligt svårläst.

Felriktade

Feltillriktade skärmfonter

Men de typsnitt som hör till operativsystemet och som man skyr som pesten i sina tryckta produkter, fungerar bra eller i alla fall bättre på bildskärm, av det enkla skälet att de producerats just för detta syfte.

Geneva med bättre tillriktning

Krav på god skärmfont

För skärmfonter är helt andra egenskaper avgörande för skönhet och läsbarhet än för tryckta tecken. Enkelhet i form och balanserade mellanrum är viktigast.

Teckenmellanrum

Ett grundläggande krav för god läsbarhet på bildskärm är ett stort och jämnt teckenmellanrum, som ska vara lika stort mellan alla tecken och lite bredare än vad som krävs i tryckt text. Medan tecken i tryckt text kernas, alltså ges individuella justeringar för att det ska bli ett likartat teckenmellanrum, måste man på bildskärm uppnå samma sak genom att inte skapa individuella anpassningar. Teckenmellanrummen måste också vara större, så att man kan särskilja enstaka tecken. Tecknen får inte krocka med varandra.

Ordmellanrum

Ordmellanrummen blir också känsligare på bildskärm, där de måste vara större än i tryck. De måsta vara balanserade gentemot teckenmellanrummen, så att man tydligt ser skillnad mellan ord och tecken.

Radavstånd

Radavstånd behöver inte vara större än i tryck, men måste även de balanseras rätt för att tecken och ord ska särskiljas. I tryck kan man ha liten grad och ganska stort radavstånd, men på bildskärm måste man ha ganska stor grad och lagom tätt mellan raderna. Alltså så mycket luft att raden skiljs ut som ett objekt, men inte så mycket att raderna spretar iväg. En tumregel kan vara att radavståndet optiskt sett är större än ordmellanrummen. Observera att Times New Roman för Windows som enda typsnitt har ett inbyggt korrekt radavstånd.

Balans inom och mellan tecken

De ljusrum som finns inom tecknen måste vara större och harmoniskt avstämda mot de ljusrum som finns mellan ord och tecken. Ljusrummen inom tecknen måste vara större än i tryckt text för att teckenformerna ska framträda, och lite större än teckenmellanrummen för att skapa ordbilder.

Enkla och öppna teckenformer

Teckenformerna bör vara enkla, öppna och rätlinjiga med tydliga ljusrum. De måste dessutom konstrueras med individuella egenskaper så att de kan särskiljas när de ställs samman, t.ex. så att r och n inte läses som m och att en etta inte läses som ett gement l. Helt rätlinjiga teckenformer kan fungera utmärkt i små grader, men kan leda till monotoni, som måste brytas med rundningar.

Hintningen

Slutligen är hintningen avgörande för att dessa goda egenskaper ska förverkligas på bildskärmen. Med hintning avses anpassningar av teckenformen till bildskärmens punktmatris, vilket egentligen kräver särskilda instruktioner för varje enskilt tecken och varje teckenstorlek.

Geneva

Georgia

Textexempel på bra skärmfonter, dock inte bra radavstånd.

Det är bildskärmens fel

Den personlighetsförändring som många fina typsnitt genomgår när de uppenbarar sig på bildskärm beror givetvis på bildskärmens låga upplösning.

Dessa typsnitt har ju konstruerats för utskrift på fotosättare med 1200 dpi eller laserskrivare på 600 dpi, alltså i upplösningar c:a 16 eller 8 gånger större än bildskärmens.

Bildskärmen har en upplösning på 72 dpi (dots per inch) eller 72 ppi (pixels per inch) alltså 72 pixlar eller bildskärmspunkter per tum.

Denna upplösning räcker inte till för att återge tecknens detaljer. Medan ett gement "a" kanske har 35-40 pixlar att tillgå på bildskärmen har samma tecken c:a 600 eller 300 bildpunkter till sitt förfogande i utskrifter. Det betyder inte bara att detaljer försvinner eller vanställs. Det påverkar också teckenbredd och teckenmellanrum.

a i pixelmatris, som visar variation i teckenkontur och enformighet i skärmfont.

Detta förklarar grundproblematiken med den ojämna tillriktningen på bildskärm. Återgivningen av trycktypsnitt på bildskärm avser främst att visa hur texten disponeras i tryck. Att tecknens utseende skiljer sig betänkligt från de tryckta tecknen är av mindre betydelse, så länge de kan läsas och ge en bild av hur texten disponeras i utskrift.

Teckenmellanrummen följer således de inställningar som är relevanta för den högre upplösningen, vilket innebär att det blir gluggar och krockar på bildskärmen. I vissa fall trängs teckenpar ihop, i andra fall blir de utspärrade. En orsak är att tecknen får andra bredder på bildskärmen än i tryck, en annan att bildskärmen inte kan återge de förfinade teckenmellanrum som utskriften kan.

Av samma skäl är PostScript-typsnittens radavstånd för små på bildskärm. Själva fonten har minimala radavstånd, som ska justeras i layout-programmen när sidorna komponeras. Om typsnittet används utan sådan justering sitter man med en oslipad diamant.

På natten är alla katter grå

Samtidigt som skärmfonterna avviker betydligt från den tryckta teckenformen, kan enstaka tecken vara identiska i fonter som skiljer sig mycket som trycktyper. Detta gäller t.ex. gemena m och n. Dessa tecken kan nämligen inte konstrueras på så många olika sätt med det lilla utrymme som står till buds

n i teckenkontur och skärmfont, som är identisk trots variationer i teckenform

Bättre och sämre trycktypsnitt

Det finns grader även i helvetet. Vissa trycktypsnitt har bättre skärmåtergivning än andra, men grundproblematiken finns med alla Type1-typsnitt, eftersom de främst utformats för tryck.

I nästa artikel ska vi se närmare på de lösningar Adobe tillhandahåller i form av webbversioner av några populära trycktypsnitt.

Skärmtypsnitt bäst

Det är ju inte någon större överraskning att typsnitt som konstruerats för skärmpublicering också är bäst på detta. I första hand gäller det typsnitt som levereras med operativsystemen. På Mac är det Geneva och Helvetica bland linjärer, och New York och Times för antikvor. I Windows har det sedan gammalt varit Arial och Times New Roman. Men nu finns dessutom Verdana och Georgia, som vi ska skärskåda i nästa artikel.

Hints och TrueType

Det finns två sätt att exponera tecken på bildskärmen: genom speciella punktuppbyggda skärmfonter, så kallade bitmaps, eller genom rastrering av konturtecken.

Adobes Type1-typsnitt använde länge bitmap-fonter, som var avpassade till bildskärmens upplösning för att ge bra teckenåtergivning. Dessa handgjorda punktuppbyggda tecken gjordes lite olika beroende på teckenstorlek, för att passa in i skärmens punktmatris. De går inte att zooma, utan att bli taggiga, eftersom de är fixerade till vissa punkter. Macens skärmtypsnitt Geneva och New York, har också varit av detta format. När man skriver ut texten ersätts Geneva med Helvetica och NewYork med Times, som finns installerade i skrivaren.

Rastreringstekniken innebär att man utgår från typsnittets teckenkonturer och använder samma teknik för visning på bildskärm som vid utskrift.

Både TrueType och Postscript är konturteckenformat, där tecknen är beskrivna med konturlinjer, eller egentligen matematiskt beskrivna med vektorer. Därmed kan de förstoras och manipuleras utan att förlora kvalitet.

När teckenkonturerna exponeras på skrivare eller bildskärm omvandlas konturerna till en yta fylld av bildpunkter. Detta sköts av en rastrerare, en RasteringImageProcessor (RIP). Eftersom teckenkonturerna är skalbara blir också skärmtypsnitten skalbara, de får en jämn kontur, de kan zoomas etc.

ATM är Adobes rastrerare för bildskärmsvisning av Type1-typsnitt. För TrueType-typsnitten har Apple och Microsoft byggt in rastreraren i operativsystemen för Macintosh och Windows.

Men rastreringen ger ett annat problem: hur ska teckenkonturen översättas till bildpunkter om konturen skär mellan två pixlar, eller på något annat sätt misspassar bildskärmens punktmatris. Detta är kärnfrågan i bildskärmstypsnittens problematik.

Lösningen heter hintning: instruktioner hur den förfinade teckenkonturen ska återges när upplösningen inte räcker till.

Ursprungligen utvecklades tekniken för att anpassa Type1-typsnitten i små grader till laserskrivare med 300 dpi. ATM använder nu tekniken för rastrering till bildskärmen. Resultatet är som bekant inte alltid lysande.

Det beror bl.a. på att ATM:s hintning ligger utanför fonten och sköter anpassningen till bildskärm genom generella instruktioner.

ATM:s hints ska garantera att tecknen liknar teckenkonturen så mycket det är möjligt i denna svåra miljö, men den innehåller inga garantier att anpassningen ger vackra och lättlästa tecken. Ur Adobes perspektiv har den aspekten varit av underordnad betydelse, eftersom man haft den grafiska branschen som målgrupp där avstämning mot utskrift varit det centrala.

I senare versioner av ATM finns kantutjämning, vilket ökar likhet med trycktypsnittet, men inte nödvändigtvis ökar läsbarheten, eftersom tecknen blir gråsuddiga.

TrueType

TrueType-typsnittens rastreringsteknik lyckas dock bättre med läsbara bildskärmstypsnitt.

TrueType-formatet utvecklades av Apple, för att komma ifrån de dyra licensavgifter man måste betala till Adobe för att använda deras Typ1-teknologi på macens operativsystem. Snart tog Microsoft upp TrueType och utvecklade den för standardtypsnitten i Windows. Medan Adobe satsade på tryck och den grafiska branschen, satsade Microsoft på kontorsvärlden med goda typsnitt för laserutskrifter och läsning på bildskärm.

TrueType var från början tänkt för bildskärmstypsnitt och utskrift på kontorsskrivare, så här har Microsoft lagt sig vinn om kvalificerad hintning. Det är denna funktion som nu kommer så väl till pass och ger TrueType ett försteg inom bildskärmstypografi i allmänhet och webbtypografi i synnerhet.

En poäng är att hint-instruktionerna i True-Type-typsnitten ligger i själva fonten och i detalj kan styra varje teckens anpassning. Det ger formgivaren samma kontroll som när man bygger punktuppbyggda tecken, men här är det snarare programmering än handarbete som utför jobbet. Det betyder att hints kan ge ett TrueType-tecken olika utseende i olika grader, för att optimera läsbarheten. Hints kan också styra teckenmellanrummet, avpassat för olika teckenstorlekar.

TrueType-hintningen förenar kort sagt fördelarna med bitmap-fonternas individuella skärmanpassning med ATM:s skalbarhet och PostScript-typsnittens höga upplösning i utskrift.

Hintat och ohintat M

Fontnedskärning på webben

Det är inte så kul, men det fungerar. Bildskärmspublicering beskär utbudet av användbara typsnitt rätt ordentligt, och webbpublicering driver fontnedskärningen till existensminimum. De enda säkra typsnitten är de som följer med operativsystemen och som därmed finns på allas datorer. Det blir times New Roman och Arial för Windows, respektive Times och Helvetica på Mac. Vi är tillbaks till 1985 års basutbud, som om ingenting hänt på fontfronten under desktoprevolutionen.

Det finns många lösningar på problemet, men endast en tycks ha slagit igenom, och den är gratis.

En lösning som inte slagit igenom är att fonter eller delar av fontuppsättningar kan bäddas in i webbdokument och laddas i mottagarens dator, medan man läser en webbsida. Det finns flera sådana lösningar, men de bromsas av säkerhetsaspekter: fontproducenter räds risken att nån stjäl ett nedladdat typsnitt. Frågan tycks dock vara ganska akademisk, så länge det inte finns så många typsnitt som värda att bädda in och ta emot. Om det handlar om häftiga display-fonter är gif-bilder ett fungerande alternativ.

En annan lösning är att gratis tillhandahålla bra typsnitt, som man levererar med operativsystem och programvara så att de får en bred spridning, som alla andra användare vill hämta hem och installera på sina datorer. Sådana typsnitt kan laddas ned från Microsoft, de levereras med Apples och Microsofts operativsystem och med Adobes ATM. Det tycks snarare vara nedladdning än inbäddning som är svaret på webbens typografiska begränsningar.

Kantutjämning

Ett sätt att komma runt problemet med det begränsade urvalet av typsnitt på webben, är att hålla fast vid sina favorittypsnitt och omvandla texten till gif-bilder med kantutjämnad text. Det är särskilt vanligt i fråga om knappar och rubriker, men förekommer också i ingresser. Det är fel redan från början och resultatet blir inte bra.

I små grader fungerar nämligen inte kantutjämningen . Den ska ju skapa en tonad övergång vid tecknets ytterkanter ut mot den bakomliggande ytan. I små grader finns det helt enkelt för lite pixlar att tillgå för toningen, så det blir grundstrecken, alltså hela tecknet, som jämnas ut, eller snarare smetas till.

Resultatet är suddiga och disiga tecken, som ibland är mycket svårlästa. Dessutom återger inte heller denna teknik de egenskaper som man åtrår i de trycktypsnitt som man vill använda.

Har man dessutom skapat gif-bilderna mot en annan bakgrundsfärg än de sedan används mot på bildskärmen, så har man riktigt ställt till det för sig.

Det kan vara bättre att skapa knapptexter med icke-kantutjämnad text, där man använder skärmtypsnitt som är tydliga och lättlästa. Genom att låsa texten i gif-bilder garanterar man att dessa navigationsinstrument verkligen visas lika på alla datorer i alla miljöer.

Kantutjämning skapar sudd i små grader

Däremot fungerar kantutjämningen alldeles utmärkt för text i stor grad, för rubriker och logotyper, alltså från 18 pt och uppåt. Här ger kantutjämningen en lyster och skönhet som inte bara återger typsnittets egentliga egenskaper utan till och med överträffar den tryckta motsvarigheten. I dessa sammanhang bör man använda kantutjämning.

PhotoShop gillar inte Truetype

PhotoShop hanterar typsnitten lite olika om man väljer kantutjämning eller om man väljer bort kantutjämning. Utan kantutjämning återges skärmfontens bitmap-tecken men missar dess tillriktning eller hints. Detta är särskilt besvärande för TrueType-typsnitt. Teckenkombinationer som återges utmärkt i t.ex. Word blir här hopklumpade eller spärrade, och det är ett tidsödande elände att rikta till dem manuellt.

Vid kantutjämning utgår PhotoShop från teckenkonturen och kan dessutom skapa bättre teckenmellanrum. De kantutjämnade tecknen kan därför dramatiskt skilja sig från icke kantutjämnade. Men tillriktningen blir ändå inte riktigt bra. PhotoShop tillgodogör sig inte riktigt den hint-information som finns i TrueType-fonten, utan man får manuellt justera teckenmellanrummen.

Photoshops hantering av icke kantutjämnad text: högst upp kantutjämning med god tillriktning, i mitten icke kantutjämnad med Photoshops misslyckade tillriktning, underst skärmdump från webbläsare

Om man vill ta fram icke kantutjämnade gif-texter sker det faktiskt snabbast och säkrast genom att skriva texten i en webbeditor, visa den via en webbläsare, göra skärmdump och ta in texten som bilder i PhotoShop för vidare bearbetning.

Webbens utmaning

Mycket av problemen med typografi på webben beror på att vi sitter fast i typografiska koncept som utvecklats för pappersburen publicering och att vi nödvändigt vill applicera dem på bildskärm och på webben, som har helt andra begränsningar och möjligheter. På sätt och vis är vi tillbaks vid 1450-talet, när boktryckarkonsten skapade nya förutsättningar för distribution av information. Trycket imiterade handskriften så långt det gick i 100 år, och gick sedan sin egen väg. Så kommer webbtypografin också att göra, men det tar snarare 2 än 100 år.

Det är mer konstruktivt att utgå från detta dynamiska mediums möjligheter än att försöka kringgå dess begränsningar. Låt oss se på några heliga kor som redan offrats.

Blankrad eller indrag

I tryckt löptext brukar man ha indrag i första raden på alla stycken utom första stycket efter en rubrik. Dagstidningar har ibland frångått denna regel och har indrag överallt, för att kunna ta bort stycken och infoga rubriker där det passar. Syftet med indrag istället för blankrad är att spara utrymme och papperskostnader, men ändå ange att ett nytt stycke börjar. Blankrad mellan stycken hackar dessutom upp texten och gör den trög och tungläst. Blankrad sparar man för större avskiljningar mellan huvudavdelningar och dylikt.

På webben kan man också skapa indrag, t.ex. genom hårt mellanslag eller via stilmallar (CSS, Cascading StyleSheets). Det är inte där problemet ligger. Medan indraget skapar sammanhang och läsbarhet i tryck, ger det tunga svåröverskådliga textmassor på bildskärm. Här fungerar faktiskt blankraden bättre som avskiljare mellan stycken, eftersom korta texter är lättare att ta till sig än långa. På bildskärm är det en fördel med upphackad text. Här medför de många blankraderna inte heller några utrymmeskostnader.

Oavsett vinster i läsbarhet med blankrad som styckeavskiljare, tenderar det att bli en kutym för texthantering på webben, eftersom man kanske klistrar in dokument formgivna i ordbehandlingsprogram, där man har styckebrytning som avslut på ett stycke, vilket alltså blir som skapar blankrad i html. Samma effekt nås om man skriver in texten i en webbeditor.

Givetvis kan man även här ha stilmallar, men det är mycket krångligare att märka förstastycke, än att acceptera blankrad som styckemarkering. (Det finns en lösning i CSS med automatiskt förstaradsindrag på alla stycken utom första stycket, med det stöds inte av tillräckligt många webbläsare. Dessutom behövs inte denna funktion.)

På detta sätt skapas inom webbtypografi en förenklad typografisk standard, som i många avseenden tillmötesgår krav på läsbarhet på bildskärm. I andra fall ställer de högre krav på läsaren, men är ändå acceptabla därför att de ur produktionsteknisk synpunkt är de mest rimliga, som blir de-facto-standard på nätet.

Svävande rubriker

En gammal god och viktig typografisk regel är att mellanrubriker ska ansluta till den text den rubricerar, alltså ha mer luft ovanför sig än den har till sin text. Om det är lika mycket luft ovanför och under rubriken ser den ut att sväva fritt som ett eget objekt på sidan. I desktop-program har man sedan länge kunnat styra sådant genom typografimallar. Att lägga ned lite möda på sådana lösningar är meningsfullt i text som på detta sätt formges för tryckning eller utskrift.

Denna regel kan man och bör man tillämpa också på webbsidor, för att göra texten mer tillgänglig för läsaren.

Svävande, anliggande och ansluten rubrik.

Modellen med svävande rubriker används på sidor där man, som sig bör, har blankrad mellan stycken, medan texter med förstaradsindrag på nya stycken i allmänhet får direkt anliggande mellanrubrik.

Dessbättre är detta numer historia. Om man använder formatmallar (CSS) är situationen densamma som inom tryckt typografi: nu kan vi skapa precis de radavstånd vi vill mellan rubrik och text genom att ange margin-top och margin-bottom i elementets typografi.

Om man manuellt typograferar texten är det krångligare. Funktionen som sådan ingår inte i html-koden, utan får uppnås genom kombinationer av styckebrytning och radbrytning . Det går bra i texter som inte ändras ofta, och om man kan fastställa sådana lösningar som en standard inom en organisation. I praktiken brukar det inte bli så. Tvärtom är texter på webben ofta utsatta för uppdateringar, det är ju en av poängerna. Och ofta kan det vara olika personer som gör grundtexten och som uppdaterar den. Resultatet blir snart att vissa rubriker ansluter och andra svävar, eftersom man inte håller koll på med vilka / kombinationer man ökar luft och ansluter.

Summa summarum tenderar denna regel att av praktiska skäl bli obsolet (föråldrad) på webben. Formgivaren lastar över arbetet på läsaren att begripa att en rubrik hör till följande stycke.

Utmärkning

Nya typsnitt

På likartat sätt utvecklas nya typsnitt som utgår från bildskärmspublicering och webben. Kraven är här att typsnitten ska hålla de goda egenskaper vi tidigare har pekat på, och dessutom kunna vara tillgängliga på alla datorer. Times och Helvetica klarar det senare kravet, men når inte riktigt fram till det första. Det gör däremot typsnitten Verdana och Georgia, som ska vi titta närmare på i nästa artikel.

< - - - Sidan uppdaterad 011010 - - - >