Fluid Typography ist eine schicke Art, „Schriftarteigenschaften wie Größe oder Zeilenhöhe zu beschreiben, die sich fließend an die Größe des Viewports anpassen“. Sie ist auch unter anderen Namen bekannt, wie Responsive Typography, Flexible Type, Fluid Type, Viewport Sized Typography, Fluid Typography und sogar Responsive Display Text.
Hier ist ein Beispiel für Fluid Typography, mit dem Sie live experimentieren können (mit freundlicher Genehmigung der MDN-Dokumentation). CSS-Tricks hat sich ebenfalls ausführlich mit Fluid Typography beschäftigt. Aber hier geht es nicht darum, Ihnen Fluid Typography vorzustellen, sondern wie Sie es verwenden. Genauer gesagt möchte ich Ihnen zeigen, wie Sie Fluid Typography in WordPress 6.1 implementieren, das kürzlich eine Fluid Type-Funktion direkt im WordPress Block Editor eingeführt hat.
Öffnen Sie Ihre style.css-Datei, fügen Sie eine Stilregel mit einer schicken clamp()-Anweisung für die font-size-Eigenschaft ein und fertig, richtig? Sicher, das gibt Ihnen fließenden Text, aber um Block Editor-Steuerelemente zu erhalten, die es ermöglichen, Fluid Type überall auf Ihrer WordPress-Website anzuwenden? Das erfordert in diesen "blockifizierten" Zeiten einen anderen Ansatz.
Fluid Typography-Unterstützung in Gutenberg
Einige WordPress-Theme-Entwickler verwenden die clamp()-Funktion, um eine fließende font-size in ihren WordPress-Themes zu definieren, sogar in neueren „Block“-Themes wie Twenty Twenty-Two, Twenty Twenty-Three und anderen.
Aber das Gutenberg-Plugin – das experimentelle Entwicklungen für WordPress Block- und Site-Editor-Funktionen enthält – hat ab Version 13.8 Fluid Typography-Unterstützung eingeführt. Das öffnete die Tür für die Implementierung auf Theme-Ebene, sodass Fluid Type direkt im Block Editor auf bestimmte Elemente und Blöcke angewendet werden kann. CSS-Tricks wurde sogar in der Pull Request erwähnt, der die Funktion zusammengeführt hat.
Diese Arbeit wurde Teil des WordPress-Core in WordPress 6.1. Rich Tabor, einer der frühen Befürworter von Fluid Typography im Block Editor, sagt:
[Fluid Typography] ist auch Teil davon, WordPress leistungsfähiger zu machen, ohne es komplizierter zu machen (was wir alle wissen, dass das ziemlich schwierig ist). […] Fluid Typography funktioniert einfach. Eigentlich finde ich, dass es großartig funktioniert.
Dieser Make WordPress-Beitrag hebt den Ansatz hervor, der zur Unterstützung der Funktion auf Blockebene verfolgt wurde, sodass eine fließende Schriftgröße standardmäßig dynamisch auf Blöcke angewendet wird. Dies hat natürlich einige Vorteile:
- Es bietet Theme-Autoren eine Möglichkeit, Fluid Typography zu aktivieren, ohne sich Gedanken über die Implementierung im Code machen zu müssen.
- Es wendet Fluid Typography auf bestimmte typografische Entitäten, wie Elemente oder Blöcke, auf wartungsfähige und wiederverwendbare Weise an.
- Es ermöglicht Flexibilität bei den Schriftgrößen-Einheiten (z. B.
px,rem,emund%).
Da diese neue Funktion im WordPress Block Editor standardmäßig verfügbar ist, können Theme-Autoren eine einheitliche Fluid Typography ohne zusätzlichen Code anwenden.
Blöcke, die Typografie- und Abstände-Einstellungen unterstützen
Gutenberg 14.1 wurde am 16. September 2022 veröffentlicht und führte typografische Einstellungen für eine Reihe von Blöcken ein. Das bedeutet, dass die Text-Einstellungen für diese Blöcke zuvor in CSS festgelegt waren und auch in CSS geändert werden mussten. Aber diese Blöcke bieten nun Schrift- und Abstands-Steuerelemente in der Block Editor-Oberfläche.
Diese Arbeit soll derzeit in WordPress 6.1 integriert werden, wie in diesem Make WordPress Blogbeitrag detailliert beschrieben. Und damit verbunden ist eine erweiterte Anzahl von Blöcken, die Typografie-Unterstützung bieten.
Fluid Type in einem WordPress Block Theme deklarieren
Wie nutzen wir also diese neue Fluid Typography in WordPress? Die Antwort liegt in theme.json, einer relativ neuen Datei, die speziell für Block Themes gilt und eine Reihe von Theme-Konfigurationen in Schlüssel-Wert-Paaren enthält.
Betrachten wir eine Regel für eine große Schriftart in theme.json, bei der contentSize: 768px und wir mit einem widesize: 1600px Layout arbeiten. So können wir eine CSS font-size mit der clamp()-Funktion angeben:
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fontSizes": [
{
"name": "Large",
"size": "clamp(2.25rem, 6vw, 3rem)",
"slug": "large"
}
]
}
}Ab WordPress 6.1 werden nur die Einheiten rem, em und px unterstützt.
Das ist großartig und funktioniert, aber mit der neuen Fluid Type-Funktion würden wir tatsächlich einen anderen Ansatz verfolgen. Zuerst aktivieren wir Fluid Typography unter settings.typography, das eine neue fluid-Eigenschaft hat:
"settings": {
"typography": {
"fluid": true
}
}Dann geben wir unsere settings.fontSizes wie zuvor an, aber mit einer neuen fluidSize-Eigenschaft, in der wir die min- und max-Größenwerte für unseren Fluid Type-Bereich festlegen können.
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fontSizes": [
{
"size": "2.25rem",
"fluidSize": {
"min": "2.25rem",
"max": "3rem"
},
"slug": "large",
"name": "Large"
}
]
}
}Das ist eigentlich alles. Wir haben gerade Fluid Type zu einer Schriftgröße namens „Large“ hinzugefügt, mit einem Bereich, der bei 2.25rem beginnt und bis zu 3rem skaliert. Nun können wir die „Large“-Schriftart auf jeden Block mit Schriftarteinstellungen anwenden.
Wie funktioniert das unter der Haube? Rich Tabor bietet eine gute Erklärung, ebenso wie dieser Pull Request auf GitHub. Kurz gesagt, WordPress wandelt die theme.json-Eigenschaften in die folgende CSS-Regel um:
.has-large-font-size {
font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);
}…die auf das Element angewendet wird, z. B. ein Absatzblock.
<p class="has-large-font-size">...</p>Anfangs fiel es mir schwer, das Konzept der CSS clamp()-Funktion zu verstehen und zu begreifen, ohne auch die Funktionen min(), max() und calc() zu lernen. Dieses Rechner-Tool hat mir sehr geholfen, besonders bei der Bestimmung der Werte, die ich in meinen eigenen Theme-Projekten verwenden sollte.
Zu Demonstrationszwecken verwenden wir den Rechner, um unseren font-size-Bereich zu definieren, sodass die Größe bei einer Viewport-Breite von 768px 36px und bei einer Viewport-Breite von 1600px 48px beträgt.
Der Rechner generiert automatisch das folgende CSS:
/* 36px @ 768px increasing to 48px @ 1600px */
font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);Der Rechner bietet Optionen zur Auswahl der Eingabe-Einheiten wie px, rem und em. Wenn wir die rem-Einheit wählen, generiert der Rechner den folgenden clamp()-Wert:
/* 2.25rem @ 48rem increasing to 3rem @ 100rem */
font-size: clamp(2.25rem, calc(2.25rem + ((1vw - 0.48rem) * 1.4423)), 3rem);Diese Minimal- und Maximalwerte entsprechen also den fluidSize.min und fluidSize.max Werten in theme.json. Der min-Wert wird bei Viewports angewendet, die 768px breit oder schmaler sind. Dann skaliert die font-size nach oben, wenn die Viewport-Breite wächst. Wenn der Viewport breiter als 1600px ist, wird der max-Wert angewendet und die font-size wird dort gekappt.
Beispiele
Es gibt detaillierte Testanweisungen im zusammengeführten Pull Request, der die Funktion eingeführt hat. Es gibt noch mehr Testanweisungen in Justins Tadlocks Vorab-Beitrag auf Make WordPress.
Beispiel 1: Festlegen einer neuen Fluid-Schriftart-Einstellung
Beginnen wir mit Justins Anweisungen. Ich habe eine modifizierte Version des Standard-Themes Twenty Twenty-Three verwendet, das sich gerade in der Entwicklung befindet.
Stellen Sie zunächst sicher, dass wir das Gutenberg-Plugin (13.8 und höher) oder WordPress 6.1 ausführen, und aktivieren Sie dann Fluid Type unter der Eigenschaft settings.typography.fluid in der Datei theme.json:
{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fluid": true
}
}
}Fügen wir nun die Beispiele für settings.typography.fontSizes hinzu:
{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fluid": true
"fontSizes": [
{
"name": "Normal",
"size": "1.125rem",
"fluid": {
"min": "1rem",
"max": "1.5rem"
},
"slug": "normal"
}
]
}
}
}Wenn alles korrekt funktioniert, können wir nun in den WordPress Block Editor wechseln und die Schriftart-Einstellung „Normal“ auf unseren Block anwenden:
Schön! Und wenn wir das Element im Frontend speichern und inspizieren, ist hier das Markup:
Sehr gut. Stellen wir nun sicher, dass das CSS tatsächlich vorhanden ist:
Gut, gut. Machen wir diese CSS-Benutzerdefinierte-Eigenschaft sichtbar, um zu sehen, ob sie wirklich skaliert:
Sieht so aus, als ob alles so funktioniert, wie wir es wollen! Schauen wir uns ein weiteres Beispiel an…
Beispiel 2: Ausschließen einer Schriftart-Einstellung von Fluid Type
Dieses Mal folgen wir den Anweisungen aus dem zusammengeführten Pull Request mit einem Hinweis auf dieses Beispiel von Carolina Nymark, das zeigt, wie wir Fluid Type für eine bestimmte Schriftarteinstellung deaktivieren können.
Ich habe das empty theme wie in den Anweisungen empfohlen verwendet und die Datei theme.json zum Testen geöffnet. Zuerst aktivieren wir Fluid Type genau wie zuvor:
{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1000px"
},
"typography": {
"fluid": true
}
}
}Dieses Mal arbeiten wir mit einem kleineren wideSize-Wert von 1000px anstelle von 1600px. Das sollte uns ermöglichen, Fluid Type in einem exakten Bereich zu sehen.
Okay, nun zu den benutzerdefinierten Schriftgrößen unter settings.typography.fontSizes:
{
"version": 2,
"settings": {
"typography": {
"fluid": true,
"fontSizes": [
{
"size": ".875rem",
"fluid": {
"min": "0.875rem",
"max": "1rem"
},
"slug": "small",
"name": "Small"
},
{
"size": "1rem",
"fluid": {
"min": "1rem",
"max": "1.5rem"
},
"slug": "normal",
"name": "Normal"
},
{
"size": "1.5rem",
"fluid": {
"min": "1.5rem",
"max": "2rem"
},
"slug": "large",
"name": "Large"
},
{
"size": "2.25rem",
"fluid": false,
"slug": "x-large",
"name": "Extra large"
}
]
}
}
}Beachten Sie, dass wir die Fluid Type-Funktion nur für die Schriftart-Einstellungen „Normal“, „Medium“ und „Large“ angewendet haben. „Extra Large“ ist die Ausnahme, bei der das fluid-Objekt auf false gesetzt ist.
Was WordPress von hier aus tut – über die Gutenberg Style Engine – ist, die von uns gesetzten Eigenschaften in CSS clamp()-Funktionen für jede Schriftart-Einstellung umzuwandeln, die für Fluid Type aktiviert wurde, und einen einzigen Größenwert für die Extra Large-Einstellung.
--wp--preset--font-size--small: clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 0.24), 1rem);
--wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.48rem) * 0.962), 1.5rem);
--wp--preset--font-size--large: clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem);
--wp--preset--font-size--x-large: 2.25rem;Schauen wir uns das Markup im Frontend an:
Guter Anfang! Bestätigen wir, dass die Klasse .has-x-large-font-size von Fluid Type ausgeschlossen ist:
Wenn wir die Variable --wp--preset--font-size--x-large sichtbar machen, sehen wir, dass sie auf 2.25rem gesetzt ist.
Das ist genau das, was wir wollen!
Block Themes, die Fluid Typography unterstützen
Viele WordPress Themes nutzen bereits die clamp()-Funktion für Fluid Type sowohl in Block- als auch in Classic-Themes. Ein gutes Beispiel für die Verwendung von Fluid Typography ist das kürzlich veröffentlichte Standard-Theme Twenty Twenty-Three.
Ich habe alle Block Themes aus dem WordPress Block Theme Verzeichnis überprüft und die theme.json-Datei jedes Themes untersucht, um herauszufinden, wie viele Block Themes derzeit Fluid Typography – nicht die neue Funktion, da sie zum Zeitpunkt des Schreibens noch im Gutenberg-Plugin ist – mithilfe der CSS clamp()-Funktion unterstützen. Von den 146 Themes, die ich überprüft habe, verwendete die Mehrheit eine clamp()-Funktion zur Definition von Abständen. Etwas mehr als die Hälfte davon verwendete clamp() zur Definition von Schriftgrößen. Das Theme Alara ist das einzige, das clamp() zur Definition der Layout-Containergrößen verwendet.
Verständlicherweise enthalten nur wenige kürzlich veröffentlichte Themes die neue Fluid Typography-Funktion. Aber hier sind die, die ich gefunden habe, die sie in theme.json definieren:
- Pixl (Automattic) Link zum Repository
- Block Canvas (Automattic)
- Disco (Automattic)
- Rainfall (Automattic)
- Wei (Rich Tabor)
- Frost (WP Engine) Link zum Repository
- Twenty Twenty-Three (WordPress.org)
Und wenn Sie meinen vorherigen Beitrag hier auf CSS-Tricks gelesen haben, wurde das TT2 Gopher Blocks Theme, das ich für die Demo verwendet habe, ebenfalls aktualisiert, um die Fluid Typography-Funktion zu unterstützen.
Ausgewählte Reaktionen auf die WordPress Fluid Typography-Funktionen
Fluid Typography in WordPress auf Ebene der Einstellungen zu haben, ist super aufregend! Ich dachte, ich teile ein paar Gedanken von Leuten aus der WordPress-Entwicklergemeinschaft, die sich dazu geäußert haben.
Matias Ventura, der Lead Architect des Gutenberg-Projekts
Als einer der größten Bemühungen, Rich-Pages in WordPress schön zu publizieren, ist Fluid Typography ein ziemlich großer Gewinn für die Leute, die mit WordPress erstellen – und für diejenigen, die die Inhalte konsumieren.
Automattic-Entwickler Ramon Dodd kommentierte im Pull Request:
Stellen Sie diese Idee Schriftgrößen gegenüber, die auf spezifische Viewport-Größen reagieren, wie sie von Media Queries definiert werden, aber dazwischen nichts tun.
theme.jsonerlaubt Autoren bereits, ihre eigenen Fluid-Schriftgrößenwerte einzufügen. Das wird sich nicht ändern, aber dieser PR bietet es Leuten an, die sich nicht um die Implementierungsdetails kümmern wollen.
Nick Croft, Autor von GenesisWP
Brian Garner, Designer und Principal Developer Advocate bei WPEngine
Einige Entwickler denken, dass einige Funktionen ein Opt-in sein sollten. Jason Crist von Automattic sagt:
Ich liebe die Leistungsfähigkeit von Fluid Typography, aber ich glaube auch nicht, dass es einfach standardmäßig aktiviert sein sollte. Seine Verwendung (und die Details davon) sind wichtige Designentscheidungen, die sorgfältig getroffen werden sollten.
Sie können auch weitere Kommentare in den offiziellen Testanweisungen für die Funktion finden.
Zusammenfassung
Die Fluid Typography-Funktion in WordPress ist zum Zeitpunkt des Schreibens noch in aktiver Entwicklung. Daher sollten Theme-Autoren sie derzeit mit Vorsicht verwenden und mögliche Änderungen erwarten, bevor sie offiziell veröffentlicht wird. Justin warnt Theme-Autoren, die diese Funktion verwenden, und empfiehlt, die folgenden beiden GitHub-Issues im Auge zu behalten:
Es gibt auch noch viel laufende Arbeit an Typografie und anderen designbezogenen WordPress-Tools. Wenn Sie interessiert sind, verfolgen Sie dieses Typografie-Tracking GitHub-Ticket und GitHub-Issues zu Design-Tools.
Ressourcen
Ich habe die folgenden Artikel bei der Recherche zu Fluid Type und der Implementierung durch WordPress als Funktion verwendet.
Tutorials und Meinungen
- How to add Fluid Typography to WordPress Block Themes (Rich Tabor)
- Using a Fluid Type Scale in WordPress Block Themes with Theme.json (Rich Tabor)
- Gutenberg 13.8 Introduces Fluid Typography Support and Revamped Quote Block (WP Tavern)
- Block Font Sizes and Fluid typography (Make WordPress Core)
- Testing and Feedback for the Fluid Typography Feature (Make WordPress Themes)
- Fluid Typography with Gutenberg (Full Site Editing)
- Modern Fluid Typography Using CSS Clamp (Smashing Magazine)
- Fluid Typography Option #24480 (GitHub)
- Block supports: add fluid typography #39529 (GitHub)
CSS-Tricks
- Fluid Typography (Geoff Graham)
- Simplified Fluid Typography (Chris Coyier)
- Consistent, Fluidly Scaling Type and Spacing (Andy Bell)
- A Complete Guide to
calc()in CSS (Chris Coyier)
calc() und verwandte CSS-Funktionen
- Clamp() Calculator (Christopher Kirk-Nielsen)
- Min-Max-Value Calculator (9Elements)
- Fluid-responsive font-size calculator (Web Semantics)
- Fluid typography Scale Calculator (Aleksandr Hovhannisyan)
- Use CSS Clamp to create a more flexible wrapper utility (Piccalilli.li)
- min(), max(), and clamp() are CSS magic! (CSS-Tricks)
- min(), max(), and clamp() CSS Functions (Ahmad Shadeed)