Die CSS-Funktion clamp() ist eine relative neue Funktion, mit der man einen minimalen und einen maximalen Wert angeben kann. Das kann die Breite eines Elements sein (width), aber man kann die Funktion auch für Schriftgrößen (font-size) verwenden.
Der Browsersupport für die Funktion liegt laut caniuse.com inzwischen bei 90%. Ausnahmen sind der IE11 und einige mobile Browser. Aktuelle Versionen von Firefox, Chrome und Safari kennen die Funktion.
Wie funktioniert clamp?
Mit clamp() kann ich einen Maximalwert und einen Minimalwert für die Schriftgröße angeben. Ich nehme mal px als Einheit, damit man das Beispiel leichter lesen kann. Im echten Leben würde ich rem nehmen.
Wenn ich das CSS unten übersetze, steht da:
„Die Schriftgröße soll mindestens 16px groß sein und maximal 20px groß. Dazwischen soll sich die Schriftgröße fließend vergrößern. Sobald 20px erreicht sind, bleibt die Skalierung stehen.“
p {font-size: clamp(16px, 2vw, 20px);}Code-Sprache: CSS (css)Die Funktion clamp() enthält drei Werte: Einen Minimalwert (MIN), einen Maximalwert (MAX) und einen bevorzugten Wert preferred value (VAL).
p {font-size: clamp(MIN, VAL, MAX);}Code-Sprache: CSS (css)Der rätselhafte „preferred value“
Ich tu mich etwas schwer, den mittleren Wert, den preferred value, zu beschreiben.
1 Wenn man den Wert 1vw als mittleren Wert (preferred value) einträgt, wird die Schrift ab einer Bildschirmbreite von 1600px langsam größer. Drunter tut sich nichts.
p {font-size: clamp(16px, 1vw, 20px);}Code-Sprache: CSS (css)2 Trägt man den Wert 2vw ein, liegt der Breakpoint bei 800px (1600px/2). Ab 800px skaliert die Schrift.
p {font-size: clamp(16px, 2vw, 20px);}Code-Sprache: CSS (css)3 Ändert man die minimalen Wert von 16px auf 14px, liegt der Breakpoint bei 700px (1400px/2) und die Skalierung beginnt dort.
p {font-size: clamp(14px, 2vw, 20px);}Code-Sprache: CSS (css)clamp() mit zwei Breakpoints
Aber was mache ich, wenn ich möchte, dass meine Schrift von 16px nach 20px skaliert und zwar genau zwischen den Breakpoints 600px und 781px?
Auch dafür kann ich den preferred value entsprechend berechnen:
/* Schriftgröße skaliert zwischen 600px und 781px */
p{font-size: clamp(1rem, -2.3149rem + 8.8398vw, 2rem);}Code-Sprache: CSS (css)Ich hab das übrigens nicht selbst ausgerechnet, ich habe ein Tool von Pedro Rodrigez genutzt, das er für einen Artikel auf CSS-Tricks gebaut hat. In dem Artikel wird auch erklärt, wie die Berechnung funktioniert.
Eine Schriftgröße in vw ist nicht barrierefrei
Wird als preferred value nur ein dynamischer Wert (vw) angegeben, klappt das Zoomen, also das Vergrößern der Schriftgröße im Browser, nicht mehr. Damit wäre die Seite nicht mehr barrierefrei und es gibt einen WCAG-Error. Der preferred value sollte eine Kombination aus einem dynamischen Wert (vw) und einem statischen Wert (z.B. rem) sein. So viel ich sehen kann, hat das keinen großen Einfluß auf das Skalierungsverhalten.
p {font-size: clamp(16px, calc(1vw + 1rem), 20px);} Code-Sprache: CSS (css)Fallback für die 10%
Der Browsersupport ist ziemlich gut (90%), aber es ist sinnvoll für die 10% der Browser, die clamp() nicht lesen können, ein Fallback bereitzustellen. Ich würde dazu einfach einen default-Wert vor die clamp-Funktion stellen.
/* Fallback zuerst */
p{font-size: 1rem;}
/* Angabe für Browser, die die Funktion lesen können */
p{font-size: clamp(1rem, -2.3149rem + 8.8398vw, 2rem);}Code-Sprache: CSS (css)Alternative Methoden
Es gibt eine ältere Methode von Mike Riethmuller, die die Funktion calc() nutzt um Schriften stufenlos zu skalieren. Der Browsersupport für calc ist sehr gut (98%). Allerdings braucht man Mediaqueries um die minimale Schriftgröße und die maximale Schriftgröße zu festzulegen.
In dem Beispiel unten ist die minimale Schriftgröße 12px, der maximale Wert ist 24px. Die Schrift fängt bei einem Breakpoint von 400px an zu skalieren, bei 800px ist Schluss.
.test {font-size: 12px}
@media (min-width:400px) and (max-width:800px){
.test {font-size: calc(12px + (24 - 12) * ((100vw - 400px) / (800 - 400)));}
}
@media (min-width:800px){
.test {font-size: 24px}
}Code-Sprache: CSS (css)Diese CSS Anweisung braucht ein paar Zeilen mehr, aber dafür ist sie gut lesbar.
Weitere Methoden gibt es hier: Easy Responsive Typographie. Mit den Sass Mixins arbeite ich momentan.
Fazit
Die CSS-Funktion clamp() kann man gut einsetzen, um die Breite eines Elements (width) dynamisch zu steuern. Die Box im folgenden Beispiel hat die Breite von 50%, allerdings soll sie mindestens 400px und höchstens 600px breit sein.
.box {
background-color: lightblue;
width: clamp(400px, 50%, 600px);
}Code-Sprache: CSS (css)Schriftgrößen sind mit clamp() nicht ganz so einfach zu handhaben.
Wenn man den Viewport-Bereich exakt festlegen möchte, in dem die Schrift vom minimalen zum maximalen Wert skalieren soll, ist das nur mit einer komplizierten Berechnung möglich. Den Umgang mit dem mittleren Wert preferred value empfinde ich insgesamt als wenig intuitiv.
Wie sehr ihr das? Nutzt ihr clamp() für Schriftgrößen?