Inhalt

Ich mag Blogs, die Abwechslung wagen – in ihren Themen ebenso wie in ihrem Erscheinungsbild. Wer hier regelmäßig mitliest, weiß oder spürt vermutlich, dass genau diese Abwechslung auch für meinen eigenen Blog zutrifft.

Zugleich schätze ich Blogs, deren äußere Form sich kaum verändert. Dort trägt die Beständigkeit Inhalte, die umso mehr leuchten: Texte voller Empathie, getragen von Begeisterung, manchmal inspirierend wie ein guter Gedanke zur genau richtigen Zeit.

Schöne Webfonts

Ein Element in dieser Harmonie kommt häufig etwas zu kurz. Es sind die eingesetzten Webfonts. Von diesen gibt es (Google, Typekit etc.) eine solche Vielzahl von Möglichkeiten, dass man leicht überfordert sein kann. Viele Profis setzen, wenn nicht aus juristischen Gründen (Urheberrecht), so vor allem aus Performancegründen Systemschriften ein. Ihr Systemstack sieht dann etwa so aus.

Optimierung

Wer so richtig an der Optik von Webfonts herumschrauben möchte, weiß die inzwischen häufigen variablen Fonts zu schätzen. Ich nutze aktuell »Inter« als variablen Font (nur für den Content in der Artikelansicht). Statt diesen Font über die themenspezifischen Einstellungen von GeneratePress (seit Jahren mein WordPress-Theme) zu verwalten, habe ich diesen Font in mein Child-Theme eingebunden. Das sieht dann so aus:

@media (min-width: 769px) {
@font-face {
font-display: swap;
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
src: url('/wp-content/uploads/generatepress/fonts/inter/InterVariable.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Inter';
font-style: italic;
font-weight: 100 900;
src: url('/wp-content/uploads/generatepress/fonts/inter/InterVariable-Italic.woff2') format('woff2');
}
}
@media (max-width: 768px) {
body, h1,h2,h3,h4,h5,h6 {font-family: system-ui, sans-serif;}
.entry-content p {font-family: system-ui, sans-serif;}
}

Man kann die zur Verfügung stehende Fontstärke (farbige Felder) einschränken, indem man z.B. statt 100 900, 300 700 einsetzt. Das gesamte Spektrum an Schriftstärken steht dann halt nicht mehr zur Verfügung. Leider wird, soweit ich weiß, die gesamte Schriftart geladen, so dass man durch diese Reduzierung der Spannweite in dieser Hinsicht nichts gewinnt. Die Schriftart hat je Schriftschnitt ein Gewicht von über 350 kB. Das ist viel.

Performance

Damit dies nicht dazu führt, dass bei Geschwindigkeitsmessungen insbesondere die mobile Ansicht nicht unnötig belastet wird, habe ich mir gedacht, ich nutze für die mobile Ansicht die Systemschrift, für den Desktop die variable Ausführung des Webfonts Inter.

Ich hoffe, der Gedanke ist halbwegs nachvollziehbar und verständlich beschrieben. Die Informationen habe ich einer Vielzahl an Hintergrundinformationen zu diesem Thema entnommen.

Durch @media (min-width: 769px) {} wird die Schriftart Inter nur für die Desktop-Ansicht verwendet. @media (max-width: 768px) {} regelt die Verwendung des Systemstacks für mobile Geräte.

Silbentrennung & Zeilenmaß

Eigenschaft	Wirkung	Typografischer Effekt
hyphens: auto;	Aktiviert automatische Silbentrennung	Ruhigere rechte Kante, weniger Löcher im Blocksatz
hyphenate-limit-lines: 2;	Max. 2 aufeinanderfolgende Zeilen mit Trennung	Verhindert »Trennungsstottern«
hyphenate-limit-zone: 8%;	Trennung erst, wenn ≥ 8 % der Zeile leer bliebe	Vermeidet unnötige Trennstriche
hyphenate-limit-chars: auto 5;	Mind. 5 Zeichen nach dem Trennstrich	Erhält Worterkennung und Lesefluss
max-width: 65ch;	Maximale Zeilenlänge	Optimales Lesemaß für Fließtext

Absatztypografie

Eigenschaft	Wirkung	Wahrnehmung
font-weight: 385;	Leicht über Regular	Etwas mehr Präsenz ohne »Bold-Gefühl«
letter-spacing: -0.025em;	Minimal enger	Kompaktere Wortbilder, weniger Luft
line-height: 1.58;	Großzügiger Zeilenabstand	Entspannter Lesefluss, bessere Orientierung

Schrift-Rendering & Glättung

Eigenschaft	Wirkung	Praxis
-webkit-font-smoothing: antialiased;	Feineres Rendering (WebKit)	Weniger harte Kanten
-moz-osx-font-smoothing: grayscale;	Einheitliches Rendering (macOS)	Ruhigerer Grauwert
text-rendering: optimizeLegibility;	Aktiviert Ligaturen & Kerning	Bessere Wortformen
font-synthesis: none;	Keine künstlichen Schnitte	Verhindert Fake-Bold/Fake-Italic

Variable Font & Mikrotypografie

Eigenschaft	Wirkung	Bedeutung
font-variation-settings: »opsz« 12;	Optische Größe	Optimiert Schrift für Lesetext
word-spacing: 0.03em;	Minimal mehr Wortabstand	Reduziert optische Verdichtung
font-feature-settings: ss01, cv…	Stil- & Zeichenvarianten	Humanere, individuellere Glyphen

font-feature-settings: 'ss01', 'cv10', 'cv11', 'cv12', 'cv13', 'cv01', 'cv02', 'cv03', 'cv04', 'cv05';

Inter font family Quelle

Von besonderem Interesse waren für mich die font-feature-settings. Für den variablen Inter-Font habe ich damit viel experimentiert und aus meiner Sicht dem Font letztlich eine andere Charakteristik verliehen. Am iMac wirkt die Schrift attraktiv und nicht so alltäglich. Ich habe sie unter einigen verschiedenen Browsern getestet. Ob der Font auch auf Windows-Rechnern oder auf Android-Handys gut aussieht, weiß ich im Moment nicht so genau. Unter Linux klappt es jedenfalls.

Lesbarkeit und Ruhe

Ich versuche, meine Typografie konsequent auf Lesbarkeit, Ruhe und Textfluss zu optimieren. Ob mir das gelingt, können nur die Leser*innen entscheiden.

Die hier angewendeten Regeln sind durchaus komplex und sollten den individuellen Gegebenheiten angepasst werden. Silbentrennung zügelt den Blocksatz, das Zeilenmaß schützt die Augen, Mikrotypografie verleiht dem Text Haltung. Das zähle ich als Designelement.