Typografisch ontwerp is een cruciaal onderdeel van een succesvol website-ontwerp. Sites maken met tekst die gemakkelijk te lezen is en er goed uitziet, is het doel van elke webdesigner. Om dit te bereiken, moet u de specifieke lettertypen kunnen instellen die u op uw webpagina's wilt gebruiken. Om het lettertype of de lettertypefamilie op uw webdocumenten te specificeren, gebruikt u de stijleigenschap font-familie in uw CSS.
De meest ongecompliceerde lettertypefamiliestijl die u zou kunnen gebruiken, zou slechts één lettertypefamilie bevatten:
p {
font-familie: Arial;
}
Als u deze stijl op een pagina toepast, worden alle alinea's weergegeven in de lettertypefamilie "Arial". Dit is geweldig en aangezien "Arial" een zogenaamd "webveilig lettertype" is, wat betekent dat de meeste (zo niet alle) computers het zouden hebben geïnstalleerd, kunt u gerust zijn, wetende dat uw pagina wordt weergegeven in de beoogde lettertype.
Dus wat gebeurt er als het lettertype dat u selecteert niet wordt gevonden? Als u bijvoorbeeld geen "webveilig lettertype" op een pagina gebruikt, wat doet de user-agent dan als ze dat lettertype niet hebben? Ze maken een vervanging.
Dit kan resulteren in een aantal grappig ogende pagina's. Ik ging ooit naar een pagina waar mijn computer het volledig in "Wingdings" (een icon-set) weergaf omdat mijn computer geen het lettertype dat de ontwikkelaar had gespecificeerd, en mijn browser maakte een verschrikkelijke keuze in welk lettertype het zou gebruiken als een vervanging. De pagina was voor mij totaal onleesbaar! Dit is waar een lettertypestapel in het spel komt.
Scheid meerdere lettertypefamilies met een komma in een lettertypestapel
Een "lettertypestapel" is een lijst met lettertypen die u op uw pagina wilt laten gebruiken. U zou uw lettertypekeuzes in de volgorde van uw voorkeur plaatsen en elk met een komma scheiden. Als de browser de eerste lettertypefamilie niet in de lijst heeft, zal hij de tweede en dan de derde proberen, enzovoort, totdat hij er een vindt die hij op het systeem heeft.
font-familie: Pussycat, Algerijn, Broadway;
In het bovenstaande voorbeeld zoekt de browser eerst naar het lettertype "Pussycat", dan "Algerijns" en vervolgens "Broadway" als geen van de andere lettertypen werd gevonden. Dit geeft u meer kans dat ten minste één van de door u gekozen lettertypen wordt gebruikt. Het is niet perfect, daarom kunnen we nog meer toevoegen aan onze font-stack (lees verder!).
Gebruik generieke lettertypen als laatste
U kunt dus een lettertypestapel maken met een lijst met lettertypen en er nog steeds geen hebben die de browser kan vinden. U wilt niet dat uw pagina onleesbaar wordt weergegeven als de browser een slechte vervangingskeuze maakt. Gelukkig heeft CSS hier ook een oplossing voor, en die heet generieke lettertypen.
U moet uw lijst met lettertypen altijd beëindigen (zelfs als het een lijst is met één familie of alleen webveilige lettertypen) met een generiek lettertype. Er zijn er vijf die u kunt gebruiken:
- Cursief
- Fantasie
- Monospace
- schreefloos
- Serif
De twee bovenstaande voorbeelden kunnen worden gewijzigd in:
font-familie: Arial, schreefloos;
of.
font-familie: Pussycat, Algerian, Broadway, fantasy;
Sommige namen van lettertypen zijn twee of meer woorden
Als de lettertypefamilie die u wilt gebruiken uit meer dan één woord bestaat, moet u deze tussen dubbele aanhalingstekens plaatsen. Hoewel sommige browsers lettertypefamilies zonder aanhalingstekens kunnen lezen, kunnen er problemen optreden als de witruimte wordt gecomprimeerd of genegeerd.
font-familie: "Times New Roman", schreef;
In dit voorbeeld ziet u dat de lettertypenaam "Times New Roman", die uit meerdere woorden bestaat, tussen aanhalingstekens staat. Dit vertelt de browser dat alle drie deze woorden deel uitmaken van die naam van het lettertype, in tegenstelling tot drie verschillende lettertypen die allemaal uit één woord bestaan.