Hafen 1.0: één thema, 38 looks, nul lettertypebestanden
Ons blokthema verlaat de 0.x-reeks. De 1.0 maakt van vijf kleurvarianten een looksysteem met 38 gezichten, zet de leeskolom op leesbaarheid en brengt de verstevigingen uit een echte praktijkmigratie mee. Hier lees je wat er precies in zit en welke keuzes erachter steken.
Een themarelease met het nummer 1.0 is een belofte: dit is doordacht en af. Hafen draait sinds versie 0.4 op productiesites, van vereniging tot coachingplatform, en elk van die installaties heeft sporen in het thema achtergelaten. De 1.0 bundelt dat tot een stand waar we zonder voetnoten achter staan. Het grootste onderdeel daarvan is het looksysteem.
Van vijf kleurvarianten naar 38 looks
Stijlvarianten kent bijna elk blokthema, en bijna overal betekent dat: dezelfde pagina in andere kleuren. Dat vonden wij te weinig, want het karakter van een website hangt minstens zozeer af van letter, vorm en ruimte als van het palet. De 38 looks in Hafen 1.0 bespelen daarom vier ontwerpassen: kleur, typografie (lettercombinatie en groottescala), vorm (hoekafrondingen van scherp tot pilvormig) en dichtheid (witruimte, regelhoogte, tekstbreedte).
Het resultaat: acht karakters met elk vier uitvoeringen, plus één uitschieter voor het strand: nuchter-functioneel voor dienstverleners, warm-verhalend voor persoonlijke sites, luid-opvallend voor campagnes, rustig-serieus voor kantoren en adviesbureaus, maximaal toegankelijk, technisch, speels, redactioneel. Wisselen is één klik in de site-editor, de content blijft onaangeroerd, en omdat de afrondingen en schaduwen sinds 1.0 als tokens in theme.json staan, bewegen kaarten, buttons, afbeeldingen en zelfs de paginanummering van de blog in elke look consequent mee.
Nul lettertypebestanden, en wel in elke look
Hier zit misschien wel de opvallendste keuze van de 1.0: alle 38 varianten gebruiken systeemfont-stacks. Segoe UI onder Windows, San Francisco op Apple-apparaten, Roboto onder Android, zorgvuldig gecombineerd en gewogen, maar zonder één enkele fontdownload. Alleen de standaardlook laadt de meegeleverde Inter, als één enkel variabel bestand vanaf de eigen server, zonder verbinding met Google Fonts of welke externe server dan ook.
De winst is dubbel: er valt niets te laden en er verspringt niets tijdens het laden, en er is privacyrechtelijk simpelweg geen externe lettertypeleverancier om over na te denken.
De contrastcontrole als bouwstop
38 looks met de hand op leesbaarheid controleren is een illusie, dus controleert een machine. Een controletool legt elke variant over de theme.json, lost alle kleurwaarden op en meet zo’n 30 voorgrond-achtergrondparen die daadwerkelijk in het thema voorkomen tegen WCAG 2.1 AA. Komt een verplicht paar er niet doorheen, dan breekt de releasebuild af. Bij de allereerste run vond de tool prompt zes contrastfouten in de toen al vrijgegeven looks, die met 1.0 zijn verholpen. Precies daarvoor bouw je zulke waakhonden.
Een leeskolom die de tekst dient
De opvallendste verandering voor bestaande sites: de lopende tekst staat nu in een kolom van 680 pixels met een basistekst van 18 pixels, dat zijn zo’n 68 tekens per regel in plaats van eerst ongeveer 90. De typografische vuistregel voor goed leesbare regels ligt al tientallen jaren op 45 tot 75 tekens, en vrijwel elk leesplatform komt daar uit. Berichtenlijsten, uitgelichte artikelen en brede blokken blijven onaangetast op 1180 pixels, en de tekst krijgt er een echt verticaal ritme bij: koppen hechten zich aan hun volgende alinea in plaats van vrij op een uniforme afstand te zweven.
En omdat leesbreedte ook een kwestie van smaak is, blijft het een instelling: in de site-editor onder Stijlen, Lay-out, gedocumenteerd in vier aanbevolen stappen van 620 tot 860 pixels. De standaard is een aanbeveling, geen dogma.
De verstevigingen uit de echte migratie
In de 1.0 is bovendien alles verwerkt wat de migratie van een gegroeide productiesite van een klassiek thema naar Hafen aan het licht bracht: een paginatemplate voor oude content met vaste breedte, een embed-airbag tegen mobiele layoutsprongen door oude video-embeds, ankersprongen die niet meer onder de sticky header verdwijnen en een mobiel menu dat ook in donkere looks de themakleuren draagt. De complete meetreeks, met alle cijfers en beperkingen, staat in onze praktijkcase over het wisselen van thema.
Wat er hierna komt
De 1.1 is al geschetst: complete paginarecepten als patterns (homepage, over ons, contact, prijzen om samen te klikken), een gecentreerde headervariant en een uitbouw van de toegankelijkheid richting de officiële accessibility-ready-controle. Heb je wensen, dan ben je welkom op het supportforum van het thema.
Hafen 1.0 uitproberen
In de officiële WordPress-themadirectory, gratis en GPLv2. Installeren, in de site-editor onder Stijlen door de 38 looks bladeren en je eigen look vinden.
Veelgestelde vragen
Is Hafen echt gratis?
Ja, volledig. Hafen staat onder GPLv2 in de officiële WordPress-themadirectory, zonder pro-versie en zonder upsell-blokkades. Alle 38 looks, alle patterns en alle templates zitten in het gratis pakket.
Wat is een look en hoe wissel ik van look?
Een look is een stijlvariant van het thema: een afgestemd pakket van kleuren, typografie, hoekafrondingen en dichtheid. Je wisselt met één klik in de site-editor onder Ontwerp, Stijlen, zonder dat er iets aan je content verandert. Terugwisselen gaat net zo verliesvrij.
Verandert de update naar 1.0 mijn bestaande website?
De content niet, en je gekozen look blijft gekozen. Zichtbaar veranderen er details: de leeskolom is met 680 pixels iets smaller en de basistekst met 18 pixels iets groter, koppen schuiven dichter naar hun volgende alinea en formulieren zijn vormgegeven. Geef je de voorkeur aan de oude breedte, dan zet je die in de site-editor onder Stijlen, Lay-out met één waarde terug.
Waarom is de leeskolom nu smaller?
Omdat lange regels slecht leesbaar zijn. Bij de oude breedte stonden er zo’n 90 tekens op een regel, de vuistregel uit de typografie ligt op 45 tot 75. De nieuwe 680 pixels komen uit op ongeveer 68 tekens. Magazine-rasters en brede blokken blijven op 1180 pixels, en de breedte blijft vrij instelbaar, gedocumenteerd in vier stappen van 620 tot 860 pixels.
