Flüssige Typografie: Verstehen, was es ist, warum und wie man es verwendet
Veröffentlicht: 2022-10-26Responsive Typografie wird immer wichtiger, da die Variabilität der Bildschirmgrößen zunimmt. Aber traditionelle Responsive-Design- Techniken haben ihre Grenzen, was dazu führt, dass immer mehr Menschen flüssige Typografie auf ihren Websites implementieren.
In diesem Beitrag untersuchen wir flüssige Typografie, wie sie funktioniert und wie sie in WordPress implementiert wird.
Was ist Fluidtypografie?
Flüssige Typografie ist eine responsive Typografietechnik, bei der der Text automatisch mit der Bildschirmgröße skaliert wird. Mit zunehmender Bildschirmgröße nehmen die typografischen Werte wie Schriftgröße, Zeilenhöhe und Buchstabenabstand zu. Ebenso nehmen die Werte ab, wenn die Bildschirmgröße kleiner wird.
Flüssige Typografie vs. traditionelle responsive Typografie
Traditionell verwenden Designer Breakpoints, um die Schriftgröße zu bestimmen. Beispielsweise kann eine Website drei Breakpoints verwenden: Mobilgerät, Tablet und Desktop. Haltepunkte werden nicht vom Gerätetyp bestimmt, sondern von der Browserbreite.
Das Problem bei diesem Ansatz besteht darin, dass die Bildschirmgrößen je nach Gerät stark variieren. Daher können Bildschirmgrößen zwischen oder nahe an den Breakpoints oft Herausforderungen im Design darstellen. Beispielsweise könnte ein breiter Tablet-Bildschirm, der fast die Breite eines Desktops hat, mit einer zu klein aussehenden Typografie enden.
Um diesen Herausforderungen zu begegnen, könnten Designer mehr Breakpoints implementieren, aber das führt nur zu komplexerem Code, der schwer zu warten ist.
Wie Fluid Typografie funktioniert
Flüssige Typografie beginnt mit einem Mindestwert und erhöht ihn mit zunehmender Bildschirmbreite, bis er einen festgelegten Maximalwert erreicht. Stellen Sie sich die Werte wie die Geschwindigkeitsbegrenzungen auf einer Autobahn vor. Sie müssen eine Mindestgeschwindigkeit von 45 km/h einhalten. Die Obergrenze beträgt 65 mph, und Sie wählen Ihre Geschwindigkeit basierend auf dem Verkehrsfluss.
CSS-Clamp-Funktion
Flüssige Typografie verwendet die CSS-Clamp-Funktion, um eine automatische Skalierung zu erreichen. Die Klemmfunktion benötigt drei Werte: ein Minimum, ein bevorzugtes und ein Maximum. Der bevorzugte Wert ist eine berechnete Zahl. Die Funktion entscheidet, was der bevorzugte Wert im Verhältnis zur Bildschirmgröße sein muss, während sie ihn zwischen dem Minimum und dem Maximum hält.
Eine Clamp-Anweisung sieht folgendermaßen aus:
Klemme ( Minimum , Bevorzugt , Maximum );
Schauen wir uns an, wie das mit der Schriftgröße funktioniert:
Klemme (1,5 rem, 2 vw + 1 rem, 2,25 rem);
Beachten Sie, dass wir rem-Werte für die Mindest- und Höchstwerte verwenden. Rem-Werte sind besser zugänglich. Wenn jemand seinen Browser zoomt, um die Textgröße zu erhöhen, sollte sich die flüssige Typografie entsprechend anpassen und besser, als wenn Sie die Werte in Pixeln angegeben hätten.
Der bevorzugte Wert ist eine Berechnung. Das „vw“ steht für Viewport, also sind 2vw 2 % der Breite des Viewports.
Bei einer Stammschriftgröße von 16 Pixel und einer Darstellungsbreite von 800 Pixel beträgt unsere bevorzugte Textgröße 32 Pixel oder 2 Rem.
800 Pixel x 0,02 = 16 Pixel (oder 1 Rem)
1 Rem + 1 Rem = 2 Rem (oder 32 Pixel)
Mach dir keine Sorgen. Du musst nicht rechnen. Die CSS-Funktion erledigt das für Sie.
Sie müssen auch nicht Ihre Algebra-Kenntnisse aufbieten, wenn Sie Ihre Stylesheets schreiben. Erwägen Sie, ein Tool wie den Modern Fluid Typography Editor zu verwenden, um die Klammeraussage für Sie zu erstellen.
Das Diagramm im Tool ist ein großartiges Bild, um zu sehen, wie sich der bevorzugte Wert zwischen den Mindest- und Höchstwerten ändert.
Überlegungen zur Verwendung von flüssiger Typografie
Flüssige Typografie ist nicht ohne Fehler. Einige Designer behaupten, dass die Einrichtung mehr Mühe macht, als es wert ist, da Sie mit traditionelleren Methoden ähnliche Ergebnisse erzielen können. Berücksichtigen Sie diese Überlegungen, wenn Sie entscheiden, ob und wie Sie es verwenden.
Wann man flüssige Typografie verwendet
Flüssige Typografie eignet sich hervorragend für Überschriften und Anzeigetext. Die riesigen Textbehandlungen, die sowohl ein Designelement als auch eine Kopie sind, sind der perfekte Anwendungsfall für flüssige Typografie. Sie möchten, dass die Größe und die visuelle Wirkung des Textes der Größe des Bildschirms entsprechen.
Wann man flüssige Typografie nicht verwenden sollte
Auf der anderen Seite funktioniert flüssige Typografie nicht so gut, wenn der Unterschied zwischen den minimalen und maximalen Werten nicht so groß ist. Textelemente wie Fließtext, Tags, Autorennamen und Veröffentlichungsdaten sind wahrscheinlich ziemlich Standard für alle Bildschirmgrößen. Sie können sie mit traditionellem CSS handhaben, anstatt die Clamp-Funktion zu implementieren.
Legen Sie immer einen Fallback-Wert fest
Denken Sie daran, jedes Mal, wenn Sie flüssige Typografie verwenden, immer einen Fallback-Wert einzuschließen, falls der Browser die Clamp-Funktion nicht unterstützt. Alle modernen Browser unterstützen die Clamp-Funktion, aber ein Fallback-Wert gibt zusätzliche Sicherheit, falls der Internet Explorer immer noch hartnäckig ist.
Fließende Typografie in WordPress
Unterstützung für flüssige Typografie wurde in Gutenberg 13.8 hinzugefügt und wird in WordPress 6.1 enthalten sein. Die Fluid-Typografie-Funktion gibt Theme-Autoren die Möglichkeit, skalierbare Schriftgrößen in ihrer theme.json-Datei zu definieren.
Da sich die Funktion noch in der Entwicklung befindet, müssen Sie das Gutenberg-Plugin herunterladen, um Zugriff auf die Beta-Version zu erhalten. In diesem Beitrag des Make WordPress Themes-Teams kannst du mehr darüber lesen, wie du die neuen Fluid-Typografie-Optionen testen und implementieren kannst.
Die Implementierung von fließender Typografie in WordPress ist auf Themenebene am einfachsten. Wenn Sie Ihr eigenes Design erstellen, laden Sie das Gutenberg-Plugin herunter und beginnen Sie mit dem Testen. Machen Sie sich keine Sorgen, wenn das Erstellen Ihres eigenen Designs oder das Schreiben eines Stylesheets für flüssige Typografie Ihre technischen Fähigkeiten ein wenig übersteigt. So wie immer mehr Themen Blöcke und vollständige Seitenbearbeitung umfassen, können Sie davon ausgehen, dass flüssige Typografie Teil neuer Themenversionen sein wird.
Erstellen und testen Sie neue Websites und Typografiestile in WordPress
Webdesigner und -entwickler brauchen einen Raum, um neue Ideen und Designs zu testen, wie z. B. flüssige Typografie. Bei Pressable verstehen wir das. Aus diesem Grund bieten wir allen unseren Kunden unbegrenzte Staging-Sites an . Erstellen Sie so viele, wie Sie benötigen, damit Sie das Erstellen eines neuen Designs testen oder die neuesten Beta-Funktionen in WordPress ausprobieren können. Der Einstieg ist einfach. Wählen Sie einfach Ihren Tarif aus und Sie haben innerhalb weniger Klicks eine Website.
