logo
  • Home
  • Over ons
  • Contact

Weekly Nerd

  • Wat van de Weekly Nerd sprekers* ga je meenemen, waarmee wil je gaan oefenen...

    Ik ga gebruik maken van de GSAP library, dit omdat werken met animaties altijd leuk is en het maakt ook je website wat proffesioneler.

    Tijdens mijn volgende project wil ik ook de methodes van Jeremy Keith toepassen. Bijvoorbeeld de knoppen declaratief houden, dus alleen javascript toevoegen voor gedrag.

    Ook wil ik de methodes meenemen van Kilian Valkhof die praat over de "Rule of least power" en zijn Geavanceerde css technieken.

    De uitkomst van de Hackaton met daarbij jouw inbreng en nieuwe inzichten.

    Tijdens de hackaton heb ik mij gefocust op twee nieuwe technieken. Namelijk siblin index en anchor positioning. Daarnaast heb ik mij ook ingezet voor het maken van de podium en de scherm derachter.

    De gordijnen zijn gemaakt met een sibling index. In versie 1 gebruik ik geen sibling index en in versie 2 wel dit ziet er zo uit:

     
    Versie 1                                                                        Versie 2
    animation-delay:  calc(var(--index) * .5s);               animation-delay: calc(sibling-index() * 200ms);    
    &:nth-child(1){--index: 1;}
    &:nth-child(2){--index: 2;}
    &:nth-child(3){--index: 3;}
    &:nth-child(4){--index: 4;}
    &:nth-child(5){--index: 5;}
    &:nth-child(6){--index: 6;}
    &:nth-child(7){--index: 7;}
    &:nth-child(8){--index: 8;}
    &:nth-child(9){--index: 9;}
    &:nth-child(10){--index: 10;}
    &:nth-child(11){--index: 11;}
    &:nth-child(12){--index: 12;}
    &:nth-child(13){--index: 13;}  
                    
    • Podium en gordijnen v1.

      op hover gaan de gordijnen open en dicht.

    • Siblingindex.

      hier gebruik ik sibling index om dan een animation delay te geven waardoor je een wavy effect krijgt.

    • gordijn-v2

      tweede versie en eind versie van de gordijnen.

    • gordijn-v2 openen

      Hier zie je hoe de gordijnen nu open gaan samen met de spotlights.

    • Achtergrond scherm voor de informatie van de vrouwen.

      Hier zie je een soort portfolio waar je de gegevens van de vrouwen terug ziet.

    • Anchor positioning voor de spotlights

      Op hover gaan de spotlights weg zodat je de screen beter kan zien en met anchor positioning gaan ze weer terug naar hun plek op unhover.

  • Een reflectie (2/3) hoe het tot nu tot gaat (grootste leermomenten, viel mee, nog lastig, trots op...).
    • Hoe gaat het tot nu toe

      Ik merk zeker dat ik ben gegroeid in mijn gebruik van code. Ik ben er nu zeker van dat ik alles kan doen met coderen en niet bang hoef te zijn dat het niet lukt. Ik zie nu ook in dat wanneer iets niet lukt dan is er wel altijd een ander oplossing te vinden. De problemen maak ik dan zelf aan en die probeer ik dan op te lossen.

    • Mijn grootste leermomenten

      • Ik heb geleerd hoe belangrijk het is om eerst mobiel first of desktop first te bouwen en niet in het midden beginnen. Het beste is mobile first, hiermee merk ik dat het designen veel simpeler gaat. Mobile first is natuurlijk alles zoveel mogelijk onder elkaar zetten en vervolgens kan je met media queries de grid veranderen naar iets simpels en leuk. Het is natuurlijk altijd leuker om eerst desktop te beginnen, want dan heb je zeker meer ruimte voor creativiteit. Maar dat heb je ook na de mobile first. Met desktop first beginnen heeft natuurlijk zijn voordelen op zijn tijd.

      • Ik maak veel gebruik van de :has selector, dit maakt het gebruik van Javascript onnodig bepaalde functies. Zoals een klik en actie functie of een klik en verdwijn functie bijvoorbeeld.

      • Ik heb geleerd om te kijken naar code met meer begrip. Wanneer ik kijk naar een code kan ik de fout inzien en daar een oplossing bij bedenken.

      • Ik heb geleerd om te werken met position absolute, transform translate en inset. Je kan dus ook gemakkelijk een absolute in een absolute gebruiken. Heerlijk is dat.

      • Ook heb ik veel ervaren met animaties en hoe je dit kan manipuleren door meerdere animaties in een element te plaatsen.

      • Ik heb leren werken met clip mask, gradients, box shadows en border om zo de vormen te creeëren die ik wil gebruiken.

      • Ik weet nu hoe ik

    • Wat viel mee?

      Voor mij viel er niet veel mee. Ten aanzien op dat ik het heel erg leuk vond om te experimenteren en te leren met de technieken die ons is aangeboden. Toch vond ik het lastig om alles te doen wat ik wilde doen omdat wij zo weinig tijd hadden voor de projecten zelf en natuurlijk omdat ik zelf op tijden laks was geweest. Wat er verder mee viel waren de opdrachten van de projecten. Ik vond het wel leuke opdrachten waarin ik mijzelf in kwijt kon raken.

    • Wat vind ik nog lastig?

      • Ik vind het zeker nog lastig om te werken met Jacascript. Nu met de hulp van chatGPT kan ik wel alles doen wat ik wil met Javascript, maar helaas kan ik de code nog niet begrijpen. Het fetchen van data uit een API lukt zeker wel, maar het schrijven van de functionaliteiten kan ik niet uit mijn hoofd.

      • Ook vind ik het lastig om te designen. Soms wil ik teveel waardoor het eerder chaotisch lijkt. Ik loop ook altijd meer vast met het designen dan met het coderen.

      • Ik vind het ook lastig om geordend te blijven. Er moet zeker meer aandacht in de structuur van mijn mappen.

    • Waar ben ik trots op?

      Ik ben trots op de projecten die ik heb gemaakt. Ik ben vooral trots op mijn CSS to the rescue project en mijn API-project. In deze twee projecten heb ik mijzelf heel erg uitgedaagd op een leuke manier. Ik wist niet of ik het zou halen maar toch is het mij gelukt. Alhoewel ik nog meer had willen toevoegen, maar om in zo een korte tijd zoveel te kunnen leren, ervaren en te maken, kan ik wel zeggen dat ik zeker trots kan zijn. Ook ben ik trots op mezelf dat ik toch een doorzettingsvermogen heb kunnen creeëren wat betreft het coderen. Als iets niet lukt dan geef ik niet op tot het wel lukt.

    Drie persoonlijke leerdoelen voor de meesterproef. Die worden onderdeel van de beoordeling. Goed om persoonlijke leerdoelen op verschillende vlakken te kiezen: bijv. inhoud, samenwerken, tooling, lef ... of andere competenties. Geef ook aan hoe je van plan bent om aan elk leerdoel te werken tijdens de meesterproef.

    Ik wil meer gebruik maken van een pen en papier. Ik design wel in code, maar ik merk dat wanneer ik een voorbeeld al heb dat het coderen veel sneller gaat. Want het designen in code laat mij denken aan twee onderwerpen tegelijkertijd. Wat ik wil en wat ik moet maken. Mijn eerste leerdoel is meer tekenen.

    Ik maak geen gebruik van de :root en variabelen in CSS. Ik wil namelijk graag te snel verder en dan geef ik een random kleur. Maar als ik eerst begin met het maken van de :root en het onderzoeken naar kleuren die ik wil gebruiken, dan scheelt dit mij ook weer wat tijd aan het eind van mijn project. Dit zou mijn projecten ook wat meer toegankelijker maken voor anderen en ook voor mezelf.

    Ik wil ook meer aandacht geven aan de structuur en opbouw van mijn documenten. Naar mijn mening vind ik het lekkerder om alles in 1 html te zetten, ik hoef dan alleen ctrl f te klikken en dan vind ik al wat ik zoek. Terwijl met meerdere documenten zoek ik toch wat langer naar wat ik nodig heb. Maar ik weet dat dit niet de juiste manier is. Ik wil dus meer structuur aanbrengen in mijn documenten. Dit maakt mijn project ook weer meer toegankelijker voor anderen en ook wel voor mezelf als ik dit juist aanpak.

cassie evans
  • "GSAP fairy codemother"

  • Lewes, Engeland, Verenigd Koninkrijk

  • cassie blogs
  • gsap

Samenvatting van Cassie GSAP

Algemene GSAP-concepten

  • GSAP Library: Wat je allemaal kunt doen met GSAP – een krachtige JavaScript-animatiebibliotheek.

  • Tween & Timeline: Basisbouwstenen van GSAP. Gebruik tween voor enkele animaties, timeline voor opeenvolgende animaties.

  • Plugins: Extra functionaliteiten zoals scroll, motionPath, en meer.

  • ScrollTrigger: Animaties triggeren op basis van scrollpositie.

  • ScrollSmoother: Maakt scrollen soepeler.

GSAP Utils en methoden

  • gsap.utils.random(-100, 100): Geeft willekeurige waarden tussen -100 en 100.

  • gsap.utils.random([kleur1, kleur2, kleur3]): Random kleurkeuze.

  • gsap.utils.mapRange(): Converteert waarden tussen twee bereiken.

  • gsap.utils.wrap(): Maakt een array loopbaar.

  • gsap.utils.pipe(): Combineert meerdere utility-functies.

  • gsap.utils.snap(): Rondt waarden af naar dichtsbijzijnde stap.

Specifieke technieken

  • gsap.quickSetter & quickTo: Efficiënte manier om waarden direct te updaten – bijv. cursor-volgers.

  • gsap.matchMedia(): Werkt als media queries, om animaties aan te passen per schermgrootte.

  • tl.addPause(): Voeg pauzes toe in een timeline. Handig om animatie te stoppen tot interactie of voorwaarden.

  • Ease functies: Gebruik ease: "rough" voor een grillige beweging, of visueel alternatief voor yoyo-effecten.

Interactie & bediening

  • Control methods: Bijvoorbeeld knoppen gebruiken om animaties te starten, pauzeren of hervatten.

  • Reduce motion: Pas de animaties aan op basis van voorkeuren voor bewegingsreductie.

  • Helper functies: Kleinere tools die animaties gemakkelijker maken.

  • MotionPathHelper: Visualiseer en bewerk bewegingspaden.

Favoriete tip van Cassie

quickHover: Een techniek waarbij hover niet automatisch de animatie uitvoert, maar klaarstaat om te reageren.

cassie evans
  • Erik
  • 🤓 Strategic consultant: Accessibility, Inclusive Design & Design Systems | 🧰 Organizer @ Idea11y

  • Amsterdam Area

  • Erik kroes

Samenvatting – Erik Kroes: Accessibility & Semantiek

Wat is toegankelijkheid?

  • Toegankelijkheid betekent dat iedereen je website kan gebruiken — ook mensen met een beperking.

  • Het is geen alles-of-niets-vraag:

    • Je kunt altijd kleine verbeteringen doorvoeren.

    • Zelfs minimale aanpassingen kunnen al veel verschil maken.

Hoe maak je een site toegankelijk?

  1. Gebruik correcte HTML

    • Gebruik semantische elementen zoals <button>, <a>, <section>, <nav> etc.

    • Vermijd onnodige of complexe ARIA-rollen tenzij echt nodig.

  2. Let op kleurcontrast

    • Tekst moet goed leesbaar zijn tegenover de achtergrond.

    • Gebruik tools om te controleren of je voldoet aan de WCAG-richtlijnen.

  3. Testen = cruciaal

    • Niet alleen met geautomatiseerde tools.

    • Test met screenreaders én echte gebruikers.

Typografie & structuur

  • Gebruik koppen in volgorde (<h1>, <h2>, <h3>...) — sla geen levels over.

  • Zorg voor schaalbare tekst met eenheden als rem in plaats van vaste px.

  • Dit helpt screenreaders én gebruikers die inzoomen of een aangepaste weergave nodig hebben.

Semantiek: HTML-tags bewust kiezen

  • Gebruik bij voorkeur semantische tags:<main>, <article>, <aside>, <footer>, enz.

  • Vermijd generieke elementen zoals <div> en <span> als een beter alternatief beschikbaar is.

  • Beter voor toegankelijkheid én SEO.

cassie evans
  • Jeremy Keith
  • 🤓 Strategic consultant: Accessibility, Inclusive Design & Design Systems | 🧰 Organizer @ Idea11y

  • Amsterdam Area

  • Jeremy keith

Samenvatting van Jeremy Keith – Declarative Design

Declarative vs Imperative Programming

  • Imperatief

    • “Stap voor stap”-instructies, zoals in de meeste programmeertalen (bijv. JavaScript).

    • Volledig controle, maar complexer.

    • Voorbeeld: JS is imperatief.

  • Declaratief:

    • Zeg wat je wilt, niet hoe

    • Minder krachtig maar gemakkelijker te begrijpen (zoals SQL of HTML/CSS)

    • CSS en HTML zijn declaratief – je beschrijft het eindresultaat.

    • “JS should only do what only JS can do” → gebruik JavaScript alleen waar het echt nodig is.

Voorbeelden en tools

  • Button declarative: Maak knoppen standaard declaratief, voeg JS alleen toe voor gedrag.

  • Padding left vs inline start: Gebruik logische eigenschappen (beter voor i18n).

  • Utopia.fyi: Tool voor responsieve typografie en lay-out (min-max schaal).

  • Every-layout.dev: Declaratieve benadering van lay-outs.

  • buildexcellentwebsit.es: Site met principes voor solide declaratieve opbouw.

Denken over denken (meta-reflectie)

  • Analytisch denken = inzoomen, problemen ontleden.

  • Systeemdenken = uitzoomen, grotere verbanden zien.

  • Beide zijn nodig in design en ontwikkeling.

Filosofie van controle

  • “Illusion of control”: Denk je dat je controle hebt, maar het systeem bepaalt.

  • Jeremy hint op het loslaten van micro-control ten gunste van systeemdenken.

cassie evans
  • Julia Miocene
  • 🤓 Strategic consultant: Accessibility, Inclusive Design & Design Systems | 🧰 Organizer @ Idea11y

  • Amsterdam Area

  • Julia miocene

Samenvatting – Julia Miocene: CSS Character Animations

Wie is Julia Miocene?

  • UX Engineer bij GitLab, actief op het UX Paper Cuts-team.

  • Google Developer Expert en Women Techmakers Ambassador.

  • Bekend als CSS-artiest — creëert complexe animaties en illustraties met pure CSS.

  • Populair op platforms als CodePen voor haar technisch indrukwekkende en cartooneske creaties.

Visie op CSS

  • CSS is meer dan styling:

    → Julia toont aan dat je met alleen CSS volledige tekeningen en animaties kunt maken, zonder JavaScript of SVG.

  • Alles bestaat uit divs:

    • Bijv. een hoofd = div

    • Ogen = nested divs

    • Pupillen = weer nested divs

    • Alles wordt opgebouwd via parent-child-structuren

Technieken en CSS-features die ze gebruikt

  • ::before en ::after → voor extra elementen zonder extra HTML.

  • position: relative en absolute → voor het positioneren van onderdelen.

  • transform, rotate, scale, translate → voor beweging en vorm.

  • transform-origin → bepaalt het scharnierpunt van een animatie (bijv. "bottom center" voor zwaaiende armen).

  • clip-path, border-radius, gradients → voor complexe vormen en visuele effecten.

  • Unieke CSS-hacks: zoals driehoeken maken met border, of schaduwen voor diepte.

Haar animatiefilosofie

cassie evans
  • Kilian
  • 🤓 Strategic consultant: Accessibility, Inclusive Design & Design Systems | 🧰 Organizer @ Idea11y

  • Amsterdam Area

  • Kilian valkhof

Kilian Valkhof: "Rule of Least Power"

Thema van de presentatie

  • "Rule of Least Power"

    • Gebruik altijd de minst krachtige technologie die voldoende is voor je doel.

    • Begin dus met HTML, voeg daarna CSS toe, en pas JavaScript toe als het écht nodig is.

Handige tips & technieken uit de presentatie

  • Form Elements & Styling

    • Custom switches & inputs

    • Gebruik appearance: none; om standaard stijlen te verwijderen.

    • input { accent-color: ...; } → pas de kleur aan van checkboxen/radiobuttons.

  • Scroll-gedrag en navigatie

    • scroll-margin-top: 100px;→ Zorgt ervoor dat een element niet strak tegen de bovenkant komt na scrollen met een anchor link.

    • #my-target:target { outline: .1em solid #...; transition: ... }→ Highlight het element waar je naartoe scrollt — handig voor navigatie.

  • Geavanceerde CSS

    • @starting-style→ Specificeer de beginstijl van een animatie, bijvoorbeeld voor modals/dialogs:opacity: 0; transform: scale(0.8);

    • :has()pseudo-class → Gedraagt zich als een if-statement in CSS: Bijv. form:has(input:checked) input { color: red; } → Werkt in moderne browsers zoals Safari en binnenkort Chrome.

  • Custom select styling (Chrome only)

    • ::picker(select) { appearance: base-select; }
    • Geeft je controle over de dropdown-weergave.

cassie evans
  • Niels
  • 🤓 Strategic consultant: Accessibility, Inclusive Design & Design Systems | 🧰 Organizer @ Idea11y

  • Amsterdam Area

  • Niels leenheer

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non ipsam nesciunt a, natus exercitationem repudiandae hic, rerum maxime facilis cumque ad doloremque? Tempora vitae neque vel odio autem ipsa aspernatur.

cassie evans
  • Nienke
  • 🤓 Strategic consultant: Accessibility, Inclusive Design & Design Systems | 🧰 Organizer @ Idea11y

  • Amsterdam Area

  • Nienke de keijzer

Samenvatting – Nienke de Keijzer: Thinking Outside of the Accessibility Box

Over het project

  • Nienke deed onderzoek naar de toegankelijkheid van de GVB-app als afstudeerproject aan CMD (Communicatie & Multimedia Design).

  • Haar bevinding: de app was onvoldoende bruikbaar voor mensen met een beperking.

  • Ze ontwierp een toegankelijke herontwerp van de app, gebaseerd op echte gebruikservaringen.

  • De GVB was zo onder de indruk van haar werk, dat ze haar aanbevelingen hebben overgenomen én haar in dienst namen.

Belangrijkste inzichten

  • Toegankelijkheid ≠ alleen regels volgen → Het gaat om echte bruikbaarheid voor echte mensen.

  • Gebruikers met beperkingen betrekken → Levert inzichten op die je met alleen technische audits niet ontdekt.

  • Kleine aanpassingen (zoals betere contrasten, duidelijke labels) → Kunnen een enorm verschil maken in gebruiksvriendelijkheid.

Aanbevelingen voor ontwerpers

  1. Begin met toegankelijkheid vanaf het begin → Niet als "extraatje" achteraf, maar als kern van je ontwerp.

  2. Test met diverse gebruikersgroepen → Denk aan blinde gebruikers, mensen met motorische of cognitieve beperkingen.

  3. Gebruik semantische HTML → Tags als <nav>, <button>, <main> maken je interface begrijpelijker voor assistieve technologie.

  4. Zorg voor visuele toegankelijkheid

    • Voldoende kleurcontrast.

    • Duidelijke navigatie.

    • Goed leesbare tekstgroottes (en schaalbaar).

Nils Binder
  • Nils Binder
  • 🤓 Strategic consultant: Accessibility, Inclusive Design & Design Systems | 🧰 Organizer @ Idea11y

  • Amsterdam Area

  • Nils binder

Samenvatting – Nils Binder: Design for Flexibility

Over Nils Binder

  • Duitse frontend designer bij 9elements, met een achtergrond in communicatieontwerp, productontwikkeling en CSS-architectuur.

  • Combineert design thinking met wiskundige precisie, en is sterk gericht op typografie en schaalbare structuren.

Tools en werkwijze

Startte in Photoshop, maar werkt nu vooral in Figma:

  • Figma's componentensysteem en auto-layout sluiten goed aan bij CSS-concepten zoals display: flex.

  • Maakt gebruik van consistente eenheden zoals rem, %, px — herkenbaar in zowel design als code.

Technieken in CSS voor flexibele layout

  • Nieuwe CSS-tools voor schaalbaarheid:

    • Functies als min(), max(), clamp() en margin-inline vervangen rigide grids.

    • Voorbeeld:

      
        .wrapper {
        width: min(100% - 3rem, 75rem);
        margin-inline: auto;
      }
                                            
  • Responsieve eenheden:

    • vw, vh, vmin, vmax: gebaseerd op het venster

    • qi, qb, qmin, qmax: gebaseerd op containers (bijv. met container queries) → Deze maken layouts aanpasbaar en schaalbaar op elk schermformaat.

  • Whitespace is waardevol → Lege ruimte is geen verspilling, maar verbetert leesbaarheid en esthetiek.

cassie evans
  • Peter-Paul Koch
  • 🤓 Strategic consultant: Accessibility, Inclusive Design & Design Systems | 🧰 Organizer @ Idea11y

  • Amsterdam Area

  • Peter Paul Koch

Peter-Paul Koch over Web Monetization en Betalen voor het Web

Probleemstelling

  • Waarom zijn websites gratis?

    • Omdat advertenties vaak de enige bron van inkomsten zijn.

    • Dit leidt tot trackers, cookies, datalekken en overmatig gebruik van advertenties.

  • Tegenstelling:

    Iedereen praat over ads en privacyproblemen, maar niemand praat over geld geven aan websites.

Voorstel van Peter Paul Koch

  • Betaal zelf voor websites die je waardevol vindt:

    • Bijvoorbeeld 5 tot 20 cent per dag dat je een site gebruikt.

    • Maak kleine betalingen een gewoonte — als een vorm van digitale dankbaarheid.

    • Dit leidt tot betere content en een gezondere webcultuur.

  • Huidige model (ads + webshops):

    • Zet de maker niet aan tot kwaliteit, maar tot winstmaximalisatie.

    • Webdesign is ondergeschikt aan inkomsten.

Web Monetization als alternatief

    werking

    1. De browser vindt het monetization-linkje.

    2. Start automatisch een betaling via een monetization agent.

    3. De website ontvangt events zolang de gebruiker actief is.

Online betalen – de praktijk

  • Je hebt nodig:

    • Wallet (bijv. via bank of app)

    • Browser-extensie (Chrome, Firefox etc.)

    • Betalingsfrequentie (rate) → Jij bepaalt hoeveel je betaalt.

  • Probleem 1: Wallet & regelgeving

    • Banken zijn wettelijk verplicht jouw identiteit te kennen (KYC – Know Your Customer).

    • Veel beperkingen in waar en hoe je kunt betalen (vooral buiten EU).

  • Vertrouwen is de basis van digitaal geld.

Peter Paul Koch kernboodschap

  • Huidig betaalsysteem = website bepaalt bedrag.

  • Alternatief = gebruiker bepaalt zelf wat content waard is.

  • Bewustwording over geld en waarde:

    “Betaal voor wat je leest, anders lees je alleen wat de rijken willen dat je leest.”

rosa

Rosa

Samenvatting – Rosa (Hackers United / E-waste Enthousiast)

Over Rosa

  • Technische maker & hacker met een DIY-mentaliteit.

  • Ooit actief binnen CMD (Communicatie & Multimedia Design).

  • Richt zich op e-waste hergebruik, live performances, workshops en hacklabs.

  • Heeft de capaciteit om alles wat ze bedenkt ook daadwerkelijk zelf te bouwen.

Kernideeën en onderwerpen

  • Hacker-mindset:

    • Niet per se crimineel, maar iemand die systemen begrijpt, manipuleert en opnieuw inzet.

    • Zelf CMS bouwen, eigen servers hosten, onafhankelijk van commerciële platformen.

  • Platform-agnostisch werken: → Geen voorkeur voor specifieke systemen of merken — vrijheid in tools.

  • DIY ethos (Do It Yourself): → Zelf onderzoeken, bouwen, slopen, leren. Onafhankelijkheid als basis.

Technologie & Tools

  • Audio-hacking: → Experimenteert met audio mixers, input/output combinaties voor 'kut geluid' (= ongebruikelijke of rauwe klanken).

  • ImageMagick: → Open-source command-line tool voor beeldbewerking – als ‘Photoshop via terminal’.

  • Bash: → Terminaltaal voor automatiseren, scriptgebruik en beeldbewerking (bijv. met ImageMagick).

Educatieve benadering

  • "Keep it simple, stupid" (KISS): → Niet onnodig ingewikkeld maken.

  • "Learn by trying": → Praktijkgericht leren, door zelf dingen kapot te maken en weer op te bouwen.

  • Electronics 101: → Basiskennis elektronica en onderdelen – apparaten uit elkaar halen om ze te begrijpen.

Roel Nieskens
  • Roel Nieskens
  • 🤓 Strategic consultant: Accessibility, Inclusive Design & Design Systems | 🧰 Organizer @ Idea11y

  • Amsterdam Area

  • Roel Nieskens

Samenvatting – Roel Nieskens: Typography & Web Fonts

  • Wat is een font eigenlijk?

    • Font = het digitale bestand dat vertelt hoe letters eruitzien.

    • Typeface = het ontwerp van een set letters (bijv. Helvetica). → Een typeface kan dus meerdere font-bestanden hebben (bold, italic, etc.).

Typografische basisbegrippen

  • Glyphs

    • Een glyph is de visuele vorm van een karakter.

    • Eén karakter (zoals “A”) kan meerdere glyphs hebben (bijv. normaal, cursief).

  • Ligatures

    • Samengevoegde tekens (zoals “fi”, “fl”, “æ”).

    • Verbeteren de visuele samenhang in tekst.

    • Discretionary ligatures: meer voor stijl dan leesbaarheid.

  • Kerning

    • Afstand tussen specifieke letterparen.

    • Verbetert leesbaarheid en visuele balans.

OpenType Features (de “magic”)

    Fonts kunnen ingebouwde functies bevatten zoals:

  • Fractions: ½ i.p.v. 1/2

  • Stylistic Sets: alternatieve glyphs voor stijl

  • Access All Alternates: handmatig glyphs kiezen

  • Tabular Figures: cijfers met gelijke breedte (voor tabellen)

  • Oldstyle Figures: cijfers met variabele hoogte, vloeien mee in tekst

  • Small Caps / Superscript / Subscript: ingebouwde stijlen

Sierlijke elementen ("swoopy stuff")

  • Zwierige decoraties zoals swashes aan hoofdletters.

  • Mooi voor titels, handtekeningen of expressieve tekst.

OpenType & Web

  • OpenType = modern fontformaat dat al deze functies ondersteunt.

  • Breed ondersteund in moderne browsers.

  • Geeft ontwerpers veel meer controle over typografie online.

Variable Fonts

  • Eén fontbestand met instelbare eigenschappen:

    • Gewicht (dun ↔ dik)

    • Breedte

    • Cursiefheid

  • Voordelen:

    • Sneller laden (één bestand)

    • Meer precisie en creativiteit

    • Geschikt voor responsief design

Item 2
Item 3
  • Privacy
  • Algemene voorwaarden
  • Cookiebeleid