Typografisch ontwerp speelt een belangrijke rol bij het ontwerpen van websites. Goed opgemaakte en opgemaakte tekstinhoud helpt een site succesvoller te zijn door een leeservaring te creëren die zowel plezierig als gemakkelijk te consumeren is. Een deel van uw inspanningen om met tekst te werken, zal zijn om de juiste lettertypen voor uw ontwerp te kiezen en vervolgens CSS te gebruiken om die lettertypen en lettertypestijlen toe te voegen aan de weergave van de pagina. Dit wordt gedaan met behulp van wat a. wordt genoemd lettertype stapel.
Lettertypestapels
Wanneer je specificeer een lettertype om op een webpagina te gebruiken, is het een best practice om ook fallback-opties op te nemen voor het geval uw lettertype-keuze niet kan worden gevonden. Deze fallback-opties worden gepresenteerd in de: lettertype stapel. Als de browser het eerste lettertype in de stapel niet kan vinden, gaat het naar het volgende. Het gaat door met dit proces totdat het een lettertype vindt dat het kan gebruiken, of het heeft geen keuze meer (in dat geval kiest het gewoon een willekeurig systeemlettertype). Hier is een voorbeeld van hoe een font-stack eruit zou zien in CSS wanneer toegepast op het "body" -element:
lichaam {
font-familie: Georgia, "Times New Roman", schreef;
}
Het lettertype Georgia verschijnt als eerste, dus standaard zal de pagina dit gebruiken, maar als dat lettertype om de een of andere reden niet beschikbaar is, valt de pagina terug naar Times New Roman.
Insluiten Times New Roman tussen dubbele aanhalingstekens omdat het een naam met meerdere woorden is. Lettertypenamen van één woord, zoals Georgia of Arial, vereisen geen aanhalingstekens, maar lettertypenamen van meerdere woorden met ingesloten spaties hebben ze nodig, zodat de browser weet dat al die woorden de naam van het lettertype vormen.
De lettertypestapel eindigt met het woord schreef. Dat is een generieke font-familienaam. In het onwaarschijnlijke geval dat een persoon Georgië niet heeft of Times New Roman op hun computer zou de site elk serif-lettertype gebruiken dat het kon vinden. De browser kiest een lettertype voor je, maar je geeft in ieder geval begeleiding zodat hij weet welk lettertype het beste past binnen het ontwerp.
Generieke lettertypefamilies
De generieke lettertypenamen die beschikbaar zijn in CSS zijn:
- cursief
- fantasie
- monospace
- schreef
- schreefloos
Hoewel er veel andere lettertypeclassificaties beschikbaar zijn in webdesign en typografie, waaronder slab-serif, blackletter, display, grunge en meer, deze vijf generieke lettertypenamen zijn degenen die u in een lettertypestapel zou gebruiken in CSS.
- Cursieve lettertypen - bevatten vaak dunne, sierlijke lettervormen die bedoeld zijn om mooie handgeschreven tekst te repliceren. Deze lettertypen zijn vanwege hun dunne, bloemrijke letters niet geschikt voor een groot blok inhoud zoals body-copy. Cursieve lettertypen worden over het algemeen gebruikt voor koppen en kortere tekstbehoeften die in grotere lettergroottes kunnen worden weergegeven.
- Fantasielettertypen - zijn de ietwat gekke lettertypen die niet echt in een andere categorie vallen. Lettertypen die bekende logo's repliceren, zoals de lettervormen uit de Harry Potter of Terug naar de toekomst films, vallen in deze categorie. Deze lettertypen zijn niet geschikt voor hoofdtekst, omdat ze vaak zo gestileerd zijn dat het lezen van langere tekstgedeelten die in deze lettertypen zijn geschreven veel te moeilijk is om te doen.
- Monospace-lettertypen — voorzien van even grote en gespreide lettervormen zoals je zou hebben gevonden op een oude typemachine. In tegenstelling tot andere lettertypen die een variabele breedte hebben voor letters, afhankelijk van hun grootte (bijvoorbeeld een hoofdletter W neemt veel meer ruimte in beslag dan een kleine letter ik), gebruiken monospace-lettertypen een vaste breedte voor alle tekens. Deze lettertypen worden vaak gebruikt voor het uitlezen van code omdat ze er duidelijk anders uitzien dan andere tekst op die pagina.
- Serif-lettertypen - gebruik kleine extra ligaturen op de lettervormen. Die extra stukken heten schreven. Gebruikelijke serif-lettertypen zijn Georgia en Times New Roman. Serif-lettertypen werken uitstekend voor grote tekst, zoals kopteksten, maar ook voor lange tekstpassages en hoofdtekst.
- schreeflooslettertypen - geen ligaturen hebben. De naam betekent: zonder schreven. Populaire lettertypen in deze categorie zijn onder andere Arial of Helvetica. Net als met schreef, presteren schreefloze lettertypen even goed in koppen als in hoofdtekst, hoewel sommige experts geven er de voorkeur aan dat grote blokken tekst schreefloze lettertypen vermijden, omdat ze op een klein punt moeilijker te lezen zijn maten.