Thema: css

3 Artikel

Mit Pascal Birchler, CSS und ChatGPT zum eleganten Artikel-Karussell

Pascal Birchler hat kĂŒrzlich einen interessanten Artikel unter dem Titel »Erstellen eines CSS-Karussell-WordPress-Blocks« veröffentlicht.

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.

Quelle

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.

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

EintragSinnvoll?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⚠ProblematischStandardfonts 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 ignoriertDiese 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⚠Problematischzoom ist nicht standardkonform, nur in Chrome/Edge sicher unterstĂŒtzt. Besser mit transform: scale(1.25) o.Ă€. arbeiten, wenn ĂŒberhaupt.

h1,h2,h3,h4

EintragSinnvoll?Anmerkung
font-family: “Antonio”, […]✅Falls “Antonio” geladen wird: gut. Ansonsten fallback auf Systemfont-Stack.
font-variation-settings: “opsz” 14⚠Nutzlos bei Antonio oder SystemfontsAntonio 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 ignoriertKeine Auswirkungen, da Features fehlen.
font-weight: 750⚠Wird gerundetViele 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⚠RedundantDu hast vorher schon text-wrap: balance gesetzt – pretty danach wird ĂŒberschrieben. (Immer der letzte Wert zĂ€hlt.)

Zusammenfassung

KategorieBewertung
Font-Family, Font-Size, Line-Height, Text-RenderingSehr gut gewÀhlt.
Font-Feature-Settings, Font-Variation-SettingsLeider wirkungslos im Systemstack.
Font-WeightSollte auf 400, 500, 700 etc. beschrÀnkt werden (je nach Font).
ZoomBesser vermeiden oder moderner lösen (z.B. ĂŒber Root-Font-Size skalieren).
Text-WrapSehr 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).

System- und Webfonts verschönern mit der CSS-Eigenschaft “font-feature-settings”

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:

 html {
        -webkit-font-smoothing: antialiased;
        font-feature-settings: "cv01", "cv02", "cv03", "cv04", "cv05", "cv06" 0, "cv07", "cv08", "cv09", "cv10", "cv12", "cv13", "ss03", "pnum"   ;
      } 

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.

✅ Beitrag gemerkt! Favoriten anzeigen
0