Trick # 516 | Dieser Beitrag beinhaltet 486 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Fluid Typography ist ein Designansatz, bei dem die Grösse, der Zeilenabstand und die Proportionen von Text automatisch an die Grösse der Anzeige oder des Viewports angepasst werden, auf dem er angezeigt wird. Heute möchten wir Ihnen Fluid-Typography vorstellen.
Das Ziel von Fluid Typography ist es, sicherzustellen, dass der Text auf allen Geräten und Bildschirmgrössen optimal lesbar ist und dass die Lesbarkeit nicht durch zu kleine Schriftgrössen oder unangemessene Zeilenabstände beeinträchtigt wird.
Dies geschieht mithilfe von CSS-Regeln, die auf verschiedenen Geräten und Bildschirmgrössen unterschiedliche Schriftgrössen und Zeilenabstände festlegen.
Einen solchen CSS-Block haben wir vorbereitet. Kopieren Sie ihn in das CSS-Stylesheet Ihrer Website. In WordPress können Sie dieses Stylesheet unter Design/Customizer/Zusätzliches CSS bearbeiten:
body {
font-size: clamp(0.875rem, 1.231vw + 0.644rem, 1.875rem);
line-height: clamp(1.313rem, 1.385vw + 1.053rem, 2.438rem);
}Dieser Code ist ein Beispiel. Er bewirkt, dass die Schrift in der Mindestgrösse von 14px bei der kleinsten Viewport-Breite von 300px angezeigt wird. Die Schriftgrösse wird dann bis 30px gesteigert bei der grössten Viewport-Breite von 1600px. Die Zeilenhöhe variiert von 1.5 auf dem kleinsten und 1.3 auf dem grössten Bildschirm. Diese Werte lassen sich übrigens auf fluidtypography.com leicht berechnen.
Hier ein Beispiel. Vergrössern und verkleinern Sie das Browserfenster, um den Effekt zu sehen:
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Zugegeben: De Trick ist nicht ganz ohne. Sie finden aber im Netz zahlreiche Tools, mit welchen Sie passende Fluid-Typographys erstellen können.
Werbung
Werbung
