Typografisk design spelar en viktig roll i webbdesign. Väl utformat och formaterat textinnehåll hjälper en webbplats att bli mer framgångsrik genom att skapa en läsupplevelse som är både trevlig och lätt att konsumera. En del av dina ansträngningar för att arbeta med typ kommer att vara att välja rätt teckensnitt för din design och sedan använda CSS för att lägga till teckensnitt och teckensnitt i sidans display. Detta görs genom att använda det som kallas a teckensnittsstack.
Fontstackar
När du ange ett teckensnitt att använda på en webbsida är det en bra metod att också inkludera reservalternativ om ditt teckensnittsval inte kan hittas. Dessa reservalternativ presenteras i teckensnittsstack. Om webbläsaren inte kan hitta det första teckensnittet som listas i stacken går det vidare till nästa. Den fortsätter denna process tills den hittar ett teckensnitt som den kan använda, eller så går det slut på val (i vilket fall det bara väljer vilket systemtypsnitt som helst). Här är ett exempel på hur en font-stack skulle se ut i CSS när den tillämpas på "body" -elementet:
kropp {
font-family: Georgia, "Times New Roman", serif;
}
Teckensnittet Georgia visas först, så som standard är det vad sidan kommer att använda, men om det teckensnittet inte är tillgängligt av någon anledning faller sidan tillbaka till Times New Roman.
Bifoga Times New Roman i dubbla citat eftersom det är ett namn på flera ord. Enstaka ords teckensnittsnamn, som Georgia eller Arial, behöver inte citat, men teckensnittsnamn med flera ord med inbäddade mellanslag behöver dem så att webbläsaren vet att alla dessa ord innehåller teckensnittsnamnet.
Teckensnittsstacken slutar med ordet serif. Det är ett generiskt typsnittsnamn. I det osannolika fallet att en person inte har Georgien eller Times New Roman på sin dator skulle webbplatsen använda det serif-teckensnitt som den kunde hitta. Webbläsaren väljer ett teckensnitt för dig, men åtminstone erbjuder du vägledning så att den vet vilken typ av teckensnitt som fungerar bäst inom designen.
Generiska typsnittsfamiljer
Det generiska typsnittsnamnet som finns tillgängligt i CSS är:
- kursiv
- fantasi
- monospace
- serif
- sans serif
Även om det finns många andra teckensnittsklassificeringar tillgängliga inom webbdesign och typografi, inklusive slab-serif, blackletter, display, grunge och mer, dessa fem generiska typsnittsnamn är de som du skulle använda i en typsnittstapel i CSS.
- Kursiva teckensnitt - har ofta tunna, utsmyckade bokstäver som är avsedda att replikera snygg handskriven text. Dessa teckensnitt, på grund av sina tunna, blommiga bokstäver, är inte lämpliga för ett stort innehållsinnehåll som kroppskopia. Kursiva teckensnitt används vanligtvis för rubriker och kortare textbehov som kan visas i större teckensnittsstorlekar.
- Fantasy teckensnitt - är de lite galna teckensnitt som egentligen inte faller i någon annan kategori. Teckensnitt som replikerar välkända logotyper, som bokstäverna från Harry Potter eller Tillbaka till framtiden faller i denna kategori. Dessa teckensnitt är inte lämpliga för kroppsinnehåll, eftersom de ofta är så stiliserade att det är alldeles för svårt att läsa längre textavsnitt skrivna i dessa teckensnitt.
- Monospace-teckensnitt - har bokstäver med samma storlek och mellanrum som du skulle ha hittat på en gammal skrivmaskin. Till skillnad från andra teckensnitt som har olika bredder för bokstäver beroende på storlek (till exempel ett stort W tar mycket mer plats än gemener i) använder monospace-teckensnitt en fast bredd för alla tecken. Dessa teckensnitt används ofta för kodavläsningar eftersom de ser tydligt annorlunda ut än annan text på den sidan.
- Serif-teckensnitt - använd lite extra ligaturer på brevformuläret. De extra bitarna kallas serifs. Vanliga serif-teckensnitt är Georgia och Times New Roman. Serif-teckensnitt fungerar utmärkt för stor text som rubrik, såväl som långa texter och brödtexter.
- Sans serifteckensnitt - har inte ligaturer. Namnet betyder utan serifs. Populära teckensnitt i denna kategori inkluderar Arial eller Helvetica. På samma sätt som serifs fungerar sans-serif-teckensnitt lika bra i rubriker som kroppsinnehåll, även om vissa experter föredrar att stora textblock undviker sans-serif-teckensnitt eftersom de är svårare att läsa vid liten punkt storlekar.