Die Skalierung (Gestaltung) ist das Vergrößern oder Verkleinern eines Bildes, einer Form oder einer Schrift. Der Duden beschreibt skalieren in der EDV als Größenänderung eines Bildes unter Einhaltung der Proportionen; das Wort gehört zur Skala. Genau an den Proportionen entscheidet sich, ob eine Skalierung gelingt oder ein Bild verzerrt.
- Skalierung
Das Vergrößern oder Verkleinern eines Bildes, einer Form oder einer Schrift, im Idealfall mit gleichbleibenden Proportionen.
Beispiel: „Bei der Skalierung auf die halbe Größe bleibt das Seitenverhältnis gleich.“Abgrenzung zur Skalierbarkeit: Sie meint die Fähigkeit eines Systems, mehr Last zu tragen.
Proportionale Skalierung
Proportional heißt: Breite und Höhe ändern sich um denselben Faktor. Die CSS-Funktion scale() tut das von selbst, wenn nur ein Wert angegeben ist; zwei verschiedene Werte verzerren die Form, negative spiegeln sie. In SVG regelt das Attribut preserveAspectRatio dasselbe: Die Vorgabe xMidYMid meet erhält das Seitenverhältnis, der Wert none zieht die Grafik in die Box. Bei Logos und Schrift ist Verzerren fast immer ein Fehler, weil die Strichstärken ungleich werden.
Skalierung von Pixel- und Vektorgrafik
Eine Vektorgrafik lässt sich ohne Verlust in jede Größe bringen. Eine Pixelgrafik muss der Browser umrechnen, sobald die Anzeigegröße von der natürlichen Größe abweicht. Welches Verfahren er nimmt, steuert die Eigenschaft image-rendering: smooth glättet und passt zu Fotos, pixelated erhält die harten Kanten von Pixel-Art. Ein Foto über seine Pixelzahl hinaus zu vergrößern bringt keine neuen Details. Joe Harrison zeigte 2014 mit seinem Experiment Responsive Logos, wie Markenzeichen beim Verkleinern schrittweise Details abgeben können.
Skalierung von Schrift und Layout
Typografie skaliert in Stufen. Tim Brown beschrieb 2011 bei A List Apart die modulare Skala: Aus einem Startwert und einem Verhältnis wie dem Goldenen Schnitt von 1 zu 1,618 entstehen durch Multiplizieren und Teilen die Schriftgrade einer Seite. Im responsiven Layout übernimmt clamp() das stufenlose Mitwachsen. Laut MDN sollte der Höchstwert mindestens doppelt so groß sein wie der Mindestwert, damit Text bei 200 Prozent Zoom auch wirklich doppelt so groß wird.
h1 {
font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}