Typografie met CSS
Bethuel Heldt, februari 2020
-
Wat
CSS biedt veel tools of hulpmiddelen om tekst in een webpagina op te maken. Deze tekst is bijvoorbeeld niet in de standaard Times of Verdana maar in een font van fonts.google.com. Bovenstaand woord-logo is bijvoorbeeld gemaakt met behulp van CSS. Er zijn in het woord-logo geen afbeeldingen gebruikt. Wil je weten hoe dat werkt? Gebruik de element-inspector van je browser en bekijk welke style declaraties nodig zijn om dit woord-logo te maken.
-
Waarom
Tekst opmaak is minstens zo belangrijk als het gebruik van beeldmateriaal. Het maakt de boodschap van jouw webpagina toegangkelijk en prettig leesbaar. Wij, als mediavormgevers willen onze boodschap meestal visueel ondersteunen. Typografie is daarbij een heel belangrijk middel.
Typografie komt overal voor. Als mediavormgever moet je typografie kunnen toepassen bij zowel print als web. Het doel is hetzelfde. De middelen zijn anders. Bij deze opdracht leer je de style declararies die je kunt gebruiken om tekst voor web op te maken.
-
Hoe
Naast een layout in bijvoobeeld kolommen of één gecentreerde kolom al dan niet met borders en background is het belangrijk dat je de onderstaande CSS-declaraties kent. Deze CSS-declaraties kun je op bijna alle HTML-tags, classes en id's toepassen.
Uiteraard zijn er meer style-declaraties, maar hieronder vind je de meest gebruikte.
font-
- font-size de grootte van jouw font.
- font-weight de dikte van jouw font.
- font-family het lettertype dat je gebruikt.
- font-variant als je kleine kapitalen gebruikt.
- font-style staat je font scheef? Italic of Oblique.
Italic: het lettertype is gemaakt om italic af te beelden door de designer.
Oblique: het gekozen lettertype wordt een beetje scheef gezet, ook al heeft de designer het lettertype niet als italic ontworpen.
text-
- text-decoration meestal een streepje onder de tekst bij een link bijvoorbeeld.
- text-decoration-color de kleur van het streepje onder de tekst.
- text-decoration-style de stijl van het streepje onder de tekst.
- text-align uitlijning van de tekst. Check hier wat je kunt doen met text-align.
- text-indent een inspringing van de eerste tekst regel.
- text-shadow tekst met een schaduw.
- text-transform tekst in uppercase (alles hoofdletter) of lowercase (alles kleine letter) of capitalize (alleen eerste letter is hoofdletter).
meer CSS-declaraties die iets met typografie te maken hebben
- line-height de regelafstand van de tekst.
- letter-spacing de afstand tussen de letters.
- white-space een zin gaat op de volgende regel verder als de zin breder is dan het blok. Met white-space kun je hier ook andere dingen mee doen.
- word-spacing met deze css-declaratie pas je de ruimte tussen woorden aan.
- overflow-wrap of word-wrap (zelfde) als een woord niet binnen een blok (bv een knop) past kun je met deze css-declaratie aangeven dat het woord mag wrappen op de volgende regel.
- list-style-type bepaal wat er staat voor je listing (bolletje, vierkantje, cirkeltje, niets...)
- list-style-position bepaal waar het bolletje staat in je listing.