Hafen 1.0: ein Theme, 38 Looks, null Schriftdateien
Unser Block-Theme verlässt die 0.x-Reihe. Die 1.0 macht aus fünf Farbvarianten ein Look-System mit 38 Gesichtern, stellt die Lesespalte auf Lesbarkeit und bringt die Härtung aus einem echten Praxisumzug mit. Hier steht, was genau drin ist und welche Entscheidungen dahinterstecken.
Ein Theme-Release mit der Nummer 1.0 ist ein Versprechen: Das hier ist fertig gedacht. Hafen läuft seit Version 0.4 auf Produktionsseiten, vom Verband bis zur Coaching-Plattform, und jede dieser Installationen hat Spuren im Theme hinterlassen. Die 1.0 bündelt das zu einem Stand, hinter dem wir ohne Fußnoten stehen. Das Größte darin ist das Look-System.
Von fünf Farbvarianten zu 38 Looks
Stilvarianten kennt fast jedes Block-Theme, und fast überall heißt das: dieselbe Seite in anderen Farben. Uns war das zu wenig, denn der Charakter einer Website hängt mindestens so sehr an Schrift, Form und Raum wie an der Palette. Die 38 Looks in Hafen 1.0 bespielen deshalb vier Gestaltungsachsen: Farbe, Typografie (Schriftpaarung und Größenskala), Form (Eckenradien von scharfkantig bis Pillenform) und Dichte (Abstände, Zeilenhöhe, Textbreite).
Das Ergebnis sind acht Charaktere mit je vier Ausprägungen, plus ein Ausreißer für den Strand: nüchtern-funktional für Dienstleister, warm-erzählerisch für Persönliches, laut-plakativ für Kampagnen, ruhig-seriös für Kanzlei und Beratung, maximal zugänglich, technisch, verspielt, redaktionell. Ein Wechsel ist ein Klick im Website-Editor, die Inhalte bleiben unangetastet, und weil die Radien und Schatten seit 1.0 als Tokens in der theme.json liegen, ziehen Karten, Buttons, Bilder und sogar die Blog-Seitennummerierung in jedem Look konsequent mit.
Null Schriftdateien, und zwar in jedem Look
Hier steckt die vielleicht ungewöhnlichste Entscheidung der 1.0: Alle 38 Varianten nutzen Systemschrift-Stapel. Segoe UI unter Windows, San Francisco auf Apple-Geräten, Roboto unter Android, sorgfältig gepaart und gewichtet, aber ohne einen einzigen Font-Download. Nur der Standard-Look lädt die mitgelieferte Inter, als eine einzige variable Datei vom eigenen Server, ohne Verbindung zu Google Fonts oder irgendeinem Drittserver.
Der Gewinn ist doppelt: Es gibt nichts zu laden und nichts springt beim Laden, und es gibt datenschutzrechtlich schlicht keinen Schriften-Drittanbieter, über den man nachdenken müsste.
Die Kontrastprüfung als Baustopp
38 Looks von Hand auf Lesbarkeit zu prüfen ist illusorisch, also prüft eine Maschine. Ein Prüfwerkzeug legt jede Variante über die theme.json, löst alle Farbwerte auf und misst rund 30 Vordergrund-Hintergrund-Paare, die im Theme tatsächlich vorkommen, gegen WCAG 2.1 AA. Fällt ein Pflichtpaar durch, bricht der Release-Bau ab. Beim allerersten Lauf hat das Werkzeug prompt sechs Kontrastfehler im damals schon freigegebenen Bestand gefunden, die mit 1.0 behoben sind. Genau dafür baut man solche Wächter.
Eine Lesespalte, die dem Text dient
Die auffälligste Änderung für Bestandsseiten: Der Fließtext läuft jetzt in einer 680-Pixel-Spalte mit 18-Pixel-Grundschrift, das sind rund 68 Zeichen je Zeile statt vorher etwa 90. Die Typografie-Faustregel für gut lesbare Zeilen liegt seit Jahrzehnten bei 45 bis 75 Zeichen, und praktisch jede Leseplattform landet dort. Beitragslisten, Aufmacher und breite Blöcke bleiben davon unberührt auf 1180 Pixeln, der Text bekommt zusätzlich einen echten vertikalen Rhythmus: Überschriften binden an ihren Folgeabsatz statt frei im Einheitsabstand zu schweben.
Und weil Lesebreite auch Geschmackssache ist, bleibt sie eine Einstellung: im Website-Editor unter Stile, Layout, dokumentiert in vier empfohlenen Stufen von 620 bis 860 Pixeln. Der Standard ist eine Empfehlung, kein Dogma.
Die Härtung aus dem echten Umzug
In die 1.0 ist außerdem alles eingeflossen, was der Umzug einer gewachsenen Produktionsseite von einem klassischen Theme auf Hafen zutage gefördert hat: ein Seiten-Template für Festbreiten-Altinhalte, ein Embed-Airbag gegen mobile Layoutsprünge durch alte Video-Einbettungen, Anker-Sprünge, die nicht mehr unter dem Sticky-Header verschwinden, und ein Mobilmenü, das auch in dunklen Looks die Theme-Farben trägt. Die komplette Messreihe dazu, mit allen Zahlen und Grenzen, steht in unserer Fallstudie zum Theme-Wechsel.
Was als Nächstes kommt
Die 1.1 ist schon skizziert: komplette Seitenrezepte als Patterns (Startseite, Über uns, Kontakt, Preise zum Zusammenstecken), eine zentrierte Header-Variante und ein Ausbau der Barrierefreiheit Richtung offizieller accessibility-ready-Prüfung. Wer Wünsche hat, ist im Support-Forum des Themes willkommen.
Hafen 1.0 ausprobieren
Im offiziellen WordPress-Theme-Verzeichnis, kostenlos und GPLv2. Installieren, im Website-Editor unter Stile durch die 38 Looks blättern und den eigenen finden.
Häufige Fragen
Ist Hafen wirklich kostenlos?
Ja, vollständig. Hafen steht unter GPLv2 im offiziellen WordPress-Theme-Verzeichnis, ohne Pro-Version, ohne Upsell-Sperren. Alle 38 Looks, alle Patterns und alle Templates sind im kostenlosen Paket enthalten.
Was ist ein Look und wie wechsle ich ihn?
Ein Look ist eine Stilvariante des Themes: ein abgestimmtes Paket aus Farben, Typografie, Eckenradien und Dichte. Du wechselst ihn im Website-Editor unter Design, Stile mit einem Klick, ohne dass sich an deinen Inhalten etwas ändert. Zurückwechseln geht genauso verlustfrei.
Ändert das Update auf 1.0 meine bestehende Website?
Die Inhalte nicht, und dein gewählter Look bleibt gewählt. Sichtbar ändern sich Feinheiten: Die Lesespalte ist mit 680 Pixeln etwas schmaler und die Grundschrift mit 18 Pixeln etwas größer, Überschriften rücken näher an ihren Folgeabsatz, Formulare sind gestaltet. Wer die alte Breite bevorzugt, stellt sie im Website-Editor unter Stile, Layout mit einem Wert zurück.
Warum ist die Lesespalte jetzt schmaler?
Weil lange Zeilen schlecht lesbar sind. Bei der alten Breite standen rund 90 Zeichen in einer Zeile, die Faustregel der Typografie liegt bei 45 bis 75. Die neuen 680 Pixel ergeben etwa 68 Zeichen. Magazin-Raster und breite Blöcke bleiben bei 1180 Pixeln, und die Breite bleibt frei einstellbar, dokumentiert in vier Stufen von 620 bis 860 Pixeln.
