Optische Ausrichtung: Warum stimmt die Mathematik nicht?

Optische statt mathematische Ausrichtung: Warum das Auge recht behält

Michael Dobler

Autor Dr. Web

15. September 2026

2 Min. Lesezeit

Ein Icon sitzt exakt in der Mitte des Buttons und wirkt trotzdem nach links gerutscht. Die Schriftgießerei Pangram Pangram zeigt, warum das große O kleiner aussieht als das H, obwohl beide gleich hoch stehen. Optische Ausrichtung schlägt im Design die reine Pixel-Mathematik und kostet im Webdesign jeden Tag Feinarbeit.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Optische Ausrichtung beginnt dort, wo die Zahlen im Layoutprogramm stimmen und das Ergebnis trotzdem falsch aussieht. Ein rundes Zeichen wirkt kleiner als ein eckiges, ein Play-Dreieck im Kreis kippt scheinbar nach hinten. Für Webdesigner ist dieser Abstand zwischen Messwert und Wahrnehmung keine Kür, sondern der Unterschied zwischen sauber und selbstgebaut.

Das Wichtigste in Kürze

Gleiche Maße, ungleiche Wirkung: Runde Formen wirken kleiner als eckige, weil Kurven optisch zurücktreten.
Schriftgestalter gleichen das mit Überschwüngen von rund einem bis drei Prozent der Versalhöhe aus.
Im Interface trifft dasselbe Prinzip Icons, Buttons und Logos, das Play-Dreieck ist der Klassiker.
Der Browser nimmt Designern die Feinarbeit kaum ab: optischen Randausgleich beherrscht bisher fast nur Safari.

Warum wirkt mathematisch zentriert oft falsch?

Große weiße Buchstaben „OH“, ein Lineal und Etiketten auf hellgrauem Grund — Kurven wirken optisch kleiner als gerade Kanten bei gleicher Höhe. Ein rundes O erscheint neben einem geraden H geschrumpft, obwohl beide identisch hoch sind

Die Ursache steckt in der Wahrnehmung, nicht im Werkzeug. Kurven treten optisch zurück, gerade Kanten drängen nach vorne. Ein Kreis und ein Quadrat mit identischer Höhe wirken darum unterschiedlich groß, das runde O erscheint neben dem geraden H geschrumpft, obwohl beide exakt gleich hoch gesetzt sind. Software platziert millimetergenau, doch das menschliche Auge stimmt dem Ergebnis nicht automatisch zu, wie die Schriftgießerei Pangram Pangram in ihrem Journal beschreibt.^[1]

Wo Designer täglich nachjustieren

Schriftgestalter lösen das Problem mit Überschwüngen. Runde Buchstaben wie O, C und S ragen minimal über Grundlinie und Versalhöhe hinaus, üblich sind etwa ein bis drei Prozent, damit sie neben H oder T gleich groß wirken. Ohne diesen Kniff sähe jede Schrift unruhig aus.

Im Interface kehrt dasselbe Muster wieder. Das Play-Dreieck im runden Button ist der Klassiker: Mathematisch zentriert kippt seine Masse nach links, also verschieben Designer es ein Stück in Richtung Spitze, bis es mittig wirkt. Dasselbe gilt für Icons mit einseitigem Gewicht, für Pfeile und für ein Logo, dessen überhängendes T die Komposition kippt.

Ein zentriertes Icon ist noch kein ausgerichtetes Icon. Im Web entscheidet am Ende das Auge, nicht der Pixelwert im Eingabefeld.
— Markus Seyfferth, Chefredakteur Dr. Web

Wenn Mathematik und Auge sich widersprechen

Drei Kennzahlen zur optischen Ausrichtung

1 bis 3 %

Überschwung der Versalhöhe, mit dem runde Buchstaben wie O, C und S neben geraden gleich groß wirken

H vor O

Bei gleicher Höhe wirkt das gerade H größer als das runde O, weil Kurven optisch zurücktreten

2016

Seit diesem Jahr hängt Safari Satzzeichen optisch in den Rand; andere Browser unterstützen hanging-punctuation bis heute kaum

Faustregel

Zahlen setzen das Layout, das Auge nimmt es ab. Runde Formen, spitze Icons und überhängende Buchstaben brauchen die manuelle Korrektur.

Was heißt das fürs Webdesign im DACH-Raum?

Auf dem Papier nimmt Adobe InDesign den Ausgleich teilweise ab, die Funktion heißt dort optischer Randausgleich. Im Browser fehlt dieses Komfort-Netz fast völlig, obwohl das CSS-Instrumentarium sonst erstaunlich fein misst. Die Eigenschaft hanging-punctuation, die Anführungszeichen und Bindestriche sauber in den Rand hängt, versteht bis heute praktisch nur Safari, dort seit 2016.^[2]

Für Agenturen und Freelancer heißt das: Figma und der Editor rasten aufs Raster ein, die letzte Feinjustierung bleibt Handarbeit. Bei der Abnahme von Buttons, Logos und Icon-Sets zählt der Blick am Bildschirm, nicht allein die Koordinate im Eigenschaftenfeld. Ein Design-System kann die typischen Korrekturen als Regel festhalten, damit nicht jedes Team sie neu erfindet.