Lose Your Head - The Client Case

Typografie in Web design

Waarin je (meer) leert over lettertypes, hierarchie, schaal, font-pairing en toegankelijkheid

Aanpak

In deze workshop krijg je een quiz met 9 vragen over web typografie. Weet jij de basisregels voor goede leesbare teksten nog? Hoe werkt de font-stack, en hoeveel font, text en fragmentation properties ken je al?

Daarna gaan we in de les experimenteren met variable fonts. Tot slot ga je met je team experimenteren met de Modular Scale en toepassen op de opdracht van de opdrachtgever.

Variable fonts

Met variable fonts is het mogelijk om verschillende variaties van een lettertype in één enkel bestand te integreren. In plaats van een apart lettertypebestand voor elke breedte, het gewicht of elke stijl van een font, zit het in 1 bestand. Hiermee kan je bijvoorbeeld mooi animeren en hoef je minder verschillende variaties van hetzelfde font te laden, wat goed is voor de performance.

https://github.com/user-attachments/assets/bfef1a0a-cd7c-4189-bfc4-02876a39c821

Een goede uitleg en voorbeelden staan beschreven op de website A Variable Fonts Primer

Ook een duidelijke uitleg met code voorbeelden is te lezen op An Introduction to Variable Fonts

Variable fonts animeren met CSS

1. Check de fonts die je nu in je project hebt met wakamaifondue.com. Bestudeer de eigenschappen van de fonts: Wat voor fonts gebruik jij in je project? WOFF? WOFF2? Hoeveel KB?
2. Is een van de fonts een variable font? Zo niet, zoek dan een variable font om mee te animeren. Bv op fonts.google.com
3. Analyseer de variable axes van het font.
4. Maak de HTML, laad het font en gebruik de font-variation-settings in CSS om het font te animeren.

Gebruik de tutorial Interactivity and Animation with Variable Fonts van Mandy Michael om te leren hoe je een variable font kan animeren.

Modular scale

Een Modular scale is een getal dat de verhouding weergeeft van de typografische hiërarchie.

In het artikel More Meaningful Typography staat een uitgebreide uitleg, en hoe je een modular scale kan toepassen op web design.

Opdracht: Varieren met hiërarchie en de Modular Scale voor jullie opdracht

1. Maak met je team 3 variaties waarbij je verschillende modular scales toepast op jullie opdracht. Gebruik hiervoor de website Typescale.com. Tip: Niet te voorzichtig, laat heel verschillende uitwerkingen zien, dan krijg je weer nieuwe ideeen, en wordt je goed in ontwerpkeuzes overbrengen …
2. Zet de variaties naast elkaar in Figma en noteer de scale.
3. Bespreek de variaties en bedenk met je team wat je wil toevoegen aan jullie styleguide, en/of aan de opdrachtgever wil presenteren.
4. Verwerk de modular scale in de global stylesheet Tip: je kan clamp() gebruiken om een minimale, optimale en maximale waarde mee te geven