Die Mythen um dpi, lpi und ppi, deren Anwendung und Einsatz, im Besonderen im digitalen Bereich, im Webdesign und in der Webtypographie, sorgen immer wieder für Gesprächstoff und ich hoffe mit Nachfolgendem ein wenig Klarheit in den Nebel der Missverständnisse zu bringen.

Digitale und analoge Größe

Jedes Eingabe- und Ausgabemedium besitzt - unabhängig ob analog oder digital - die grundlegende Eigenschaft der Auflösung.
Egal ob Digitalkamera, Scanner, bedrucktes Papier oder Monitor, alle greifen bei der Darstellung auf eine Auflösung zurück, über die unserem Auge Farb- und Kontrastinformationen bereitgestellt werden.

Die Auflösung beschreibt dabei das Mengenmaß der Informationen auf einer bestimmten Fläche.

Die gängigen Größenmaße sind dafür dpi (Dots per inch), ppi (Pixels per inch) und lpi (Lines per inch). Sie treffen eine Aussage über die Menge von Punkten, Pixeln oder Linien auf eine bestimmte Längeneinheit, hier auf der Länge eines Inches (=2,54 cm).

Dabei bleibt zu beachten, dass dpi die eindimensionale Auflösung bezeichnet. Bei exemplarischen 300dpi verteilen sich auf einer 25,4 mm langen Linie 300 Punkte. Das bezieht sich auf die x- wie auch y-Richtung, d.h. dass sich auf einem Quadrat-Inch (bzw. 6.4516 qcm) 90.000 Punkte versammeln. Dies ergibt ca. 13.950 Punkte auf einem Quadratzentimeter.

Was sagt uns das? Erstmal nur wie das mit den dpi gemeint ist und was z.B. bei einem Ausdruck mit 300dpi passiert. Was das jetzt für Auswirkungen auf einen Monitor hat? Abwarten…

Absolut und relativ

Es gibt zwei Herangehensweisen an die Größe dpi:
Einmal über die Dots als Größe oder über die Inch als Größe.

Nehmen wir zuerst das Einfache: die Inch als Basisgröße.
Wollen wir ein Foto in 15×10 cm mit 300dpi ausdrucken, ergibt sich ein Mindestpixelmaß von 1772px x 1081px. Mit dieser Größe lässt sich das Bild in der gewünschten Qualität ausdrucken. Dabei haben wir eine grundlegende Qualitätsvorstellung (nämlich 300dpi) und ein gegebenes Maß des Ausgabemediums. Damit lassen sich leicht Berechnungen durchführen. Die Qualität z.B. eines Ausdrucks lässt sich in solchen Fällen über die dpi klären. Während 300dpi ein gutes Ergebnis liefert, würden 150dpi bei gleicher Ausgabegröße nicht zu dem gewünschten Resultat führen. Würden wir indes die Ausgabegröße halbieren, würde das Pixelmaß das gleiche Ergebnis bringen. Dies macht Sinn beim Drucken oder Scannen, also bei Aus-/Eingabemedien mit gegebenen physikalischen Größen.

Aber dann gibt es noch die kompliziertere Variante: der Punkt als Basisgröße.
Benutzen wir als Medium z.B. einen Monitor, verlieren die absoluten physikalischen Größen ihre Relevanz. Wer will schon am Monitor ein genau 10cm breites Bild sehen? In der Regel geht es dabei eher um relative Größen, wie z.B. ein 200px breites Bild auf einem Monitor mit 1440×960px Auflösungsvermögen. Dabei bleibt das Längenmaß vorerst außen vor.
Ein Monitor besitzt bei gegebener Größe ein feste (ideale) Auflösung bzw. ein festes Pixelmaß. Messen wir z.B. das Display meines Powerbooks aus, ergibt sich eine Breite von 32cm bzw. ca. 12.6 inch. Bei der gegebenen Auflösung von 1440×960px resultiert das in einer Auflösung von ca. 114dpi. Das bedeutet dass das 200px breite Bild auf meinem Display eine reale Breite von ca. 4.46 cm einnimmt. Auf einem geringer auflösenden Monitor (z.B. 1024×768px und 88dpi) würde das Bild um einiges größer erscheinen. Und das trotz gleichgebliebener Pixelzahl.

Somit ergibt sich ein Absurdum im täglichen Leben, wenn Leute von mir Bilder in “72dpi Auflösung” haben wollen. Was sie haben wollen sind eigentlich Bilder in z.B. einer Größe von 400×300px. Dahingegen kann gerne jemand kommen und ein Layout für einen 300dpi-Ausdruck im Format DIN A3 wünschen.

Ich hoffe, dass bis hierhin die Unterschiede deutlich wurden und die relativen und absoluten Größen, wie auch die Herangehensweisen an die Größen klar sind. Denn jetzt wird es nur komplizierter.

Webtypographie und digitale Größen

Die Typographie im Internet hat sowieso schon mit genug Problemen zu kämpfen. Wenig sichere Schriften, die auf allen Systemen verfügbar sind, unterschiedliche Schriften mit gleichem Namen aber unterschiedlichem Laufverhalten und -höhen, unterschiedliche Darstellung der Schriften auf verschiedenen Plattformen etc…

Was aber immer wieder zu Problemen und zu Glaubenskriegen führt, ist die Angabe der Schriftgrößen im Internet. Die gängigsten Methoden sind dabei die Angabe in pt (typografischer Punkt = 1/72 inch, absolut), px (Pixel, relativ auf verschiedenen Ausgabegeräten, absolut auf einem Ausgabegerät) und em (Bezogen auf das Elternelement, relativ).

Typographisch gesehen am naheliegendsten wäre natürlich pt. Der Punkt ist ja definiert als ein 72stel Inch und entspricht somit bei gedachten 72dpi Bildschirmauflösung einem Pixel. Somit wäre eine Schrift mit 12pt auch 12px hoch. Wenn, ja wenn da nicht die unterschiedlichen Auflösungen wären.

Nichts desto trotz ist per Punkt eine fixe und absolute Größe und bietet sich damit für die Angabe von Schriftgrößen an. Leider lässt sich der Punkt nicht ohne weiteres so umsetzen, wie z.B. bei analogen Layouts. Intern wird auf Basis der Auflösung der Punkt in Pixel umgerechnet und dementsprechend können dabei sehr unterschiedliche Ergebnisse zu sehen sein. Wenn man jedoch davon ausgeht, dass 12pt bis 14pt systemunabhängig eine vernünftige Basisgröße für die Textdarstellung sind, kann man als Ansatz die Basisgröße für das oberste Element, den Body, auf 12pt setzen und den Rest in Abhängigkeit davon mittels em angeben. Dadurch bleibt die Schrift vergrößer- und verkleinerbar, und kann dennoch nicht durch Systemeinstellungen nach unten oder oben ausreissen. Es bietet sich an für Websiten bei denen die Lesbarkeit des Textinhaltes oberste Priorität hat. Mittels durchdachten CSS lassen sich Vergrößerungen und Verkleinerungen des Textes bis zu einem gewissen Maß vom Layout abfangen. Für Stylesheets, die für die Ausgabe am Drucker gedacht sind, ist die Angabe in pt indes ideal.

Pixel sind, wie bereits gesagt, eine sowohl relative wie auch absolute Größe, abhängig vom anzeigenden Medium. Auf zwei identischen Monitoren sind 12px gleich groß, aber bei unterschiedlicher Monitorauflösung ergeben sich auch hier große Unterschiede. Allerdings sind 12px nunmal 12px an denen nichts zu vergrößern oder zu verkleinern ist. Daher ist bei unbedachter Nutzung eine schwere Lesbarkeit kaum zu vermeiden. Wenn Websiten jedoch kaum Text enthalten oder die Konsistenz des Layouts höhere Priorität besitzt, dann bietet sich die Nutzung von Pixeln an.

Die Größen in em anzugeben galt als die ultimative Waffe, bis auch hier Probleme auftauchten, die auch alle anderen Größen inne haben. Basierend auf der im Browser voreingestellten Schriftgröße werden hier alle Größen in Relation angegeben. Also entspricht 1em genau der voreingestellen Schriftgröße, z.B. 12pt. Demnach entsprächen 0.8em ca. 9.6pt. Das wirft auch schon das Problem auf, dass, wenn 10pt voreingestellt ist, 0.8em nur 8pt sind und damit eindeutig zu klein. Natürlich gibt es dabei die Möglichkeit, dass der Nutzer auf die Basisgröße Einfluss nehmen kann. Aber das sind die nicht vorhersehbaren Umstände, die ein konsistentes Layout schwer macht. Außer man benutzt auch für die Größen im Layout em als relative Größe. Dies jedoch führt unausweichlich zu Problemen, sobald Bilder mit ins Spiel kommen.

Also was sollte man jetzt idealerweise tun?
Man sollte nachsehen, welche Prioritäten man hat und demnach die vorteilhafteste Wahl treffen.
Ich fahre bis dato gut mit der Angabe einer Basisgröße in Punkt und einer weiterführenden Verwendung von em.

Sofern wir Bilder erstmal außer Acht lassen, wäre ein fließendes, flexibles Layout mittels relativer Größen ideal. Auch wenn sich das bildtechnisch nicht gut machen lässt, hätte man den Vorteil, dass sich je nach Schriftbasisgröße das gesamte Layout nachregelt. Vergrößert man die Basisgröße der Schrift, würde das Layout dem folgen und ebenfalls relativ wachsen. Dass man in den Extremeinstellungen ebenfalls wieder in Probleme gerät, dürfte klar sein.

Summa summarum

Lässt sich also mal wieder festhalten, dass nichts ideal ist und alles Vor- und Nachteile hat.
Wer jedoch weiß, was er will, kann sich die geringsten Übel aussuchen und entsprechend die Vorteile durch Wissensvorsprung nutzen.

Worauf man sich auch immer einlässt, ein ausgiebiges Testen auf vielen Plattformen, mit verschiedenen Einstellungen und Browsern sollte obligatorisch sein.

Das ist wohl bei allen Überlegungen die einzige Möglichkeit, nicht unvorbeitet in Probleme zu geraten.

Weiterführende Links:

Web-Schriften
72dpi-Mythos
Schrift-Revolution im Web
Numerische Wertangaben