Mens bilder får mye av kjærligheten når det gjelder nettsteder, er det det skriftlige ordet som appellerer til søkemotorer og fremfører innholdet på de fleste nettsteder. Som sådan er typografisk design en kritisk viktig del av webdesign. Med betydningen av et nettsteds tekst kommer behovet for å sikre at det ser bra ut og er lett å lese. Dette er gjort med CSS (Cascading Style Sheets) styling.
Etter moderne webdesign standard, vil du gjøre det ved å bruke CSS når du vil diktere utseendet på et nettsteds tekstinnhold. Dette skiller den CSS-stilen fra HTML-strukturen til en side. Hvis du for eksempel vil sette skrift på en side til "Arial", kan du gjøre det ved å legge til følgende stilregel for CSS (dette vil trolig bli gjort i et eksternt CSS-stilark som styrer stilene for hver side på nettsiden):
kropp {
font-familie: Arial;
}
Denne skrifttypen er angitt for "kroppen", så CSS-kaskaden vil bruke stilen til alle de andre elementene på siden. Dette skyldes at hvert annet HTML-element er et barn av "body" -elementet, vil CSS-stiler som fontfamilie eller -farge kaskade fra foreldrene til barnelementet. Dette vil være tilfelle med mindre en mer spesifikk stil legges til for visse elementer. Det eneste problemet med dette CSS er at bare en enkelt skrift er spesifisert. Hvis denne skrifttypen ikke kan bli funnet av en eller annen grunn, vil nettleseren erstatte en annen på sin plass. Dette er dårlig fordi du ikke har kontroll over hvilken font som brukes; nettleseren vil velge for deg, og du kan ikke liker hva den bestemte seg for å bruke! Det er her en fontstabel kommer inn. En skrifttypestabel er en liste over skrifttyper i CSS-skrift-familiedeklarasjonen. Skriftene er oppført i preferanse rekkefølge som du vil at de skal vises på nettstedet i tilfelle et problem som en skrift ikke lastes inn. En skriftstapel tillater en designer å kontrollere utseendet på skriftene på nettsiden, selv om datamaskinen ikke har den innledende skrifttypen du ringte for. Så hvordan ser en skriftstabel ut? Her er et eksempel: kropp {
font-familie: Georgia, "Times New Roman", serif;
}
Det er noen ting å legge merke til her. Først vil du se at vi separerte de forskjellige skriftnavnene med et komma mellom hver enkelt. Du kan legge til så mange fonter som du vil, så lenge de er adskilt av et komma. Nettleseren vil prøve å laste inn den første skriften som er angitt først. Hvis det mislykkes, vil det løpe ned linjen som prøver hver skrift til den finner en som den kan bruke. I dette eksemplet bruker vi websikker fonter, og "Georgia" vil trolig bli funnet på personens datamaskin som besøker nettstedet (nettleseren ser på datamaskinen din for skrifttypene som er angitt på siden, slik at nettstedet faktisk forteller datamaskin som fonterer for å laste fra systemet ditt). Hvis det av en eller annen grunn ikke ble funnet skrifttypen, ville den bevege seg ned i stabelen og prøve neste skrifttype spesifisert. Når det gjelder den neste skrifttypen, legg merke til hvordan den er skrevet i stakken. Navnet på "Times New Roman" er innkapslet i to sitater. Dette skyldes at skrifttypenavnet har flere ord. Alle skrifttyper med mer enn ett ord (Trebuchet MS, Courier New, etc.) må ha navnet i to sitater, slik at nettleseren vet at alle disse ordene er en del av ett skrifttypenavn. Til slutt slutter vi skrifttypestakken med "serif", som er en generisk skriftklassifisering. I det usannsynlige tilfellet at ingen av skrifttypene du har oppgitt i stakken din er tilgjengelig, vil nettleseren i stedet bare finne en skrift som i det minste faller inn i riktig klassifisering du har valgt. For eksempel, hvis du bruker sans-serif-fonter som Arial og Verdana, vil slutt på en skriftstabel med klassifiseringen av "sans-serif" i det minste beholde skrifttypen i den generelle familien hvis det er et lastproblem. Ganske vist, det burde være veldig sjeldent at en nettleser ikke finner noen av de skrifttyper som er oppført i stakken og i stedet skal bruke denne generiske klassifiseringen, det er en best practice å bare inkludere det for å være dobbelt sikker. Mange nettsteder bruker i dag webfonter som enten er inkludert på nettstedet sammen med andre ressurser (som nettstedets bilder, Javascript-fil, etc.) eller koblet til på et eksternt skriftsted som Google Fonts eller Typekit. Mens disse skriftene skal lastes siden du kobler til filene selv, vil du fremdeles bruke en skriftstapel for å sikre at du har kontroll over eventuelle problemer som kan oppstå. Det samme gjelder for "websikker" skrifter som burde være på noens datamaskin (merk at skrifter som vi har brukt som eksempler i denne artikkelen, inkludert Arial, Verdana, Georgia og Times New Roman, er alle websikker fonter som burde være på en persons datamaskin). Selv om sannsynligheten for at en skrifttype mangler er svært lav, vil det være mulig å skille et nettsteds typografiske design så mye som mulig ved å spesifisere en fontstabel. Opprinnelig artikkel av Jennifer Krynin. Redigert av Jeremy Girard. Font Stacks og Web Fonts
