Konsistente, flüssig skalierende Schrift und Abstände

Als Chris mir diesen Prompt zum ersten Mal schickte, dachte ich darüber nach, über progressive enhancement zu schreiben, aber dieses Thema ist so weitreichend, um *eine Sache* zu sein und allzu vorhersehbar, besonders für diejenigen, die meine Beiträge bereits kennen. Das gesagt, das, was ich in diesem Artikel darlegen werde, ist auch keine einzelne Sache, aber an dem Tag, an dem ich eine Schreibaufforderung genau treffe, werden Schweine fliegen. Diese Gruppe von Dingen wird jedoch die Art und Weise ändern, wie Sie CSS schreiben.

Ich persönlich denke, dass diese Gruppe von Dingen viele Websites im Stich lässt – insbesondere im Hinblick auf reaktionsfähige Designs. Die Dinge in dieser Gruppe sind **Typografie und Abstände**. Viel zu oft sehe ich inkonsistente Abstände – besonders vertikale –, die den Inhalt schwer zu scannen machen und dieses subtile, unzusammenhängende Gefühl erzeugen. Das Gleiche gilt für Typografie: *riesige* Überschriften auf kleinen Viewports oder Überschriftenhierarchien, die visuell keinen Größenkontrast aufweisen und sie daher im visuellen Sinne nutzlos machen.

Dafür gibt es eine ziemlich einfache Lösung mit einer Größenskala und flüssiger Typografie, und ich verspreche, dass Ihre Websites dadurch erheblich besser aussehen und sich besser anfühlen werden. Kommen wir dazu.

Was zum Teufel ist eine Größenskala?

Eine Größenskala ist eine einheitliche Progression von Größen, die auf einer Skala – oder genauer gesagt, einem Verhältnis – basiert.

In diesem Screenshot von type-scale.com habe ich eine „Perfekte Quarte“ Skala ausgewählt, die ein **Verhältnis** von 1,333 verwendet. Das bedeutet, dass Sie jedes Mal, wenn Sie eine Größe nach oben gehen, die aktuelle Größe mit 1,333 multiplizieren und jedes Mal, wenn Sie eine Größe nach unten gehen, durch 1,333 dividieren.

Wenn Sie eine Grundschriftgröße von 16px haben, ist die nächste Größe nach oben mit dieser Skala 16 * 1,333, was 21,33px ergibt. Die nächste Größe nach oben ist 21,33 * 1,333, was 28,43px ergibt. Dies erzeugt eine schöne *Kurve*, wenn Sie die Skala auf und ab gehen.

CSS clamp() und Typografie-Flüssigkeit

Seit *Jahren*, wenn Sie gefragt hätten: „Hey Andy, was ist dein liebstes CSS-Feature?“, hätte ich sofort gesagt Flexbox, aber nein, nicht mehr. Ich bin ein clamp() *Superfan*. Ich habe hier detaillierter darüber geschrieben, aber die Zusammenfassung von clamp() ist, dass es clevere Dinge auf Basis von drei Parametern tut, die Sie ihm geben

• ein Mindestwert
• ein idealer Wert
• ein Maximalwert

Dies macht es zu einem sehr nützlichen Werkzeug im Kontext von flüssiger Typografie und Abständen, da Sie CSS wie folgt schreiben

.my-element {
  font-size: clamp(1rem, calc(1rem * 3vw), 2rem);
}

Dieses winzige Stück CSS gibt uns voll reaktionsfähige Textgrößen basierend auf der Viewport-Breite mit praktischen Locks, um sicherzustellen, dass die Größen nicht zu groß oder zu klein werden.

Es ist *wirklich wichtig*, zu testen, ob Ihr Text lesbar ist, wenn Sie hinein- und herauszoomen, wenn Sie clamp verwenden. Er sollte deutlich größer oder kleiner sein. Da wir rem-Einheiten als Teil unserer flüssigen Berechnung verwenden, helfen wir dem erheblich.

Alles zusammenfügen

Gut, wir haben also eine Größenskala und CSS clamp() eingerichtet – wie fügt sich das alles zusammen? Die klugen Köpfe hinter Utopia haben sich den *einfachsten, aber praktischsten Ansatz* ausgedacht. Ich benutze ihr Typ-Tool und ihr Abstands-Tool, um Größenskalen für kleine und große Viewports zu erstellen. Dann generiere ich mit clamp() eine vollständig flüssige Hauptgrößenskala sowie eine Sass-Map, die die Konfiguration von Gorko informiert.

$gorko-size-scale: (
  '300': clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem),
  '400': clamp(0.88rem, 0.83rem + 0.24vw, 1rem),
  '500': clamp(1.09rem, 1rem + 0.47vw, 1.33rem),
  '600': clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem),
  '700': clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem),
  '800': clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem),
  '900': clamp(2.67rem, 2.07rem + 3vw, 4.21rem),
  '1000': clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem)
);

Dieser Ausschnitt stammt von meiner Website, piccalil.li, und die Typografie ist deswegen super einfach zu bearbeiten.

Sie könnten das auch in gute alte CSS Custom Properties übersetzen

:root {
  --size-300: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
  --size-400: clamp(0.88rem, 0.83rem + 0.24vw, 1rem);
  --size-500: clamp(1.09rem, 1rem + 0.47vw, 1.33rem);
  --size-600: clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem);
  --size-700: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem);
  --size-800: clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem);
  --size-900: clamp(2.67rem, 2.07rem + 3vw, 4.21rem);
  --size-1000: clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem);
};

Dieser Ansatz funktioniert auch für viel größere Websites. Nehmen Sie das neue web.dev-Design oder die schicke Website einer Softwareagentur. Letztere hat eine riesige Größenskala für große Viewports und eine viel kleinere, vernünftigere Skala für kleinere Viewports, alles perfekt angewendet und ohne Media Queries.

Ich bin ganz dafür, Dinge einfach zu halten. Dieser Ansatz kombiniert eine klassische Designpraxis – eine Größenskala – und ein modernes CSS-Feature – clamp() – um viel einfacheren CSS-Code zu erstellen, der *viel* leistet.