Vereinfachte Fluid-Typografie

Fluid typografie ist die Idee, dass sich font-size (und vielleicht andere Attribute von Schriftarten wie line-height) je nach Bildschirmgröße (oder vielleicht Container Queries, wenn wir welche hätten) ändern.

Der eigentliche Trick kommt von Viewport-Einheiten. Man kann Schriftgrößen buchstäblich in Viewport-Einheiten festlegen (z. B. font-size: 4vw), aber die Größenänderungen sind so extrem, dass es normalerweise unerwünscht ist. Dies wird gemildert, indem man etwas wie font-size: calc(16px + 1vw) verwendet. Aber da wir sowieso mit Berechnungen aufwendig werden, entwickelte sich die gängigste Implementierung zu einer Formel zur Berechnung in einfachem Englisch

Ich möchte, dass die Schriftgröße von 16px auf einem 320px breiten Bildschirm auf 22px auf einem 1000px breiten Bildschirm ansteigt.

Was dann so aussah

html {
  font-size: 16px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
} 

Das legt im Wesentlichen eine minimale und maximale Schriftgröße fest, damit die Schriftgröße nicht zu extrem schrumpft oder wächst. „CSS-Locks“ ist ein Begriff, der von Tim Brown geprägt wurde.

Minimum und Maximum, sagen Sie?! Nun, es stellt sich heraus, dass Funktionen dafür ihren Weg in die CSS-Spezifikation gefunden haben in Form von min() und max().

So können wir unser schickes obiges Setup mit einer einzigen Zeile vereinfachen und die Locks beibehalten

html {
  font-size: min(max(1rem, 4vw), 22px);
}

Wir sollten hier eigentlich aufhören, denn obwohl sowohl Safari (11.1+) als auch Chrome (79+) dies derzeit unterstützen, ist das die größte Verbreitung, die wir heute erreichen können. Apropos, Sie möchten wahrscheinlich eine font-size-Deklaration davor einfügen, um einen akzeptablen Fallback-Wert ohne schicke Funktionen festzulegen.

Aber solange wir die Grenzen ausloten, gibt es eine weitere Funktion, um die Dinge noch weiter zu vereinfachen: clamp()! Clamp nimmt drei Werte entgegen: ein Minimum, ein Maximum und eine flexible Einheit (oder eine Berechnung oder was auch immer) in der Mitte, die verwendet wird, falls der Wert zwischen dem Minimum und dem Maximum liegt. Unsere Einzeiler wird also noch kürzer

body {
  font-size: clamp(100%, 1rem + 2vw, 24px);
} 

Das wird Chrome 79+ sein (das noch nicht stabil ist, aber bald sein wird).

Onkel Dave ist sehr glücklich, dass FitText jetzt nur noch ein paar Bytes statt des gesamten jQuery plus 40 weiteren Zeilen benötigt. Hier ist Dave, der CSS-Custom-Properties darauf anwendet

---

Habe gerade diese nette Erklärung gesehen

Guten Morgen Devsheet: CSS `clamp` kann für fluide Typografie verwendet werden. 🎉

🔗 `clamp` auf MDN: https://#/4xZpDfYoqB

Video-Alternative: Beispiel, das zeigt, wie `clamp` für fluide/responsive Typografie für ein h1-Element verwendet wird pic.twitter.com/9iiCxxXJO7

— Stefan Judis (@stefanjudis) 20. April 2020