Styrning av teckensnitt

Obs!
Alla exempel öppnas i ett nytt fönster!

1. Allmänt om fontmallar

Den här sidan tar upp delar av det som finns i specifikationens femtonde kapitel. Jag utelämnar vissa detaljer som jag inte tycker är så viktiga. Den som vill får gärna gräva ner sig i de 40 sidorna, som kapitlet omfattar. Där beskrivs sådant som hur man anpassar en font efter UMTS och PostScript, för att ta två exempel.

Känner du dig osäker på terminologin för teckensnitt kan du läsa mer på min sida om teckensnitt >>

Alla som försökt specificera en viss font vet hur svårt det är. Webbläsarna tolkar koden olika och bara en sån sak som teckensnittens olika namn är svåra att få rätt. Ta t.ex "BT Swiss 721 Heavy Italic", som exemplifieras i specifikationen. I den fortsatta texten får du veta mer om liknande problem för stilmallskodaren.

Eftersom det inte finns något enhetligt system för att benämna olika teckensnitt och deras varianter, finns det många små tuvor att snava över. I ett svenskt teckensnitt heter det inte italic utan kursiv. Andra benämningar på samma sak är oblique, slanted, incline och cursive. Likadant är det med feta och andra varianter!

Vill man använda speciella teckensnitt, bör man alltså ange alternativa stavningar och vara beredd på att det inte kommer att fungera till 100%. Om man nu alls skall försöka bestämma teckensnitten med stilmallar. Verdana, Trebuchet, Arial och Helvetica duger gott för brödtext och rubriker, medan mer speciella teckensnitt enklast görs om till GIF-filer.

Den som vill styra teckensnittet bör dessutom undvika att ange varianter av ett teckensnitt. Vill man ha Arial Black skall man inte skriva:

BODY { font-family: Arial Black }

utan hellre så här:

BODY { font-family: Arial; font-weight: bold; }

Varför då? Jo, alla har Arial installerad, men alla har inte varianten Arial Black. Och skillnaden mellan Arial Black och den inställning vi gjorde i stilmallen är inte särskilt stor.

Kolla hur de ser ut i praktiken >>

2. Font specification

För att specificera en font finns sex olika egenskaper, som jag skall visa i den här sektionen. Jag börjar med det allmänna:

font-family

H1.special { font-family: Sand, "Comic Sans", sans-serif }

Här anger vi Sand som första alternativ för specialrubriken. Saknas detta teckensnitt skall webbläsaren använda Comic Sans, som man garanterat har - såvida man inte tagit bort det, förstås. Som du ser skriver man dubbelnamn innanför citationstecken. Skulle besökaren sakna även Comic Sans använder webbläsaren något valfritt teckensnitt utan seriffer.

Sand och Comic Sans kallas familjenamn (family names), medan sans-serif är ett släktnamn (generic-family). Det finns tusentals familjenamn, men bara fem släktnamn: serif, sans-serif, cursive, fantasy, monospace. Jag har gjort en enkel stilmall där jag bara angett släktnamnen:

Kolla hur de ser ut i praktiken >>

Ange alltid ett släktnamn sist i raden av alternativ! Du ser hur jag menar i exemplet.

font-style

H1.special { font-style: italic }

Förutom italic (kursiv) finns ytterligare två värden: normal och oblique (skev). Man kan också ange inherit, men det betyder bara att fonten skall vara densamma som tidigare. Man behöver således inte använda detta kommando och det är inte heller alla webbläsare som förstår det, vilket kan få oönskade konsekvenser för stilmallen.

Kolla hur de ser ut i praktiken >>

font-variant

H1.special { font-variant: small-caps }

Normal och inherit förefaller vara tämligen oanvändbara, eftersom man oftast vill förändra en stil. Därför är small-caps (kapitäler) intressantare. Det finns speciella kapitälfonter, men om det inte finns något lämpligt teckensnitt installerat är det tänkt att webbläsaren skall modifiera ett redan befintligt.

Kolla hur de ser ut i praktiken >>

font-weight

H1.special { font-weight: bold }

Här finns desto fler värden att tillgå, förutom normal och inherit. Vanligast är väl bold (fet), bolder (fetare än fet) och lighter (tunnare än normal). Till dessa kan man även lägga siffervärdena 100 t.o.m 900, med följande referensvärden:

• 100 = lighter
• 400 = normal
• 700 = bold
• 900 = bolder

Men observera följande: Om font-weight är satt till 300 i BODY räknas 300 som det normala och då kommer bold att innebära 600. Man måste alltså se dessa siffervärden som relativa, snarare än absoluta. Känner man sig osäker på siffervärdena rekommenderar jag att man i stället använder bokstavsvarianterna.

Kolla hur de ser ut i praktiken >>

font-stretch

H1.special { font-stretch: ultra-condensed }

Denna deklaration ställer in bredden på varje tecknen i texten. Man gör alltså bokstäverna bredare, snarare än ökar avståndet mellan dem. De värden som används är wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded och ultra-expanded.

Att ett tecken är kondenserat innebär att det är ihoptryckt och att det är expanderat betyder följaktligen att det är utdraget.

Kolla hur de ser ut i praktiken >>

font-size

H1.special { font-size: 14px }

Som namnet antyder använder man font-size för att ställa in teckengraden. Man kan ange relativa eller absoluta värden. De relativa värdena är larger, smaller eller ett procentvärde. Det sistnämnda utgår då ifrån den inställning som redan finns i en box och ökar eller minskar teckengraden utifrån det, t.ex som i .special { font-size: 85% }

Till de absoluta värdena räknas följande: xx-small, x-small, small, medium, large, x-large och xx-large. Dessutom kan man ange ett siffervärde, som exemplet ovan visar. Enheterna som går att använda är följande:

• px - pixels, bildskärmspunkter
• pt - points, typografiska punkter
• pc - picas, typografiska "punkter"
• mm - millimeter
• cm - centimeter
• in - inches, tum
• em - typografisk fyrkant
• ex - x-höjd

Den typografiska fyrkanten är olika stor beroende på vilket teckensnitt man använder. Den utgår nämligen från bokstaven M i valt teckensnitt. Detta innebär alltså att måttet em varken är beroende av skärmens upplösning eller vilket operativsystem man använder. Det som styr är i stället besökarens egna inställningar för teckenstorleken.

Använder besökaren en viss storlek, t.ex 12 punkters Verdana, säger man att storleken är en fyrkant, dvs 1em. Sedan kan man alltså variera detta genom att ange ett större eller mindre värde, t.ex 1.2em eller 0.8em för 20% större respektive mindre storlek.

Enheten ex är sällan använd, eftersom den inte är helt självklar. Den utgår nämligen ifrån x-höjden i det valda teckensnittet och fungerar på det viset ungefär som enheten em. Du kan läsa mer om vad x-höjd är på min sida om teckensnitt >>

Dessvärre fungerar både em och ex dåligt i de flesta webbläsare. Därför använder de flesta enheten px, för pixelvärdet. Dock är pixelstorleken olika på olika skärmar, dels beroende på att de kan ha olika upplösning, t.ex 800x600 eller 1.024x768, och dels på att olika operativsystem använder olika antal pixels per tum, t.ex 72 ppi på Mac och 96 ppi i Windows.

Den som vill använda pixelvärdet bör därför noga kontrollera att texten går att läsa på alla skärmar och operativsystem. Här är slutligen en jämförelsetabell mellan HTML och CSS:

Men nu är det dags att kolla hur de ser ut i praktiken >>

font

H1.special { font: Sand, "Comic Sans", sans-serif x-large italic bold }

Man kan även använda sig av samlingsnamnet font. Då skiljer man olika alternativ inom samma kategori (t.ex font-family) åt med ett kommatecken. Däremot använder man bara mellanslag mellan de olika kategorierna, så som jag visar i exemplet.

Självklart kan man bara använda font när man har få alternativ. För inställningar i följande exempel gör man klokt i att separera de olika egenskaperna:

SPAN.special {
font-family: Sand, "Comic Sans", sans-serif;
font-style: normal;
font-variant: normal;
font-weight: 600;
font-size: 20px;
line-height: 1.2em;
background: yellow;
color: red;
}

Kolla hur de ser ut i praktiken >>

3. Font selection

Jag skall avslutningsvis säga något kort om font selection. I specifikationens kapitel 15.3 har man försökt ta hänsyn till svårigheterna med att få fram rätt teckensnit på skärmen. Det finns inte mindre än fyra olika sätt att ange vilken font som skall användas:

Ange ett teckensnitt med dess exakta namn (family name). Denna metod kallas för font name matching. Ett exempel på detta är när man skriver in ett teckensnitts exakta namn, som jag nämnde i början på den här texten, t.ex font-family: Sand

Ange teckensnitt av en viss släkt genom att använda dess generiska namn (generic name). Webbläsaren letar då upp det mest lämpliga teckensnittet. Denna metod går under namnet intelligent font matching eller generic font matching. Exempel: font-family: sans-serif.

Man kan också låta webbläsaren välja ut ett teckensnitt som svarar mot en väldigt noggrann beskrivning av hur seriffer, teckenbredd, storlek, osv, skall se ut. Denna metod kallas font synthesis och involverar alltså inget font-family, men väl de andra egenskaperna för fonten.

Slutligen kan man låta webbläsaren ladda ner teckensnittet från en server, vilket kallas font download. Den kan se ut så här:

I specifikationen står inte mycket mer om hur det här fungerar och jag har faktiskt aldrig sett det användas. Metoden förefaller vara alltför osäker. De flesta använder antingen GIF-bilder för kortare texter, eller skapar PDF-filer av den text de vill ha layoutad på ett visst sätt.