In diesem Artikel:

Dieser Generator für die CSS Clamp() Function kann dynamische Schriftgrößen für Websites mit Responsive Design errechnen. Ergebnis: Stufenlose Schriftgrößen für alle Screen-Sizes.

Die CSS-Funktion Clamp() ist ein leistungsstarkes Werkzeug für Responsive Webdesign. CSS Clamp ist eine mathematische Formel, die stufenlose Schriftgrößen für alle Bildschirmgrößen errechnet. 

Zum Berechnen der gewünschten Schriftgröße wird nur die minimale und die maximale Font Size bestimmt, die auf der Website verwendet werden soll. Zusätzlich kann noch die Viewport-Breite angepasst werden.

CSS Clamp Function Rechner

··· Der Clampner für Webfonts ···

So funktioniert der CSS Clamp Function Rechner:

1.

Wähle die Root Font Size.

Standardmäßig setzen Browser die HTML-Schriftgröße auf 16px. Das bedeutet, dass 1rem (root element font-size) standardmäßig 16px entspricht.
Diese Vorgabe wird auf einigen Websites geändert, indem die Root Font Size von 100% auf 62,5% reduziert wird.
Das hat zur Folge, das 1rem nicht mehr 16px, sondern nur noch 10px entspricht. Lässt sich im Kopf leichter umrechnen, muss jedoch hier berücksichtigt werden!

2.

Bestimme die min. und die max. Bildschirmgröße.

Die Funktion clamp() enthält drei Werte: Einen Minimalwert (MIN), einen Maximalwert (MAX) und einen bevorzugten Wert preferred value (VAL).

In unserem Fall ergibt sich der preferred value aus einer Kombination eines statischen Werts (rem) und einem dynamischen Wert (vw). Die viewport-width ist die Breite des Viewports, diesen Wert geben wir in px an. Beginnend mit dem kleinsten Viewport eines Smartphones, bis hin zum großen Bildschirm. Für die meisten Fälle können die Standart-Eingaben, 320px – 1200px bestehen bleiben.

3.

Min. und max. Schriftgröße bestimmen

Kommen wir nun zu den beiden letzen Werten der Funktion, der minimalen und maximalen Schriftgröße (min. font-size & max. font-size).
Zwischen diesen beiden Werten wird die Clamp Function die jeweils optimale Schriftgröße berechnen. 
Da Pixel (px) nicht die geeignete Größeneinheit für responsive Schrift ist, bestimmen wir die Min. Font Size und die Max. Font Size in rem. Die Verwendung von relativen Einheiten wie rem, führt zu einer besseren Zugänglichkeit und Skalierbarkeit.

4.

Clamp Function berechnen

Sofern die Funktion nicht bereits im Ergebnisfeld angezeigt wird, muss nun noch der Button „Deine Clamp Function“ betätigt werden.

Wie unterstützt der CSS Clamp Rechner responsive Schriftgrößen?


Der CSS Clamp-Rechner ist ein wertvolles Tool, das Webdesigner und Entwickler bei der Erstellung responsiver Websites unterstützt. Er berechnet die optimalen Werte für die Clamp-Funktion, um eine gleichmäßige und ansprechende Typografie über verschiedene Geräte hinweg zu gewährleisten. 


Hier sind einige Vorteile der Verwendung eines Clamp-Rechners:

1. Einfache Berechnung dynamischer Werte

Die manuelle Berechnung von dynamischen Werten kann kompliziert sein, insbesondere wenn man versucht, die ideale Balance zwischen minimalen und maximalen Werten zu finden.

Der CSS Clamp Rechner ist sozusagen der Clampner für diesen Job! Er all diese Berechnungen automatisch durch.

2. Optimale Anpassung an den Viewport

Ein wichtiger Aspekt des responsiven Webdesigns ist die Anpassung an verschiedene Viewport-Größen. Durch die Verwendung von Einheiten wie vw (viewport-width) in Kombination mit clamp(), kann die Schriftgröße stufenlos skaliert werden, abhängig von der Breite des Bildschirms.

3. Verbesserung der Typografie

Die Lesbarkeit und Ästhetik der Typografie auf einer Website ist entscheidend. Mit einem CSS Clamp Rechner können präzise Werte für responsive Schriftgrößen eingestellt werden, damit sie sowohl auf kleinen als auch auf großen Bildschirmen optimal aussehen.

Das führt zu einer konsistenteren und angenehmeren Nutzererfahrung.

4. Reduzierung von Media Queries

Traditionell werden Media Queries verwendet, um unterschiedliche Schriftgrößen für verschiedene Bildschirmgrößen und deren Breakpoints festzulegen. Mit clamp() und einem entsprechenden Rechner können viele dieser Media Queries überflüssig gemacht werden, da die Werte dynamisch angepasst werden.

Praktisches Beispiel

Angenommen, die Font-Size des Body-Textes soll auf der Website angepasst werden. Hier mit den eben genannten Media Query Breakpoints:

p {
  font-size: 16px;
}

@media (min-width: 600px) {
  p {
    font-size: 18px;
  }
}

@media (min-width: 1200px) {
  p {
    font-size: 20px;
  }
}

Mit der CSS Clamp-Funktion und einem CSS Clamp Rechner kann das deutlich einfacher und viel effizienter umgesetzt werden:

p {
  font-size: clamp(1rem, 2.5vw, 2rem);
}

Hierbei sorgt 1rem für die minimale Schriftgröße, 2.5vw skaliert die Schriftgröße dynamisch mit dem Viewport, und 2rem setzt die maximale Schriftgröße fest.

Preferred value anpassen & Schrift barrierefrei machen

Für eine barrierefreie Schrift, sollte der preferred value eine Kombination aus einem dynamischen Wert (vw) und einem statischen Wert (z.B. rem) sein:

clamp(1rem, 8vw + -2rem, 2rem)

Browser-Kompatibilität für clamp()

Die CSS clamp()-Funktion wird von den meisten modernen Webbrowsern unterstützt. Hier ist eine Liste der Browser mit voller Unterstützung:

  • Google Chrome
  • Desktop: Unterstützt ab Version 79
  • Mobile: Unterstützt ab Version 79
  • Mozilla Firefox
  • Desktop: Unterstützt ab Version 75
  • Mobile: Unterstützt ab Version 75
  • Apple Safari
  • Desktop: Unterstützt ab Version 13.1
  • Mobile (iOS Safari): Unterstützt ab Version 13.4
  • Microsoft Edge
  • Desktop: Unterstützt ab Version 79 (Chromium-basierte Version)
  • Mobile: Unterstützt ab Version 79 (Chromium-basierte Version)
  • Opera
  • Desktop: Unterstützt ab Version 66
  • Mobile: Unterstützt ab Version 55
  • Samsung Internet
  • Mobile: Unterstützt ab Version 12.0

Fazit

Die CSS Clamp-Funktion revolutioniert das responsive Webdesign, indem sie eine stufenlose Skalierung und dynamische Anpassung von Schriftgrößen und anderen CSS-Eigenschaften ermöglicht.

Ein Clamp-Rechner ist ein wertvolles Werkzeug für Entwickler, das die Berechnung optimaler Werte vereinfacht und die Notwendigkeit für zahlreiche Media Queries reduziert.

Die Verwendung von clamp() und einem entsprechenden Rechner, macht die Website nicht nur ästhetisch ansprechender, auch die Benutzererfahrung wird erheblich verbessert!

Ähnliche Beiträge