Hoewel afbeeldingen veel van de liefde krijgen als het om websites gaat, is het het geschreven woord dat een beroep doet op zoekmachines en de inhoud van de meeste sites weergeeft. Daarom is typografisch ontwerp een zeer belangrijk onderdeel van het ontwerpen van websites. Met het belang van de tekst van een site moet ervoor worden gezorgd dat deze er goed uitziet en gemakkelijk leesbaar is. Dit gebeurt met CSS-stijl (Cascading Style Sheets).
Volgens de moderne webdesign-standaard, wanneer u het uiterlijk van de tekstinhoud van een website wilt dicteren, doet u dat met CSS. Dit scheidt die CSS-stijl van de HTML-structuur van een pagina. Als u bijvoorbeeld het lettertype van een pagina wilt instellen op 'Arial', kunt u dit doen door de volgende stijlregel toe te voegen aan uw CSS (dit zou waarschijnlijk worden gedaan in een externe CSS-stylesheet die de stijlen voor elke stijl mogelijk maakt). pagina op de website):
lichaam {
lettertype-familie: Arial;
}
Dit lettertype is ingesteld voor 'body', dus de CSS-cascade past de stijl toe op alle andere elementen van de pagina. Dit komt omdat elk ander HTML-element een subelement is van het "body" -element, CSS-stijlen zoals lettertypefamilie of -kleur zullen van het bovenliggende element naar het onderliggende element lopen. Dit is het geval tenzij een specifiekere stijl voor bepaalde elementen wordt toegevoegd. Het enige probleem met deze CSS is dat er maar één lettertype is opgegeven. Als dat lettertype om een of andere reden niet kan worden gevonden, vervangt de browser het door een andere. Dit is slecht omdat je geen controle hebt over welk lettertype wordt gebruikt; de browser zal voor u kiezen, en misschien vindt u het niet leuk wat hij besloot te gebruiken! Dat is waar een lettertypestapel in komt. Een lettertypestapel is een lijst met lettertypen in de declaratie CSS-lettertypefamilie. De lettertypen worden weergegeven in de volgorde van voorkeur dat u ze op de site wilt laten verschijnen in het geval van een probleem als een lettertype dat niet wordt geladen. Met een lettertypestapel kan een ontwerper het uiterlijk van de lettertypen op de webpagina bepalen, zelfs als de computer niet het oorspronkelijke lettertype heeft dat u hebt gebruikt. Hoe ziet een lettertypestapel eruit? Hier is een voorbeeld: lichaam {
font-family: Georgia, "Times New Roman", serif;
}
Er zijn een paar dingen om op te merken hier. Eerst zult u zien dat we de verschillende lettertypenamen gescheiden hebben met een komma tussen elke letter. U kunt zoveel fonts toevoegen als u maar wilt, zolang ze maar gescheiden zijn door een komma. De browser probeert het eerste lettertype dat als eerste is opgegeven te laden. Als dat niet lukt, zal het de regel doorlopen bij het proberen van elk lettertype totdat het een lettertype vindt dat het kan gebruiken. In dit voorbeeld gebruiken we webveilige lettertypen en "Georgia" zal waarschijnlijk worden gevonden op de computer van de persoon die de site bezoekt (de browser kijkt op uw computer naar de lettertypen die op de pagina zijn opgegeven, dus de site vertelt eigenlijk de computer welke lettertypen van uw systeem moeten worden geladen). Als om een of andere reden dat lettertype niet werd gevonden, zou het naar beneden gaan en het volgende lettertype proberen. Bekijk in termen van dat volgende lettertype hoe het in de stapel is geschreven. De naam 'Times New Roman' is ingekapseld in dubbele aanhalingstekens. Dit komt omdat de naam van het lettertype meerdere woorden heeft. Alle lettertypen met meer dan één woord (Trebuchet MS, Courier New, etc.) moeten de naam tussen dubbele aanhalingstekens hebben zodat de browser weet dat al deze woorden deel uitmaken van één lettertype. Ten slotte beëindigen we de lettertypestack met "serif", wat een algemene lettertypeclassificatie is. In het onwaarschijnlijke geval dat geen van de lettertypen die u in uw stapel hebt genoemd beschikbaar is, zal de browser in plaats daarvan alleen een lettertype vinden dat ten minste in de juiste classificatie valt die u hebt gekozen. Als u bijvoorbeeld sans-serif-lettertypen zoals Arial en Verdana gebruikt, houdt het beëindigen van een lettertypestack met de classificatie van "sans-serif" in elk geval het lettertype in die algehele familie bij als er een laadprobleem is. Toegegeven, het zou zeer zeldzaam moeten zijn dat een browser geen van de lettertypen in de stapel kan vinden en in plaats daarvan deze generieke classificatie moet gebruiken, het is een goede gewoonte om het toch op te nemen om dubbel veilig te zijn. Veel websites gebruiken tegenwoordig weblettertypen die op de site staan, samen met andere bronnen (zoals de afbeeldingen van de site, Javascript-bestand, enz.) Of waarnaar wordt verwezen op een offsite locatie van een lettertype zoals Google Fonts of Typekit. Hoewel deze lettertypen moeten worden geladen omdat u zelf naar de bestanden linkt, wilt u toch een lettertypestapel gebruiken om ervoor te zorgen dat u enige controle hebt over eventuele problemen. Hetzelfde geldt voor 'webveilige' lettertypen die op iemands computer moeten staan (merk op dat de lettertypen die we in dit artikel als voorbeeld hebben gebruikt, waaronder Arial, Verdana, Georgia en Times New Roman, allemaal webveilige lettertypen zijn die moeten worden op de computer van een persoon). Hoewel de kans dat een lettertype ontbreekt erg klein is, kan het specificeren van een lettertypestapel het typografische ontwerp van een site zoveel mogelijk beschermen. Origineel artikel door Jennifer Krynin. Bewerkt door Jeremy Girard. Lettertypestapels en weblettertypen
