Der Armlängen-Trick: warum deine Schrift am Handy völlig anders wirkt als am PC

Du gestaltest deine Website am großen Monitor. Die Überschriften sitzen, der Fließtext liest sich ruhig, die Abstände stimmen. Dann öffnest du dieselbe Seite am Handy und plötzlich brüllt dich die Überschrift an. Oder umgekehrt: der Fließtext schrumpft zu einer Zeile, bei der du die Augen zusammenkneifst. Nichts an der Schriftart hat sich geändert, und trotzdem wirkt alles falsch.

Das liegt nicht an deinem Geschmack und selten an der Schrift, die du gewählt hast. Es liegt an deinem Auge und daran, wie weit der Bildschirm von ihm entfernt ist. Diese Distanz ist bei jedem Gerät eine andere und wer sie nicht mitdenkt, gestaltet fürs eine Gerät gut und fürs andere daneben.

Die Physik des Sehens: der Armlängen-Trick

Im Webdesign gibt es dafür einen einfachen Maßstab. Er lässt sich mit dem eigenen Arm nachmessen. Ein Desktop-Monitor steht ungefähr eine ganze Armlänge entfernt, sechzig bis siebzig Zentimeter. Ein Laptop rückt näher, etwa eine dreiviertel Armlänge, weil die Hände auf der Tastatur liegen und der Bildschirm daran hängt. Das Smartphone halten wir noch dichter vor uns, etwa eine halbe Armlänge vom Gesicht weg.

Diese Abstände sind der Grund für das Rätsel vom Anfang. Je näher ein Bildschirm am Auge liegt, desto größer erscheint darauf dieselbe Schrift. Eine Überschrift, die am weit entfernten Monitor angenehm groß wirkt, sitzt am halb so weit entfernten Handy plötzlich riesig im Gesicht. Wer stur dieselbe Größe für alle Geräte erzwingt, gestaltet zwangsläufig für mindestens eines davon zu groß oder zu klein.

Warum starre Pixelwerte scheitern

Der häufigste Fehler steckt in der Maßeinheit. Viele Baukästen und Vorlagen legen Schriftgrößen in Pixeln fest, also in einer festen Zahl, die auf jedem Gerät gleich bleibt. Moderne Geräte rechnen zwar einiges davon selbst um, damit die Schrift auf einem hochauflösenden Handy nicht winzig gerät. Aber die feste Zahl bleibt eine feste Zahl, unabhängig davon, wie weit der Bildschirm vom Auge entfernt ist.

Genau das ist das Problem. Eine feste Pixelzahl weiß nichts vom Sehabstand, und sie weiß auch nichts von deiner Besucherin. Manche Menschen stellen in ihrem Handy oder Rechner eine größere Schrift ein, weil sie schlechter sehen. Eine starre Pixelgröße ignoriert diese Einstellung und zwingt allen dieselbe Größe auf, auch der Frau, die sie sich extra größer gestellt hat. Was auf deinem Bildschirm perfekt aussieht, wird für sie zur Zumutung.

Relative Größen, die mitwachsen

Die Alternative sind relative Maßeinheiten. Statt einer festen Zahl beziehen sie sich auf eine Grundgröße, meist heißt diese Einheit „em“ oder „rem“. Vereinfacht gesagt: Du legst eine Basis-Schriftgröße fest und alle anderen Größen richten sich als Vielfaches danach aus. Eine Überschrift heißt dann nicht mehr „vierzig Pixel“. Sie heißt „doppelt so groß wie der Fließtext“. Ändert sich die Basis, wandert alles harmonisch mit.

Das hat zwei Vorteile auf einmal. Die Größen deiner Besucherin, die sie sich im System eingestellt hat, werden respektiert, weil deine Schrift sich an ihrer Grundgröße orientiert. Und du kannst die Basis für kleine Bildschirme leicht anpassen, sodass die ganze Seite proportional mitskaliert, ohne dass du jede Überschrift einzeln nachjustierst. Dazu gehört ein zweiter Gedanke, den man leicht vergisst: Abstände. Eine Überschrift braucht am kleinen Handy weniger Luft zum Fließtext als am riesigen Monitor. Übernimmst du die großzügigen Desktop-Abstände eins zu eins aufs Handy, zerreißt es dir das Layout.

So prüfst du deine Schriftgrößen

Für den Test brauchst du keine Technik, nur deine drei Geräte und ehrliche Augen. Öffne deine Website nacheinander am Monitor, am Laptop und am Handy, jedes im natürlichen Abstand, das Handy also wirklich auf halbe Armlänge vors Gesicht. Schau bei jedem, wie sich der Fließtext liest: entspannt oder anstrengend. Achte am Handy besonders auf die Überschriften. Nehmen sie mehr als zwei oder drei Zeilen ein, sind sie zu groß und drängen den eigentlichen Inhalt nach unten. Wenn dein Baukasten es zulässt, stell die Schriftgrößen von festen Pixelwerten auf relative Einheiten um, oder nutz die getrennten Größen-Einstellungen für Handy und Desktop, die viele Baukästen inzwischen anbieten. Dann dieselbe Runde noch einmal, auf allen drei Distanzen.