NatĂŒrlich konnte ich nicht widerstehen â das Thema ist einfach zu reizvoll. Ich habe den Artikel kurzerhand meinem digitalen Assistenten, dem Kollegen ChatGPT, vorgelegt und ihm die Aufgabe ĂŒbertragen, mir ein eigenes Plug-in fĂŒr meinen Blog zu basteln.
Ja, mir ist klar: Es gibt bereits diverse Lösungen fĂŒr Karussell-Elemente. Aber ich vermute, dass nur die wenigsten davon auf dem von Pascal beschriebenen, bemerkenswert schlanken CSS-Ansatz basieren. Und genau das macht seinen Vorschlag so charmant.
Aktuell ist diese Funktion in Chrome ( ab Version 135 ) verfĂŒgbar. Andere Browser werden voraussichtlich bald folgen. In der Zwischenzeit könnten sie auf bestehende JavaScript-Lösungen zurĂŒckgreifen.
Wenn ihr euch das einmal selbst anschauen wollt: Im erwĂ€hnten Artikel einfach ganz nach unten scrollen. Direkt nach den »verwandten Artikeln« beginnt das kleine Wunderwerk â ein Karussell, das sich aus den beliebtesten BeitrĂ€gen der letzten dreiĂig Tage speist.
Ich mag solche Details, die unaufdringlich Mehrwert bieten. Und wer weiĂ â vielleicht wird aus dem kleinen Nebenprojekt bald ein festes Element meines Blogs. Die ersten Codezeilen stehen jedenfalls schon.
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.
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 zoomals problematisch angesehen?
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.
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.
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.
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:
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.
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.
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.)
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 đ),
Durch einen Blogartikel von Brian Gardner wurde ich auf die neue Version der variablen Webschriftart “Inter” aufmerksam (Version 4.0). Laut Brian soll diese performanter sein als die vorherige.
Ich erkenne die Verbesserung zwar nicht, aber so wichtig ist mir die Performance nicht. GegenwĂ€rtig habe ich InterVariable nicht im Einsatz. Die 338 kb (Einzelschrift ĂŒber 100 kb) sind mir immer noch zu “schwer”. Man kann sie kostenlos downloaden.
Mir ist in diesem Zusammenhang allerdings eine Geschichte aufgefallen, die Design-Amateuren wie mir lange verborgen geblieben ist. SchlieĂlich war ich froh, mich aus diversen Font-Bibliotheken (vornehmlich Google-Fonts) bedienen zu können. Auf die vorhandenen Parameter achtete ich nicht. Meine Devise war: Download, Upload, schreiben.
Blogger, die sich fĂŒrs Innenleben ihres Blogs befassen, wissen, dass Schriftarten ein beliebtes Design-Element darstellen. Leider fĂŒhrt kein Weg daran vorbei, die Dosis kleinzuhalten. Weniger ist mehr.
Damit meine ich nicht etwa nur die Reduzierung der verwandten Fonts und Schnitte, sondern generell das Thema Webfonts.
Viele setzen deshalb die zwar nicht unbedingt spektakulĂ€ren, dafĂŒr jedoch umso flotteren Systemschriftarten ein (system-ui, -apple system, Helvetia, Verdana, Arial und so weiter) und drehen damit an den Performancewerten ihrer Blogs. Was nicht geladen werden muss, muss nicht gemessen werden.
Diejenigen, die solche Systemschriftarten einsetzen, können mithilfe der CSS Eigenschaft “font-feature-settings” am Aussehen einiges verĂ€ndern bzw. aus meiner Sicht schöner machen. Vergleicht einmal die Ausgangsbasis und fĂŒgt dann in eure style.css die folgende Beispielzeile ein Feature âș Aus diesen Beispielen entnommen:
Ich denke, man sieht sofort einen Unterschied. Beim Einsatz der Systemschriften wirken nicht alle Parameter (z.B. ss03). Vielleicht hat auĂer mir sonst noch jemand SpaĂ an solchen Experimenten. Zumal ja immer mehr Blogger lieber auf Systemschriftarten setzen.