The Generic Font Families in CSS

Typografisk design spiller en viktig rolle i design av nettsteder. Velformulert og formatert tekstinnhold hjelper et nettsted å bli mer vellykket ved å skape en leseopplevelse som er både hyggelig og enkel å konsumere. En del av arbeidet ditt med å jobbe med typen vil være å velge de riktige skriftene for designet ditt, og deretter bruke CSS til å legge til disse skriftene og skriftstilene på siden. Dette gjøres ved å bruke det som kalles a skriftstabel.

Fontstabler

Når du spesifiser en skrift for å bruke på en webside, er det en god praksis å også inkludere reservealternativer i tilfelle skriftvalget ditt ikke blir funnet. Disse reservealternativene er presentert i skriftstabel. Hvis nettleseren ikke finner den første fonten som er oppført i bunken, går den videre til den neste. Den fortsetter denne prosessen til den finner en skrift den kan bruke, eller den går tom for valg (i så fall velger den bare hvilken som helst systemfont den ønsker). Her er et eksempel på hvordan en font-stack vil se ut i CSS når den brukes på "body" -elementet:

kropp {
font-familie: Georgia, "Times New Roman", serif;
}

Skriften Georgia vises først, så som standard vil dette være siden, men hvis skriften ikke er tilgjengelig av en eller annen grunn, faller siden tilbake til Times New Roman.

Fontstakken slutter med ordet serif. Det er et generelt font-familienavn. I det usannsynlige tilfellet at en person ikke har Georgia eller Times New Roman på datamaskinen deres ville nettstedet bruke hvilken serif-skrift den kunne finne. Nettleseren velger en skrift for deg, men i det minste tilbyr du veiledning, slik at den vet hva slags skrift som fungerer best i designet.

Generiske fontfamilier

Det generiske skriftnavnet som er tilgjengelig i CSS, er:

• kursiv
• fantasi
• monospace
• serif
• sans serif

Mens det er mange andre fontklassifiseringer tilgjengelig innen webdesign og typografi, inkludert slab-serif, blackletter, display, grunge og mer, disse fem generiske skriftnavnene er de du vil bruke i en fontstabel i CSS.

• Kursive skrifttyper - har ofte tynne, utsmykkede brevformer som er ment å gjenskape fancy håndskrevet tekst. Disse skriftene, på grunn av sine tynne, blomstrende bokstaver, er ikke passende for en stor innholdsblokk som kroppskopi. Kursive skrifttyper brukes vanligvis til overskrifter og kortere tekstbehov som kan vises i større skriftstørrelser.
• Fantasy skrifttyper - er de litt sprø skriftene som egentlig ikke faller inn i noen annen kategori. Skrifter som replikerer kjente logoer, som bokstavformene fra Harry Potter eller Tilbake til fremtiden filmer, faller inn i denne kategorien. Disse skriftene er ikke passende for kroppsinnhold, siden de ofte er så stiliserte at det er altfor vanskelig å lese lengre tekststykker skrevet i disse skriftene.
• Monospace-skrifttyper - har like store og store bokstavformer som du ville ha funnet på en gammel skrivemaskin. I motsetning til andre skrifter som har variabel bredde for bokstaver, avhengig av størrelsen (for eksempel en stor bokstav W tar mye mer plass enn små bokstaver Jeg), monospace-skrifttyper bruker en fast bredde for alle tegn. Disse skriftene brukes ofte til kodeavlesninger fordi de ser tydelig forskjellig ut fra annen tekst på den siden.
• Serif-skrifter - bruk lite ekstra ligaturer på brevformene. Disse ekstra brikkene kalles serifs. Vanlige serif-skrifter er Georgia og Times New Roman. Serif-skrifter fungerer bra for stor tekst som overskrift, så vel som lange tekst- og brødtekster.
• Sans serifskrifttyper - ikke har ligaturer. Navnet betyr uten serifs. Populære skrifter i denne kategorien inkluderer Arial eller Helvetica. I likhet med serifs fungerer sans-serif-skrifter like bra i overskrifter som kroppsinnhold, selv om noen eksperter foretrekker at store tekstblokker unngår sans-serif-skrifter fordi de er vanskeligere å lese på et lite punkt størrelser.