Experimentera med typsnitt!

I det här inlägget tänker jag prata lite om typografi och då speciellt val av typsnitt. När det gäller trycksaker är vi vana vid att se många olika varianter och ofta kombinerade för att skapa ett personligt uttryck. Webben ligger här en bra bit efter. Se dig omkring när du surfar så inser du snabbt att variationen inte är så stor.

Varför är det då så här?

En ganska stor anledning är de tekniska begränsningarna. För att en webbsida ska visas med det typsnitt som webbdesignern tänkt sig så måste typsnittet vara installerat på användarens dator – i alla fall var det så under ganska många år i webbens barndom. 1996 startade Microsoft ett projekt för att ta fram ett paket med typsnitt för webben som hade hög läsbarhet på skärm och som distribuerades med olika webbläsare och operativsystem.

I det här ursprungliga urvalet webbsäkra typsnitt ingick, och ingår fortfarande: Arial, Times New Roman, Georgia, Verdana, Trebuchet MS, Andale Mono (levereras inte längre med Windows), Courier New, Comic Sans MS, Impact och Webdings.

Vi ser nu allt fler möjligheter att bädda in typsnitt, dels genom att lägga typsnitt på webbservern (förutsatt att man har rättigheter att göra detta), dels genom nya tjänster som exempelvis Typekit (http://typekit.com/).

Men även utan att utnyttja de här nyare möjligheterna så finns det en hel del typsnitt som vi kan kalla “webbsäkra” utöver de ursprungliga tio (nio) och som finns installerade på både Windows och Mac. Vi behöver alltså inte hålla oss till enbart Verdana, Arial och Helvetica på webben utan kan experimentera med ytterligare några typsnitt som med stor sannolikhet finns installerade på användarnas datorer. Jag nämner här några av de 68 typsnitt som Jason Cranford Teague tar upp i sin bok “Fluid Web Typography”. Därmed inte sagt att dessa typsnitt är optimala för läsning på webben…

  • Book Antiqua
  • Bookman Old Style
  • Bradley Hand ITC
  • Calibri
  • Candara
  • Century Gothic
  • Garamond
  • Gill Sans MT
  • Lucida Fax
  • Lucida Sans
  • Palatino Linotype
  • Papyrus
  • Rockwell
  • Tahoma
  • Wide Latin

Exempel på hur de olika typsnitten lagts till på en webbsida: http://www.distans.hkr.se/webbdesign/IM1/css/typefaces.html

Alla de här typsnitten passar inte heller för löpande brödtext men kan användas som ett komplement i exempelvis rubriker. Bara för att man har möjlighet ska man inte drabbas av “sättarglädje”. Experimentera och skapa ett eget uttryck men ha alltid användaren i fokus!

När det gäller skärmläsning kommer vi inte undan det faktum att typsnitt utan seriffer, sans-seriffer, är mer läsvänliga än seriffer. Vi kan också konstatera att typsnitt med mer vertikala och horisontella linjer visas på ett bättre sätt på skärmen än typsnitt med diagonala och rundade linjer- Jämför exempelvis “Bradley Hand” och “Lucida Sans”.

För att lägga till de här typsnitten på webbsidan använder vi CSS, gärna i form av en extern stilmall. Nedan har jag bestämt att alla h1-rubriker ska visas med typsnittet “Book Antiqua” i första hand och om detta inte skulle finnas på besökarens dator så ska datorn välja ett typsnitt med seriffer.

h1{font-family: ”Book Antiqua”, seif;}

I brödtexten, alla p-element, vill jag ha Calibri i första hand, Arial i andra hand och om inte dessa finns så ska det i alla fall vara ett typsnitt utan seriffer.

.p{font-family: Calibri, Verdana, sans-serif;}

När typsnittsnamnet innehåller mer än ett ord, exempelvis Times New Roman, sätter vi dessa inom citattecken i stilmallen; “Times New Roman”, “Book Antiqua”.

 

Begrepp att känna till:

Seriffer – typsnitt med små “fötter” här är Times New Roman ett av de vanligaste.

Sans-seriffer – typsnitt utan “fötter”. Verdana, Arial och Helvetica är vanligt förekommande på webben.

 

Referens:

Cranford Teague, Jason (2010). Fluid Web Typography : a guide. Berkely: New Riders.

One Comment to “Experimentera med typsnitt!”

  1. lisa0026 19 april 2011 at 06:22 #

    Google har några gratis typsnitt för webben också: http://www.google.com/webfonts


Leave a Reply