Retina-Bildschirme und das Pixel als Maßeinheit

Wie hat sich der marktübliche Schriftgrad im Webdesign im Laufe der Jahre verändert, und wie hängt das mit den immer hochauflösenderen Bildschirmen zusammen? Die modernen Retina-Displays lassen uns ganz neu über Skalierbarkeit und die Sinnhaftigkeit des Pixels als Grundlage allen Screendesigns nachdenken.

Seit es Computermonitore im freien Handel gibt, ist deren Pixeldichte langsam aber stetig gestiegen. Zu Beginn der Desktop-Publishing-Revolution, Mitte der Achtzigerjahre, waren es noch die berühmten 72 ppi (pixel per inch), die bei professionellen Layoutbildschirmen dafür sorgten, dass ein einzelnes Pixel genauso groß war wie ein Typografischer Punkt, nämlich 0,35 × 0,35 mm. Das hatte den pragmatischen Vorteil, dass man Drucksachen tatsächlich in physischer Originalgröße am Bildschirm entwerfen konnte (Ausdrucken war teuer), und eine 12-Punkt-Helvetica am Bildschirm mit 12 Pixeln dargestellt wurde. So ließ es sich leichter rechnen.

Später kletterten die Bildschirmauflösungen dann locker über die 100er-Grenze, bis hin zu besonders protzigen Geräten mit bis zu 150 ppi. Letztere vor allem bei hochpreisigen Windows-kompatiblen Laptops Mitte der Nullerjahre, zum Beispiel ein Dell Dimension mit 15,4" Bildschirmdiagonale und 1.920 × 1.200 Pixeln. Viel höher jedoch konnte die Pixeldichte dann nicht mehr werden – zumindest nicht ohne Quantensprung. Und zwar weniger aus technischen, sondern aus konzeptionellen Gründen; das Problem an kleineren Pixeln ist nämlich, dass nicht nur die einzelnen Pixel im Vergleich schrumpfen, sondern mit ihnen alles, was aus ihnen gebildet wird. Und das ist zum großen Teil Text, der von menschlichen Augen gelesen werden soll. Eine heikle Angelegenheit, denn die gleiche 11-Pixel-Arial, welche auf dem 112-ppi-Monitor noch einigermaßen gut zu erkennen ist, kann auf einem 147-ppi-Monitor schon zu winzig sein, um sie ohne Lesebrille entziffern zu können; eine deutlich erhöhte ppi-Zahl führt bei sonst gleichbleibenden Parametern zu deutlich kleinerer Schriftdarstellung.

Die Webdesignwelt hat glücklicherweise darauf reagiert und in den letzten sieben bis acht Jahren die früher üblichen 11 oder 12 Pixel großen Fließtexte schrittweise zu den heute eher üblichen 14 bis 16 Pixeln transformiert. Damit einher ging auch die maximal empfohlene Layoutbreite von anfangs 640 Pixeln über später 800 Pixel auf heute 1024 Pixel. (Einige verwegene Webdesignkollegen versuchen es zwar inzwischen auch mit 1280 Pixeln oder experimentieren gar mit absichtlich horizontal scrollenden Inhalten, doch davor rate ich im Allgemeinen ab.)

Diese Anpassung des marktüblichen Leseschriftgrads an die steigenden Auflösungen der Monitore geht natürlich nur dann gut, wenn sich das Ganze über mehrere Jahre hinweg langsam entwickelt. Doch was passiert, wenn ein Hardware-Hersteller auf einmal nach vorne prescht und die Auflösung eines Gerätes auf einen Schlag, sagen wir: verdoppelt? Nun. Apple hat im Jahr 2010 genau das getan und mit dem iPhone 4 einen Bildschirm am Markt platziert, der statt 163 ppi satte 326 ppi darstellen konnte. Also für jeden Pixel des Vorgängerscreens vier Pixel auf dem neuen Screen – denn die Verdoppelung der Auflösung bezieht sich ja auf beide Richtungen, horizontal und vertikal.

Wenn Apple bei diesem Quantensprung das Gleiche getan hätte wie bei der bisher üblichen Evolution, stünden die Dinge in Sachen Lesbarkeit nicht zum Besten. Eine 12-Pixel-Arial wäre dann nämlich so außerordentlich winzig, dass wahrscheinlich selbst kerngesunde Teenager mit 120 % Sehkraft eine Lupe benötigten.

Statt dessen griff Apple zum einzig sinnvollen Trick und verdoppelte nicht nur die Auflösung, sondern auch die dargestellte Pixelanzahl aller angezeigten Elemente. Unsere 12-Pixel-Arial wird automatisch zu einer 24-Pixel-Arial, die dann den gleichen physischen Platz einnimmt wie früher, mit dem Unterschied, dass sie aus mehr Geräte-Pixeln besteht und von daher viel schärfer und detailreicher ist.

Damit wir uns nicht falsch verstehen: Die Entwickler von Apps und Websites müssen nichts an ihren Stylesheets ändern! Statt dessen nimmt man bei diesen hohen Auflösungen eine Trennung zwischen der virtuellen und der physischen Auflösung vor. Etwas vereinfacht gesprochen behauptet das iPhone intern weiterhin, nur 320 × 480 statt der tatsächlichen 640 × 960 Pixel zu besitzen. Man rechnet als Designer auch weiterhin in den kleineren Größen, nennt das Pixel dann aber bisweilen Punkt/Point, oder auch logisches Pixel. Erst sobald es an die konkrete Darstellung geht, verwendet das Betriebssystem die zusätzlichen Hardwarepixel dafür, Schriften und Grafiken schärfer und detailreicher zu machen.

(Über die fachgerechte Bespielung von hochaufgelösten Bildschirmen, auch über typografische Gesichtpunkte hinaus, hat Frontend-Guru Thomas Fuchs mit »Retinafy Me« ein empfehlenswertes E-Book geschrieben: retinafy.me)

Dieses Prinzip hat das Potenzial, einiges auf den Kopf zu stellen – auch und gerade im Webdesign. Denn in Zukunft wird es immer mehr sogenannte High-PPI-Bildschirme geben, bei denen ein 1:1-Verhältnis zwischen Software- und Hardware-Pixel nicht mehr sinnvoll ist. Genau genommen hat es auch in der offiziellen CSS-Spezifikation nie eine zwingende Übereinstimmung zwischen Hardware-Pixel und CSS-Pixel gegeben. Es war nur viele Jahre so, dass ein font-size:14px; fast immer zu einer in 14 Pixeln dargestellten Schrift geführt hat. Jetzt ist das immer häufiger nicht mehr der Fall.

Entwickler für die Smartphone-Plattform Android kennen diese zusätzliche Abstraktionsebene übrigens schon ein wenig länger. Bereits in recht frühen Versionen von Googles Smartphone-Betriebssystem gab es den Density-Faktor, der von einer Basis-Auflösung 160 ppi ausgeht und für jedes Hardware-Gerät einen ausgleichenden Wert annimmt. Android-Telefone mit 120 ppi erhalten einen Density-Wert von 0.75, während ein 320-ppi-Gerät (analog zum Retina-Display des iPhones) eine Density von 2.0 erzeugen würde. Wenn man diesen Faktor brav beachtet, bleiben die physischen Größenverhältnisse der Bedienelemente ungefähr gleich, was für die Touch-Bedienung mit dem Finger nicht ganz unwichtig ist. Die Darstellungqualität hingegen verbessert oder verschlechtert sich eben je nach Displaydichte.

(Kleine Anmerkung für die nerdigen Leser: Die Sache mit dem Viewport-Zooming auf Smartphone-Browsern lasse ich an dieser Stelle aus, weil es meine Erläuterung unnötig kompliziert machen würde. Aber: Ja, das käme als weitere Abstraktionsschicht potenziell auch noch hinzu.)

Obwohl also das Konzept der Virtuellen Auflösung zum ersten Mal bei den Smartphones in größerem Stil eingesetzt wurde: Die Idee der Auflösungsunabhängigkeit geistert auf Computern mit klassischen Betriebssystemen (Windows/Mac OS) auch schon sehr lange durch den Raum, ohne bisher jemals tatsächlich konsequent umgesetzt und vermarktet worden zu sein. Und irgendwo verspüren viele Webdesigner auch keinen besonderen Drang, es tatsächlich einzufordern, denn eine Unsicherheit bezüglich der virtuellen und physischen Auflösung erschwert natürlich die bequeme pixelbasierte Planung und Umsetzung, wie man sie seit Jahren gewohnt ist. Im Zweifelsfall werden die Pixelkonstrukte beim Endkunden verkleinert oder vergrößert dargestellt, dadurch unscharf oder komisch gekrümelt, je nach Density-Wert. Nicht nur Auftraggeber hätten damit Probleme.

Doch der Trend geht trotzdem ganz klar weg vom klassischen Pixel, dessen Breite man »irgendwo zwischen 0,2 mm und 0,3 mm« ansiedeln konnte. Das Hardwarepixel wird heutzutage immer kleiner, flexibler und unberechenbarer, und damit letztlich auch immer unwichtiger, zumindest als Einheit zum Rechnen und Layouten. Es lohnt sich im Gegenzug mehr denn je, auf Vektorgrafiken und -fonts zu setzen, wo immer es geht, und auf Pixelgrafiken für Layoutelemente möglichst zu verzichten!

Noch sind wir allerdings nicht so weit, das Pixel vollständig vernachlässigen zu können, denn es gibt mehr als genug konventionelle Bildschirme, auf denen man sehr wohl unscharfe Halbpixelkanten erkennen kann, welche bei der Skalierung von Vektorformen oftmals entstehen. Man beachte insbesondere die untere Kante des 40-Pixel-Icons (ganz rechts):

Bei der Produktion von Icon-Sets – ob vektorbasiert oder nicht – verwenden professionelle Screendesigner nach wie vor ein 32er- oder 48er-Raster, um solche Nebeneffekte zu reduzieren. Aber in ein paar Jahren, so glaube ich, wird unseren Kindern der Pixelfetischismus im Webdesign der Nuller- und Zehnerjahre ähnlich lustig erscheinen wie uns die drolligen Pixelklötzchen der 8-Bit-Games aus den Achtzigern.