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« frei­ge­schal­tet hat. Diese neue Oberfläche stellt laut Wikipedia einen wich­ti­gen Schritt zur Verbesserung der Benutzerfreundlichkeit und Barrierefreiheit der Enzyklopädie dar. 

Dazu zählt eine neue Typografie, die, wenn ich das so lai­en­haft beschrei­ben darf, vor allem durch eine erheb­li­che Vergrößerung der Darstellung ins Auge fällt. Ich arbei­te an mei­nem iMac nicht mit der Standardauflösung, son­dern mit einer etwas höhe­ren. Deshalb ist es so, dass Blogs häu­fig mit klei­nen, oft sogar aus­ge­spro­chen klei­ne Schriftgrößen dar­ge­stellt wer­den. Das mag im Gesamtbild ästhe­tisch wir­ken, bar­rie­re­frei ist es nicht. 

Es gibt so vie­le schö­ne Fonts. Weiß der Teufel, wes­halb sie häu­fig mit weni­ger als 20px dar­ge­stellt wer­den. Aber ich darf nicht meckern, weil ich ins­be­son­de­re bei der Typografie vie­le Experimente mache, die weder dem Wiedererkennungswert mei­nes Blogs die­nen, noch sei­ner Benutzerfreundlichkeit. Bewusst ist mir die Problematik aber schon.

Was ist Typografie eigentlich?

Typografie – das ist die Kunst und das Handwerk, Schrift so zu gestal­ten, dass sie nicht nur gele­sen, son­dern erlebt wer­den 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 dazwi­schen – dem Weißraum. Typografie ist die Gestaltung von Text im Raum, sei es auf Papier, auf dem Bildschirm oder auf ande­ren Trägern.

Ein wenig lyri­scher aus­ge­drückt: Typografie ist die Melodie der Buchstaben, der Tanz der Worte auf einer unsicht­ba­ren Bühne, die Harmonien oder Dissonanzen schafft – je nach­dem, 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 visu­el­le Hierarchie (Was soll dem Auge zuerst ins Netz gehen?)
• die Balance zwi­schen Lesbarkeit und Ausdruck.

Die neue Oberfläche der deutsch­spra­chi­gen Wikipedia, die ab dem 1. April 2025 ein­ge­führt wur­de, umfasst fol­gen­de wesent­li­che Änderungen: 

Fixierter Header: Der Header bleibt beim Scrollen dau­er­haft sicht­bar, was beson­ders für Autoren von Vorteil ist. 

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

Verbesserte Suchfunktion: Die Suchfunktion wur­de ver­bes­sert und bie­tet jetzt Autovervollständigung sowie eine Vorschaubild und eine Kurzbeschreibung der Suchergebnisse. 

Bessere Lesbarkeit: Die Zeilenbreite des Artikels wur­de begrenzt, um das Lesen ange­neh­mer zu gestalten. 

Dark Mode: Die neue Oberfläche bie­tet einen Dark Mode für ein kom­for­ta­ble­res Leseerlebnis bei schlech­ten Lichtverhältnissen. 

Einklappbare Menüs: Die Menüs kön­nen je nach Bedarf ein- und aus­ge­klappt werden. 

Leichtere Sprachauswahl: Das Wechseln zwi­schen Sprachversionen wur­de vereinfacht. 

Ich habe mir das genau ange­se­hen. Ich stel­le unum­wun­den fest: Mir gefällt die neue Typografie noch nicht so gut. Ich wer­de wohl noch eine Weile benö­ti­gen, mich dar­an zu gewöhnen. 

Ich habe gese­hen, dass im CSS der Eintrag zoom: 1.25 zu fin­den ist. Das habe ich hier im Blog auch gleich inte­griert. Die Vergrößerung macht sich mei­nes Erachtens nicht schlecht. Was denkt ihr?

Obwohl GeneratePress eine eige­ne Font-Verwaltung ent­hält, habe ich vor ein paar Tagen die Einstellungen über das CSS mei­nes 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 die­ser Einträge wir­ken nur auf varia­ble Fonts wie »Inter Variable«, aller­dings auch auf Systemschriftarten, die ich für den nor­ma­len Content-Bereich verwende.

Ich habe den Kollegen ChatGPT ein­mal drü­ber­schau­en lassen:

Content

Eintrag	Sinnvoll?	Anmerkung
font-fami­ly: […]	✅	Sauber, klas­si­scher Systemfont-Stack.
font-size: 16px	✅	Standardgröße, sehr gut für Lesbarkeit.
-web­kit-font-smoot­hing: antialiased	✅	Glättet Schrift auf Mac/​iOS, leich­te Verbesserung.
-moz-osx-font-smoot­hing: grayscale	✅	Für Firefox unter macOS, sinnvoll.
text-ren­de­ring: optimizeLegibility	✅	Ligaturen, Kerning, schö­ne­res Schriftbild auf Desktop – sinnvoll.
text-shadow: 0.03em 0.03em 0.1em rgba(0, 0, 0, 0.05)	✅	Sehr dezen­tes Shadowing für bes­se­re Kanten, unauf­fäl­lig und gut.
font-weight: 420	⚠️Problematisch	Standardfonts unter­stüt­zen oft nur 400, 500, 700 usw.—420 wird auf 400 oder 500 “gerun­det”.
font-varia­ti­on-set­tings: „opsz” 14	⚠️Eher nutz­los bei Systemfonts	„opsz“ (Optical Size) wirkt nur bei ech­ten Variable Fonts mit die­ser Achse. Systemfonts igno­rie­ren es.
font-fea­ture-set­tings: „ss03” on, „cv03” on, „cv04” on, „cv06” on, „cv09” on	⚠️Wird igno­riert	Diese Features sind nicht vor­han­den in dei­nem System-Stack. Keine Wirkung.
let­ter-spa­cing: ‑0.017em	✅	Sehr leich­tes “Tightening” für Fließtext – schön gemacht.
line-height: 1.55	✅	Sehr ange­nehm für Fließtext-Lesbarkeit.
text-wrap: pret­ty	✅	Sehr modern! Unterstützt Zeilenumbrüche an “schö­nen Stellen” (z. B. zwi­schen Wörtern).
zoom: 1.25	⚠️Problematisch	zoom ist nicht stan­dard­kon­form, nur in Chrome/​Edge sicher unter­stützt. Besser mit trans­form: scale(1.25) o.ä. arbei­ten, wenn überhaupt.

h1,h2,h3,h4

Eintrag	Sinnvoll?	Anmerkung
font-fami­ly: „Antonio”, […]	✅	Falls “Antonio” gela­den wird: gut. Ansonsten fall­back auf Systemfont-Stack.
font-varia­ti­on-set­tings: „opsz” 14	⚠️Nutzlos bei Antonio oder Systemfonts	Antonio ist ein sta­ti­scher Font (kein Variable Font) und Systemfonts auch kei­ne ech­ten Variablenfonts für “opsz”.
font-fea­ture-set­tings: „ss03” on, „cv03” on, „cv04” on, „cv06” on, „cv09” on	⚠️Wird igno­riert	Keine Auswirkungen, da Features fehlen.
font-weight: 750	⚠️Wird gerun­det	Viele Schriften ken­nen nur 700 (bold) oder 800 (extra­bold). 750 wird “abge­run­det” oder auf den nächs­ten Wert angepasst.
let­ter-spa­cing: ‑0.03em	✅	Gut für Headline-Tightness – macht den Text kompakter.
text-wrap: balan­ce	✅	Neuere CSS-Eigenschaft: opti­miert Zeilenumbrüche in Überschriften, sehr schön!
mar­gin-bot­tom: 2rem	✅	Saubere Abstände zwi­schen Überschrift und fol­gen­dem Text.
line-height: 1.15	✅	Perfekt für Headlines – dich­ter gesetzt als Fließtext.
text-wrap: pret­ty	⚠️Redundant	Du hast vor­her schon text-wrap: balan­ce gesetzt – pret­ty danach wird über­schrie­ben. (Immer der letz­te 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 wir­kungs­los im Systemstack.
Font-Weight	Sollte auf 400, 500, 700 etc. beschränkt wer­den (je nach Font).
Zoom	Besser ver­mei­den oder moder­ner lösen (z.B. über Root-Font-Size skalieren).
Text-Wrap	Sehr modern, gut genutzt.

Lass uns den Punkt „Zoom“ mal gründ­lich und dif­fe­ren­ziert betrach­ten, so wie ein Gärtner sein Beet inspiziert:

---

Was bewirkt zoom: 1.25; ?

• zoom ska­liert die kom­plet­te Darstellungsfläche eines Elements, ein­schließ­lich:
  • Text
  • Bilder
  • Padding
  • Margin
  • Rahmen
  • Box-Model ins­ge­samt

Es ist also eine Art Mikroskop, das das gan­ze Element ver­grö­ßert – nicht nur die Schrift.

---

Warum wird zoom als pro­ble­ma­tisch angesehen?

1. Kein offi­zi­el­ler Standard: zoom ist ursprüng­lich eine Microsoft-Internet-Explorer-Erfindung und kein Teil der offi­zi­el­len CSS-Spezifikation. ➔ Das bedeu­tet: Es funk­tio­niert auf vie­len Browsern (Chrome, Opera, Edge) – aber ist nicht garan­tiert, ins­be­son­de­re wenn Browser-Engines sich in Zukunft verändern.
2. Safari und Firefox-Unterstützung: Zwar funk­tio­niert zoom heut­zu­ta­ge auch in Safari (ab 16+) und teils in Firefox (ab 87+), aber:
   • Firefox inter­pre­tiert zoom intern oft als trans­form: scale.
   • Safari hat anfangs gar nichts gemacht, dann wie­der partiell.
   ➔ Historisch war und ist das Verhalten inkon­sis­tent, beson­ders bei kom­ple­xen Layouts.
3. Barrierefreiheit und Responsivität:
   • zoom ska­liert pixel­ba­siert, nicht responsiv.
   • Das kann Schriftgrößen „unsau­ber“ auf­bla­sen, und Nutzer:innen, die mit Zoomfunktionen oder Screenreadern arbei­ten, erle­ben dann even­tu­ell dop­pel­te Skalierungen.
   • Es kann zu leicht „ver­schwom­me­nen“ Textdarstellungen kom­men, weil zoom intern eine Art Pixel-Interpolation anwendet.
4. Layoutprobleme:
   • Margins, Abstände und Rahmen wer­den mitgezoomt.
   • Dadurch kön­nen Layouts unbe­ab­sich­tigt aus­ein­an­der­lau­fen (beson­ders auf klei­nen Displays oder bei flui­den Designs).

---

Moderne Alternativen (statt zoom)

• Verwende rela­ti­ve Einheiten wie rem oder em: Statt das gesam­te Element künst­lich hoch­zu­ska­lie­ren, defi­niert 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 auto­ma­tisch zwi­schen Min und Max anpassen:

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

Mit der „bes­se­ren Schriftgrößen-Strategie (CSS Clamp) habe ich schon Erfahrungen bei den Überschriften gesam­melt. Ich wei­te das jetzt ein­mal auf die übri­gen Container aus. Mal schau­en, ob das Ergebnis so leicht zu erhal­ten ist wie durch das Setzen von zoom: 1.25.

Vielleicht inter­es­sie­ren sich ande­re Blogger auch für die­se spe­zi­el­len Dinge und kön­nen aus sol­chen eher ja spe­zi­el­len Dingen ihre Erfahrungen vertiefen?

Hier noch eini­ge wei­ter­füh­rend Infos zum Einsatz von Zoom 1.25 bei Wikipedia:

Tatsächlich hast du recht: Wikipedia (spe­zi­ell die deutsch­spra­chi­ge Version) arbei­tet neu­er­dings mit zoom: 1.25 auf vie­len ihrer Seiten.
Das ist kein Zufall – und wir soll­ten die­ses Phänomen mit etwas ruhi­gem Atem sezieren:

---

Kurze Antwort:

Wikipedia ver­wen­det zoom: 1.25,

• weil sie gezielt die Lesbarkeit auf Desktop ver­bes­sern wol­len,
• weil sie ein sehr star­res, his­to­ri­sches CSS-System haben, das kei­ne fei­ne­re Lösung ein­fach erlaubt hätte,
• und weil es prag­ma­tisch schnell funk­tio­niert, auch wenn es tech­nisch nicht die „idea­le”, moderns­te Lösung ist.

---

Etwas aus­führ­li­cher und hintergründiger:

1. Historisches CSS-Erbe:
   Die Wikipedia-Stylesheets (Vector, Monobook usw.) sind teils 20 Jahre alt und sehr „pixel­ver­rie­gelt”.
   Die Basislayoutgrößen, Boxen, Tabellen und Abstände sind abso­lut in Pixeln gebaut wor­den – mit wenig Rücksicht auf moder­nes „flui­des” Design.
   ➔ Eine sau­be­re Umstellung auf rem oder clamp() wäre ein gigan­ti­sches Mammutprojekt geworden.
2. Problematische Basisgrößen:
   Wikipedia hat­te lan­ge extrem klei­ne Standardschriftgrößen (teil­wei­se um 0.875em ≈ 14px).
   Mit zuneh­men­der Displayauflösung und Bildschirmbreite sah das auf moder­nen Monitoren ein­fach zu win­zig aus.
3. Pragmatische Lösung:
   Statt nun tau­sen­de Templates, Infoboxen, Portale, Fußnoten, Bildunterschriften usw. anzu­pas­sen, haben sie schlicht gesagt:
   ➔ Zoom drauf und fer­tig.
   zoom: 1.25 ska­liert ein­fach alles pau­schal – Text, Boxen, Bilder – und die Seite wird augen­blick­lich les­ba­rer auf hoch­auf­lö­sen­den Monitoren.
   (Und ja, das merkt man sofort – Wikipedia ist dadurch optisch viel ent­spann­ter les­bar geworden.)
4. Kompromissbereitschaft:
   Die Foundation hat sich bewusst für einen prag­ma­ti­schen „Dirty Fix” ent­schie­den, weil sie: 
   • nicht die Ressourcen für ein voll­stän­di­ges CSS-Redesign haben (man stel­le sich den Shitstorm bei Änderungen vor 🙈),
   • kei­ne Barrierefreiheit dra­ma­tisch gefähr­den woll­ten (Zoom greift immer­hin eini­ger­ma­ßen bar­rie­re­arm ein),
   • und Desktop-First blei­ben woll­ten (Wikipedia opti­miert in ers­ter Linie für Lese-Desktop).