Skrift som grafik? La' vær!

Der er ingen grund til at lave grafikker af skrifter, selvom det ønskede skriftbillede er specielt. Stylesheets og overførbare skrifter byder på flere muligheder end du tror.

Skrifter på websider vælges ved at give den markør, der formaterer skriften, der ønskede egenskaber. Eksempel:

p.speciel {
font-weight:normal;
font-style:normal;
font-size:2em;
font-family:"Monotype Corsiva",serif;
color:maroon;
}

... vil formatere et tekstafsnit, der har class="speciel" som følger:

Skrifter på websider er et spændende emne...

Ofte sættes line-heigth - der er en tekstegenskab og ikke en skriftegenskab - ind i et sådant stylesheet:

p.linieskydning {
  font-weight:normal;
  font-style:normal;
  font-size:2em;
  font-family:"Monotype Corsiva",serif;
  color:maroon;
  line-height:3em;
}

Som du ser herunder, indsætter browseren den ekstra luft både foroven og forneden.

Skrifter på websider er et spændende emne...

Formreglerne kan grupperes på følgende måde:

p.linieskydning {
font: normal normal 2em/3em 
"Monotype Corsiva",serif maroon;
}

... der vil give fuldstændigt det samme resultat som ovenfor.

Skriftvalg

Som du sikkert ved, er font-family navnet på skriften, som det fremgår af Windows' fontoversigt i kontrolpanelet. Anvender du en skrift, som der er tvivl om, findes på brugerens computer, skal der være et eller flere alternativer til den skrift du foretrækker. Almindelig brødskrift på websider er oftest Arial eller Verdana, så der vil du typisk angive f.eks. arial, helvetica, sans-serif. Denne liste fortæller browseren, at den skal anvende Arial, hvis den findes. Findes den ikke, skal der anvendes Helvetica. Findes den heller ikke, skal der anvendes en skrift af arten sans-serif. Sans-serif er ikke nogen skrift, men en skriftart.

I eksemplet har jeg angivet den skrift, jeg ønsker anvendt. Det er Monotype Corsiva, der installeres sammen med Windows 2000, så der er en chance for, at du ser denne skrift, som den er tænkt.

Som alternativ er kun angivet skriftenarten serif. Det kræver en forklaring:

Ifølge CSS-specifikationen skal en browser kunne genkende 5 skriftarter - det, der i papirerne hedder "Generic Fonts". Disse er:

SkriftartEksempelUdseende
SerifTimesUdseende
Sans-serifArialUdseende
CursiveScriptUdseende
FantasyComic Sans MSUdseende
MonospaceCourierUdseende

Ingen af mine browsere - Internet Explorer 5, Netscape 7, Opera 7, Mozilla 1.0 - er imidlertid i stand til at finde ækvivalenter for cursive og fantasy, på trods af, at jeg i tabellen herover kan se, at jeg har skrifter, der kunne anvendes som ækvivalenter.

Det er der en forklaring på, men den er er smule indviklet, og min point her er såmænd blot at forklare, hvorfor jeg nøjes med at angive serif som det eneste alternativ. Det er meget enkelt, fordi jeg så har bestemt mig for det mindst ringe resultat, i stedet for at lade browseren bestemme forholdsvis tilfældigt.

Der er en vej ud af dette morads, men inden vi når dertil, vil jeg benytte lejligheden til at illustrere, hvorfor jeg overhovedet er optaget af dette emne.

Tekst som grafik - en uskik

Herunder ser du et tekststykke fra en website. Teksten er lavet som en GIF-fil, der fylder godt 8 kilobyte. Som tekst alene ville tyngden af denne lille tekstmængde være ca 350 bytes, altså en tyvendedel af det, brugerne nu udsættes for.

Jeg kan kun gisne om, hvad der har fået den person, der har designet denne website, til at vælge at gengive sine tekster ikke alene med lutter store bogstaver, men også som grafikker.

Denne uskik, der for nogle år tilbage var ganske udbredt, betyder selvfølgelig at teksten ikke ombrydes, når browservinduets bredde ændres. Et smalt browservindue - noget af teksten forsvinder. Et bredt browservindue - bredden udnyttes ikke optimalt.

Den eneste undskyldning, jeg kan komme på, er at kunden har haft nogle meget voldsomme og stringente formkrav til teksten. Men er dette den bedste løsning?

Eksempel på en tekst som grafik

Det synes jeg bestemt ikke. Herunder gengiver jeg mit første bud på et alternativ, den selvsamme tekst, formateret med følgende stylesheet:

.eksempel  p {
  font-family:helvetica,arial,sans-serif;
  font-size:14px;
}

Every thing fills a place. Every problem inspires to a solution.

Every solution from Xxxxxxx Xxxxxxx is conceived and designed by recognized Danish Designers, who do not always follow the beaten track but readily find a new one.

Every object in the collection is unique - applied art created for daily delight. New collectors can start here.

Hvor fjollet det end er, kan jeg godt forestille mig, at designeren har været stillet over for et ultimativt krav om store bogstaver (versaler) i al tekst. Men det kan ikke være grund nok til at lave en grafik af teksten. Du kan enten skrive teksten med store bogstaver, eller lave et stylesheet, der også omfatter formreglen text-transform:

#eks3 { 
  text-transform:uppercase;
}
#eks3 p {
  font-size:12px;
}

Every thing fills a place. Every problem inspires to a solution.

Every solution from Xxxxxxx Xxxxxxx is conceived and designed by recognized Danish Designers, who do not always follow the beaten track but readily find a new one.

Every object in the collection is unique - applied art created for daily delight. New collectors can start here.

Skriftvalg i eksemplet

I eksemplerne har jeg specificeret Helvetica som skriftvalg. Det er en skrift jeg ikke i skrivende stund har på min PC, så teksten gengives med Arial, som er mit første alternativ i stylesheet'et.

Nu har jeg en forestilling om, at Arial- og Helvetica-skrifterne er hinanden meget lig, så - i hvert fald for eksemplets skyld - kan det nok være et fedt.

Men sæt nu, at det skulle være Helvetica? Ja, så havde jeg været nødt til at anskaffe denne skrift, f.eks. ved at downloade den, hvis jeg kan finde den som freeware, eller købe den.

Det løser jo mit problem i forhold til kunden. Men hvad med brugerne? Når jeg ikke har fået Helvetica med i min Windows 2000 installation, kan det jo det jo meget vel være, at hundredtusinder af Windows brugere heller ikke har den.

Dette er et særligt problem, som er en del af forklaringen på, at så mange webbureauer i tidens løb er faldet i med deres overskrifter og tekster som grafikker. Med Helvetica og Arial synes jeg nok, vi er ude i petitesserne, men sæt nu en kunde ønsker en meget speciel skrift, som næppe findes i mange Windows installationer?

Teknologien til at løse dette problem findes. Den anvendes blot ikke særlig meget. Derfor har jeg lavet en webside om skrifter, hvor jeg gennemgår denne teknologi. Gå videre til side 2.

1 2 3 4 5

Denne side er senest opdateret: 19. November, 2008