Webbƒonter

Det är inte alltid så lätt att hitta webbfonter som ser lika bra ut i olika webbläsare och operativsystem. När man vill specifcera typsnitt för text på en webbsida så måste man tänka på att de typsnitt man vill ha måste finnas hos klientdatorn. Därför brukar man specificera en komma separerad [,] lista med typsnitt där webbläsaren väljer det första från vänster som matchar något som finns i den egna datorn. Det bästa är att surfa runt och leta efter sidor man gillar och bokmärka dessa. Efter det så ska man kolla på dessa sidor i olika webbläsare och i olika datorer med olika operativsystem för att se eventuella skillnader. En annan sak som påverkar utseendet är hur operativsystemet hanterar kantutjämning (om det gör det alls). Det är också bra att använda sig av utvecklingsverktyg i webbläsaren, t.ex. Firebug-tillägget i Firefox. Med den kan man få reda på mycket hur stylesheets är skrivna, uppritad fontstorlek, mm.

Den självklara fördelen med text i webbdokument är att den är sökbar och kan indexeras av sökmotorer. Nackdelar (ur designsynpunkt) är att den är skalbar. Detta betyder att klienten fullkomligt kan förstöra webbdesignerns intentioner med utseendet. (Vissa försöker undvika detta genom att skapa bilder av texten, som jag tycker är fullkommligt förkastligt. Det är bättre är att använda sig av CSS.) Numera är dom flesta webbläsare lite smartare i skalning av innehåll och låter hela layouten hänga med, inklusive bilder. Fonter (som är vektorer, inte pixlar) kan skalas hur stort som helst. Testa själv genom att köra kommandot [ctrl] + [+] eller [-] för att ändra fontstorleken. För att återställa förstoring/ förminskning kör [ctrl] + [0] (siffran 0).

(Om du kör Mac så byt ut [ctrl] mot [äpple eller kringla])

Testa typsnitt

12 typnitt (se CSS längst ner på sidan). Notera att olika typsnitt gör sig olika bra beroende på storlek, även här spelar operativsystem in. Klicka på knapparna för att ändra storlek.

Century Gothic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mattis egestas risus, vel molestie mi bibendum non. Morbi luctus arcu faucibus tortor congue tempus. Nam consequat ultricies sollicitudin. Fusce a est purus. Vestibulum purus dolor, sodales id dapibus nec, volutpat vitae nunc. Praesent erat lorem, lacinia eu auctor quis, mattis et velit. Mauris facilisis, enim ut luctus euismod, sem felis facilisis metus, vitae elementum magna turpis consectetur quam. Praesent nec magna risus. Cras in eros urna, et cursus justo. Nullam tempus commodo dolor, non pretium lorem vehicula eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi posuere, metus sed ultricies fermentum, diam neque vulputate nisl, quis cursus sapien nunc elementum elit. Curabitur tincidunt velit non tortor ultrices condimentum.

Palatino Linotype

Copperplate Gothic Light

Lucida Console

Gill Sans

Trebuchet MS

Georgia

Verdana

Lucida Sans Unicod

Tahoma

Helvetica / Arial

Times

Stilmall för ovanstående fonter

/* Century Gothic */
.CenturyGothic {
font-family: "Century Gothic", sans-serif;
}
/* Palatino Linotype */		
.PalatinoLinotype {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
/* Copperplate Gothic Light */
.CopperplateGothicLight {
font-family: "Palatino Copperplate", "Copperplate Gothic Light", sans-serif;
}
/* Lucida Console */	
.LucidaConsole {
font-family: "Lucida Console", Monaco, monospace;
}
/* Gill Sans */
.GillSans {
font-family: "Gill Sans", "Gill Sans MT", sans-serif;
}
/* Trebuchet MS */
.TrebuchetMS {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
/* Georgia */
.Georgia {
font-family: Georgia, Serif;
}
/* Verdana */
.Verdana {
font-family: Verdana, Geneva, sans-serif;
}
/* Lucida Sans Unicode */
.LucidaSansUnicod {
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}
/* Tahoma */
.Tahoma {
font-family: Tahoma, Geneva, sans-serif;
}
/* Helvetica */
.Helvetica {
font-family: Helvetica,Arial,sans-serif;
}
/* Times */
.Times {
font-family: "Times New Roman", Times, serif;
}

Länkar

Pixlar, procent, em eller punkter?
http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Fördelen med pixlar
http://css-tricks.com/css-font-size/

W3c rekomendationer
http://www.w3.org/QA/Tips/font-size

Författat av Hans E Andersson 2010-12-06

"Webbfonter", Hans E Andersson: 2010-12-06 10:41:04, ändrad: 2012-10-05 12:58:50