Typografisk design spiller en vigtig rolle i webstedsdesign. Velindrettet og formateret tekstindhold hjælper et websted med at blive mere succesfuldt ved at skabe en læseoplevelse, der er både behagelig og nem at forbruge. En del af din indsats for at arbejde med typen vil være at vælge de rigtige skrifttyper til dit design og derefter bruge CSS til at tilføje disse skrifttyper og skrifttypestile til sidens display. Dette gøres ved at bruge det, der kaldes a skrifttypestak.
Fontstakke
Når du angiv en skrifttype at bruge på en webside, er det en god praksis at også medtage reservemuligheder, hvis dit fontvalg ikke kan findes. Disse tilbageførselsmuligheder er præsenteret i skrifttypestak. Hvis browseren ikke kan finde den første skrifttype, der er angivet i stakken, går den videre til den næste. Den fortsætter denne proces, indtil den finder en skrifttype, som den kan bruge, eller den løber tør for valg (i hvilket tilfælde den bare vælger den systemfont, den ønsker). Her er et eksempel på, hvordan en font-stack vil se ud i CSS, når den anvendes på "body" -elementet:
krop {
font-familie: Georgien, "Times New Roman", serif;
}
Skrifttypen Georgia vises først, så som standard er det, hvad siden vil bruge, men hvis denne skrifttype ikke er tilgængelig af en eller anden grund, falder siden tilbage til Times New Roman.
Vedlægge Times New Roman i dobbelt anførselstegn, fordi det er et navn med flere ord. Enkeltords skrifttypenavne, som Georgia eller Arial, kræver ikke citater, men skrifttypenavn med flere ord med indlejrede mellemrum har brug for dem, så browseren ved, at alle disse ord indeholder fontnavnet.
Fontstakken slutter med ordet serif. Det er et generisk skrifttypenavn. I det usandsynlige tilfælde, at en person ikke har Georgien eller Times New Roman på deres computer ville webstedet bruge den serif-skrifttype, den kunne finde. Browseren vælger en skrifttype til dig, men i det mindste tilbyder du vejledning, så den ved, hvilken slags skrifttype der fungerer bedst inden for designet.
Generiske skrifttypefamilier
Det generiske skrifttypenavn, der er tilgængeligt i CSS, er:
- kursiv
- fantasi
- monospace
- serif
- sans serif
Mens der er mange andre skrifttypeklassifikationer tilgængelige i webdesign og typografi, herunder slab-serif, blackletter, display, grunge og mere, disse fem generiske skrifttypenavne er dem, du vil bruge i en fontstak i CSS.
- Kursive skrifttyper - har ofte tynde, udsmykkede brevformularer, der er beregnet til at replikere fancy håndskrevet tekst. Disse skrifttyper er på grund af deres tynde, blomstrende bogstaver ikke passende til en stor indholdsblok som f.eks. Body copy. Kursive skrifttyper bruges normalt til overskrifter og kortere tekstbehov, der kan vises i større skriftstørrelser.
- Fantasy skrifttyper - er de lidt vanvittige skrifttyper, der ikke rigtig falder ind under nogen anden kategori. Skrifttyper, der replikerer kendte logoer, som bogstavformularerne fra Harry Potter eller Tilbage til fremtiden film, falder inden for denne kategori. Disse skrifttyper er ikke egnede til kropsindhold, da de ofte er så stiliserede, at det er alt for svært at gøre det at læse længere tekststykker skrevet i disse skrifttyper.
- Monospace-skrifttyper - har brevformularer med samme størrelse og mellemrum, som du ville have fundet på en gammel skrivemaskine. I modsætning til andre skrifttyper, der har variabel bredde for bogstaver afhængigt af deres størrelse (for eksempel en stor bogstav W tager meget mere plads end små bogstaver jeg), monospace-skrifttyper bruger en fast bredde til alle tegn. Disse skrifttyper bruges ofte til kodelæsning, fordi de ser tydeligt anderledes ud end anden tekst på den side.
- Serif-skrifttyper - anvender lidt ekstra ligaturer på bogstavformularerne. Disse ekstra stykker kaldes serifs. Almindelige serif-skrifttyper er Georgia og Times New Roman. Serif-skrifttyper fungerer godt til stor tekst som overskrift såvel som lange tekster og brødtekst.
- Sans serifskrifttyper - ikke har ligaturer. Navnet betyder uden serifs. Populære skrifttyper i denne kategori inkluderer Arial eller Helvetica. Svarende til serifs fungerer sans-serif-skrifttyper lige så godt i overskrifter såvel som kropsindhold, selvom nogle eksperter foretrækker, at store tekstblokke undgår sans-serif-skrifttyper, fordi de er sværere at læse på et lille punkt størrelser.