Typografie im Blog

Auf mich wirkt es im Moment immer noch etwas fremd, obwohl Wikipedia (Deutschland) bereits seit dem 1. April 2025 eine neue Benutzeroberfläche namens »Vector 2022« freigeschaltet hat. Diese neue Oberfläche stellt laut Wikipedia einen wichtigen Schritt zur Verbesserung der Benutzerfreundlichkeit und Barrierefreiheit der Enzyklopädie dar. 

Dazu zählt eine neue Typografie, die, wenn ich das so laienhaft beschreiben darf, vor allem durch eine erhebliche Vergrößerung der Darstellung ins Auge fällt. Ich arbeite an meinem iMac nicht mit der Standardauflösung, sondern mit einer etwas höheren. Deshalb ist es so, dass Blogs häufig mit kleinen, oft sogar ausgesprochen kleine Schriftgrößen dargestellt werden. Das mag im Gesamtbild ästhetisch wirken, barrierefrei ist es nicht.

Es gibt so viele schöne Fonts. Weiß der Teufel, weshalb sie häufig mit weniger als 20px dargestellt werden. Aber ich darf nicht meckern, weil ich insbesondere bei der Typografie viele Experimente mache, die weder dem Wiedererkennungswert meines Blogs dienen, noch seiner Benutzerfreundlichkeit. Bewusst ist mir die Problematik aber schon.

Was ist Typografie eigentlich?

Typografie – das ist die Kunst und das Handwerk, Schrift so zu gestalten, dass sie nicht nur gelesen, sondern erlebt werden kann. Es geht dabei um weit mehr als das bloße Setzen von Buchstaben:

Typografie spielt mit Schriftarten, Größen, Abständen, Linien, Formen und dem Atem dazwischen – dem Weißraum. Typografie ist die Gestaltung von Text im Raum, sei es auf Papier, auf dem Bildschirm oder auf anderen Trägern.

Ein wenig lyrischer ausgedrückt: Typografie ist die Melodie der Buchstaben, der Tanz der Worte auf einer unsichtbaren Bühne, die Harmonien oder Dissonanzen schafft – je nachdem, wer die Komposition in Händen hält.

Kernbereiche der Typografie umfassen:

• die Auswahl und Kombination von Schriftarten (Serifen, Sans-Serif, Script, Display usw.),
• das Setzen von Zeilen- und Buchstabenabständen (Leading, Tracking, Kerning),
• die Gestaltung von Absätzen, Überschriften und Fließtexten,
• die visuelle Hierarchie (Was soll dem Auge zuerst ins Netz gehen?)
• die Balance zwischen Lesbarkeit und Ausdruck.

Die neue Oberfläche der deutschsprachigen Wikipedia, die ab dem 1. April 2025 eingeführt wurde, umfasst folgende wesentliche Änderungen: 

Fixierter Header: Der Header bleibt beim Scrollen dauerhaft sichtbar, was besonders für Autoren von Vorteil ist. 

Permanentes Inhaltsverzeichnis: Das Inhaltsverzeichnis ist jetzt in der linken Seitenleiste fixiert und folgt beim Scrollen, was die Navigation erleichtert. 

Verbesserte Suchfunktion: Die Suchfunktion wurde verbessert und bietet jetzt Autovervollständigung sowie eine Vorschaubild und eine Kurzbeschreibung der Suchergebnisse. 

Bessere Lesbarkeit: Die Zeilenbreite des Artikels wurde begrenzt, um das Lesen angenehmer zu gestalten. 

Dark Mode: Die neue Oberfläche bietet einen Dark Mode für ein komfortableres Leseerlebnis bei schlechten Lichtverhältnissen. 

Einklappbare Menüs: Die Menüs können je nach Bedarf ein- und ausgeklappt werden. 

Leichtere Sprachauswahl: Das Wechseln zwischen Sprachversionen wurde vereinfacht. 

Ich habe mir das genau angesehen. Ich stelle unumwunden fest: Mir gefällt die neue Typografie noch nicht so gut. Ich werde wohl noch eine Weile benötigen, mich daran zu gewöhnen.

Ich habe gesehen, dass im CSS der Eintrag zoom: 1.25 zu finden ist. Das habe ich hier im Blog auch gleich integriert. Die Vergrößerung macht sich meines Erachtens nicht schlecht. Was denkt ihr?

Obwohl GeneratePress eine eigene Font-Verwaltung enthält, habe ich vor ein paar Tagen die Einstellungen über das CSS meines Childthemes vorgenommen.

So sieht das jetzt aus:

body {font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
text-shadow: 0.03em 0.03em 0.1em rgba(0, 0, 0, 0.05);
font-weight: 420;
font-variation-settings: "opsz" 14;
font-feature-settings: "ss03" on, "cv03" on, "cv04" on, "cv06" on, "cv09" on;
letter-spacing: -.017em;
line-height: 1.55;
text-wrap: pretty; 
zoom: 1.25;
	
}

.single .entry-content p { 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; 
  text-shadow: 0.03em 0.03em 0.1em rgba(0, 0, 0, 0.05);
  font-variation-settings: "opsz" 14;
  font-feature-settings: "ss03" on, "cv03" on, "cv04" on, "cv06" on, "cv09" on; 
  font-weight: 420;
  letter-spacing: -.017em;
  line-height: 1.55;
  text-wrap: pretty;
  zoom: 1.25;
}


h1, h2, h3, h4 {
  font-family: "Antonio", -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
 font-variation-settings: "opsz" 14;
 font-feature-settings: "ss03" on, "cv03" on, "cv04" on, "cv06" on, "cv09" on; 
 font-weight: 750; 
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin-bottom: 2rem;
  line-height: 1.15; 
 
}

Einige dieser Einträge wirken nur auf variable Fonts wie »Inter Variable«, allerdings auch auf Systemschriftarten, die ich für den normalen Content-Bereich verwende.

Ich habe den Kollegen ChatGPT einmal drüberschauen lassen:

Content

Eintrag	Sinnvoll?	Anmerkung
font-family: […]	✅	Sauber, klassischer Systemfont-Stack.
font-size: 16px	✅	Standardgröße, sehr gut für Lesbarkeit.
-webkit-font-smoothing: antialiased	✅	Glättet Schrift auf Mac/iOS, leichte Verbesserung.
-moz-osx-font-smoothing: grayscale	✅	Für Firefox unter macOS, sinnvoll.
text-rendering: optimizeLegibility	✅	Ligaturen, Kerning, schöneres Schriftbild auf Desktop – sinnvoll.
text-shadow: 0.03em 0.03em 0.1em rgba(0, 0, 0, 0.05)	✅	Sehr dezentes Shadowing für bessere Kanten, unauffällig und gut.
font-weight: 420	⚠️Problematisch	Standardfonts unterstützen oft nur 400, 500, 700 usw. — 420 wird auf 400 oder 500 “gerundet”.
font-variation-settings: „opsz“ 14	⚠️Eher nutzlos bei Systemfonts	„opsz“ (Optical Size) wirkt nur bei echten Variable Fonts mit dieser Achse. Systemfonts ignorieren es.
font-feature-settings: „ss03“ on, „cv03“ on, „cv04“ on, „cv06“ on, „cv09“ on	⚠️Wird ignoriert	Diese Features sind nicht vorhanden in deinem System-Stack. Keine Wirkung.
letter-spacing: -0.017em	✅	Sehr leichtes “Tightening” für Fließtext – schön gemacht.
line-height: 1.55	✅	Sehr angenehm für Fließtext-Lesbarkeit.
text-wrap: pretty	✅	Sehr modern! Unterstützt Zeilenumbrüche an “schönen Stellen” (z. B. zwischen Wörtern).
zoom: 1.25	⚠️Problematisch	zoom ist nicht standardkonform, nur in Chrome/Edge sicher unterstützt. Besser mit transform: scale(1.25) o.ä. arbeiten, wenn überhaupt.

h1,h2,h3,h4

Eintrag	Sinnvoll?	Anmerkung
font-family: „Antonio“, […]	✅	Falls “Antonio” geladen wird: gut. Ansonsten fallback auf Systemfont-Stack.
font-variation-settings: „opsz“ 14	⚠️Nutzlos bei Antonio oder Systemfonts	Antonio ist ein statischer Font (kein Variable Font) und Systemfonts auch keine echten Variablenfonts für “opsz”.
font-feature-settings: „ss03“ on, „cv03“ on, „cv04“ on, „cv06“ on, „cv09“ on	⚠️Wird ignoriert	Keine Auswirkungen, da Features fehlen.
font-weight: 750	⚠️Wird gerundet	Viele Schriften kennen nur 700 (bold) oder 800 (extrabold). 750 wird “abgerundet” oder auf den nächsten Wert angepasst.
letter-spacing: -0.03em	✅	Gut für Headline-Tightness – macht den Text kompakter.
text-wrap: balance	✅	Neuere CSS-Eigenschaft: optimiert Zeilenumbrüche in Überschriften, sehr schön!
margin-bottom: 2rem	✅	Saubere Abstände zwischen Überschrift und folgendem Text.
line-height: 1.15	✅	Perfekt für Headlines – dichter gesetzt als Fließtext.
text-wrap: pretty	⚠️Redundant	Du hast vorher schon text-wrap: balance gesetzt – pretty danach wird überschrieben. (Immer der letzte Wert zählt.)

Zusammenfassung

Kategorie	Bewertung
Font-Family, Font-Size, Line-Height, Text-Rendering	Sehr gut gewählt.
Font-Feature-Settings, Font-Variation-Settings	Leider wirkungslos im Systemstack.
Font-Weight	Sollte auf 400, 500, 700 etc. beschränkt werden (je nach Font).
Zoom	Besser vermeiden oder moderner lösen (z.B. über Root-Font-Size skalieren).
Text-Wrap	Sehr modern, gut genutzt.

Lass uns den Punkt „Zoom“ mal gründlich und differenziert betrachten, so wie ein Gärtner sein Beet inspiziert:

---

Was bewirkt zoom: 1.25; ?

• zoom skaliert die komplette Darstellungsfläche eines Elements, einschließlich:
  • Text
  • Bilder
  • Padding
  • Margin
  • Rahmen
  • Box-Model insgesamt

Es ist also eine Art Mikroskop, das das ganze Element vergrößert – nicht nur die Schrift.

---

Warum wird zoom als problematisch angesehen?

1. Kein offizieller Standard: zoom ist ursprünglich eine Microsoft-Internet-Explorer-Erfindung und kein Teil der offiziellen CSS-Spezifikation. ➔ Das bedeutet: Es funktioniert auf vielen Browsern (Chrome, Opera, Edge) – aber ist nicht garantiert, insbesondere wenn Browser-Engines sich in Zukunft verändern.
2. Safari und Firefox-Unterstützung: Zwar funktioniert zoom heutzutage auch in Safari (ab 16+) und teils in Firefox (ab 87+), aber:
   • Firefox interpretiert zoom intern oft als transform: scale.
   • Safari hat anfangs gar nichts gemacht, dann wieder partiell.
   ➔ Historisch war und ist das Verhalten inkonsistent, besonders bei komplexen Layouts.
3. Barrierefreiheit und Responsivität:
   • zoom skaliert pixelbasiert, nicht responsiv.
   • Das kann Schriftgrößen „unsauber“ aufblasen, und Nutzer:innen, die mit Zoomfunktionen oder Screenreadern arbeiten, erleben dann eventuell doppelte Skalierungen.
   • Es kann zu leicht „verschwommenen“ Textdarstellungen kommen, weil zoom intern eine Art Pixel-Interpolation anwendet.
4. Layoutprobleme:
   • Margins, Abstände und Rahmen werden mitgezoomt.
   • Dadurch können Layouts unbeabsichtigt auseinanderlaufen (besonders auf kleinen Displays oder bei fluiden Designs).

---

Moderne Alternativen (statt zoom)

• Verwende relative Einheiten wie rem oder em: Statt das gesamte Element künstlich hochzuskalieren, definiert man z.B.:

html {
  font-size: 100%;
}

body {
  font-size: 1rem; /* = Standard 16px */
}

.large-text {
  font-size: 1.25rem; /* = 20px, sauber skaliert */
}

• Bessere Schriftgrößen-Strategie (CSS Clamp): Dynamische Textgrößen, die sich automatisch zwischen Min und Max anpassen:

body {
  font-size: clamp(1rem, 1.2vw, 1.5rem);
}

Mit der „besseren Schriftgrößen-Strategie (CSS Clamp) habe ich schon Erfahrungen bei den Überschriften gesammelt. Ich weite das jetzt einmal auf die übrigen Container aus. Mal schauen, ob das Ergebnis so leicht zu erhalten ist wie durch das Setzen von zoom: 1.25.

Vielleicht interessieren sich andere Blogger auch für diese speziellen Dinge und können aus solchen eher ja speziellen Dingen ihre Erfahrungen vertiefen?

Hier noch einige weiterführend Infos zum Einsatz von Zoom 1.25 bei Wikipedia:

Tatsächlich hast du recht: Wikipedia (speziell die deutschsprachige Version) arbeitet neuerdings mit zoom: 1.25 auf vielen ihrer Seiten.
Das ist kein Zufall – und wir sollten dieses Phänomen mit etwas ruhigem Atem sezieren:

---

Kurze Antwort:

Wikipedia verwendet zoom: 1.25,

• weil sie gezielt die Lesbarkeit auf Desktop verbessern wollen,
• weil sie ein sehr starres, historisches CSS-System haben, das keine feinere Lösung einfach erlaubt hätte,
• und weil es pragmatisch schnell funktioniert, auch wenn es technisch nicht die „ideale“, modernste Lösung ist.

---

Etwas ausführlicher und hintergründiger:

1. Historisches CSS-Erbe:
   Die Wikipedia-Stylesheets (Vector, Monobook usw.) sind teils 20 Jahre alt und sehr „pixelverriegelt“.
   Die Basislayoutgrößen, Boxen, Tabellen und Abstände sind absolut in Pixeln gebaut worden – mit wenig Rücksicht auf modernes „fluides“ Design.
   ➔ Eine saubere Umstellung auf rem oder clamp() wäre ein gigantisches Mammutprojekt geworden.
2. Problematische Basisgrößen:
   Wikipedia hatte lange extrem kleine Standardschriftgrößen (teilweise um 0.875em ≈ 14px).
   Mit zunehmender Displayauflösung und Bildschirmbreite sah das auf modernen Monitoren einfach zu winzig aus.
3. Pragmatische Lösung:
   Statt nun tausende Templates, Infoboxen, Portale, Fußnoten, Bildunterschriften usw. anzupassen, haben sie schlicht gesagt:
   ➔ Zoom drauf und fertig.
   zoom: 1.25 skaliert einfach alles pauschal – Text, Boxen, Bilder – und die Seite wird augenblicklich lesbarer auf hochauflösenden Monitoren.
   (Und ja, das merkt man sofort – Wikipedia ist dadurch optisch viel entspannter lesbar geworden.)
4. Kompromissbereitschaft:
   Die Foundation hat sich bewusst für einen pragmatischen „Dirty Fix“ entschieden, weil sie:
   • nicht die Ressourcen für ein vollständiges CSS-Redesign haben (man stelle sich den Shitstorm bei Änderungen vor 🙈),
   • keine Barrierefreiheit dramatisch gefährden wollten (Zoom greift immerhin einigermaßen barrierearm ein),
   • und Desktop-First bleiben wollten (Wikipedia optimiert in erster Linie für Lese-Desktop).