praegnanz.de büro für intervernetzte medien

Gerrit, 12.12.2006

Neues/Altes von der »px vs. em«-Front

Das bisherige Highlight der diesjährigen Adventskalendersaison ist für mich der heutige Artikel bei 24ways.org. Richard clagnut Rutter beschreibt hierin, wie man im Jahr 2006 mit typografischen Größenangaben umgeht. Witziger weise entwirft er zwar immer mit Pixeln, im Code werden jedoch dann entsprechende em-Werte errechnet, und zwar bis in die dritte Kommastelle hinein.

Das muss ich mir noch abgucken für das eine oder andere aktuelle Projekt. Denn ich kämpfe zurzeit mit unschönen Rundungsfehlern, die mir diverse Kästen mal einen Pixel zu weit oben oder unten darstellt, weil ich ganz modern bin und ausschließlich mit em-Werten arbeite, die dann vom Browser falsch in absolute Pixel umgerechnet werden. Der Artikel ist da ganz schön nützlich, um diesem Problem auf die Schliche zu kommen!

Aber am Rande: An sich könnten wir doch bald wieder anfangen, mit Pixelwerten zu arbeiten? Der Internet Explorer 7 zoomt von Haus aus in die Layouts hinein, Opera ebenfalls, und Firefox macht das mit Sicherheit auch demnächst. Gehört dem Pixel doch die Zukunft im Webdesign? Es muss ja kein Gerätepixel sein, sondern eben ein CSS-Pixel, der nur in der 100%-Ansicht einem Gerätepixel entspricht. Ich muss da wiederum noch ein wenig drüber sinnieren  …

Nachtrag: In meinem eigenen Stylesheet auf praegnanz.de sieht das jetzt seit gerade eben so aus:


/* for Explorer/Win 5+6 */
html {
font-size: 87.5%;
}

/* for cool browsers */
html>body {
font-size: 14px;
line-height: 1.643em;
}

body {
font-family: »Lucida Grande«, »Lucida Sans Unicode«, tahoma, verdana, arial, sans-serif;
color: #333;
padding-bottom: 50px;
background: white;
}

Worum es geht, ist klar: Auf alle Fälle krumme Render-Resultate für die Bildschirmausgabe vermeiden: Vorher wurde meine Schriftgröße von Firefox auf 14.183px errechnet, nun habe ich knackige 14px mit einem Zeilenabstand von 23px (= 14px × 1,643). Hach, ich werde ab jetzt zum Krumme-Pixelangaben-Vermeider!

25 Kommentare

  1. Sebastian Werner am 12. Dezember 2006 #

    »em« ist IMHO einfach untauglich. Diese relative Größe zur Größe des Parents ist doch Irrsinn. Wenn man oben im Dom etwas größer gestaltet, wird es innen gleich auch größer. Und warum dann das Padding im Child von der Font-Size im Parent abhängt, kann auch niemand erklären. IMHO ist »px«, selbst wenn nicht der Hardware-Pixel der definitiv bessere Unit. »em« betrachte ich eher als tot. Hat man sich überhaupt nur angetan, weil es im IE gar nicht anders ging.

  2. Gerrit am 12. Dezember 2006 #

    Du hast schon recht, em ist eine Übergangseinheit, aber noch benötigen wir sie, wenn wir Zoomlayouts machen wollen, und das wollen wir oftmals. Ich jedenfalls. Aber klar, nur mit Pixeln zu arbeiten, ist im Allgemeinen sehr viel effizienter und logischer und macht weniger Probleme.

  3. Eric am 12. Dezember 2006 #

    Naja, so wirklich müsste dein Artikel „Altes von der »px vs. em«-Front“ heißen. Rutter macht das nämlich wie auf seiner Webseite dokumentiert ist seit Mai 2004. Damals verwendete er zwar noch 10 Pixel als Basiseinheit, aber das Vorgehen war das selbe. Sein Artikel bei 24ways ist dennoch sehr interessant :)

  4. Gerrit am 12. Dezember 2006 #

    Mann, Mann. Ich hatte mal einen anderen Artikel auf clagnut gelesen, wo es auch grob um das Thema ging, aber speziell diesen kannte ich noch nicht. Peinlich. Naja, aber dafür hat man ja seine Leser!

  5. Martin am 12. Dezember 2006 #

    Pixel für das Layout würde ich vermeiden. Auch mit »Ganzkörperzoom« ;) Denn da werden die Pixelbilder unscharf bzw. … pixelig? Je nachdem, welches Vergrößerungsverfahren zum Zuge kommt …

  6. Sebastian Werner am 12. Dezember 2006 #

    Naja, ich hab jetzt nicht unbedingt den Ehrgeiz dem IE6 auch Skalierung bei zu bringen. Mittlerweile kann man bei den meisten Projekten auch ganz gut dagegen argumentieren.

    Kann natürlich auch damit zusammenhängen das ich Hauptberuflich eher andere Schwerpunkte habe.

  7. Daniel am 12. Dezember 2006 #

    Liebe CSS-Typographen,

    wieso erstellt ihr immer noch CSS-Regeln, die auf Eurem Monitor, bei Eurer Auflösung, durch Eure Augen gut aussehen und glaubt, dass das dann auch bei meinem Monitor, meiner Auflösung für meine Augen gut ist? Ihr habt keine Ahnung, welchen Monitor, welche Auflösung und welche … Brille ich benutze.

    Ich wünsche mir, dass sich endlich das CSS „for cool users“ durchsetzt, das die „font-size: 100%;“ oder einfach nicht setzt. Denn das ist die Größe, die nicht zu klein und nicht zu groß ist. Die genau zu meinen Augen paßt. Ich habe sie extra für Euch eingestellt.

    Das CSS ist nicht für Euch da sondern für mich,

    Euer Leser

    PS: Dieser Kommentar ist nicht böse gemeint. Echt nicht. Ich finde es nur völlig egal, ob die Überschrift 21,359px oder 23px ist, solange der Fließtext in der richtigen Größe erscheint.

  8. Hauke Rehfeld am 13. Dezember 2006 #

    Auch wenn das ein bischen am Thema vorbeigeht: Aus diesem (daniels) Grund plaediere ich fuer ein fixes Layout, dass unter 800 und 1024 noch gut funktioniert, aussieht und lesbar ist. Alle Leute die gern Fullscreen 1600 oder in 640 surfen, skalieren (‘zoomen’) sich das dann hoch bzw. runter.

    Die Einigung auf 800/1024 wohl nur, weil das
    a) immer noch die verbreitetsten Aufloesungen sind (?)
    b) die Designs dann wie der Rest des Netzes aussehen und
    c) ich inzwischen 3 1024er Displays mein Eigen nennen darf ;)

    Zum eigentlichen Thema bleibt mir nur noch beizutragen, dass ich es sehr schaetze die gesamte Seite mit einer Aenderung ganz oben im CSS skaliern zu koennen. Aber ich bin wohl mehr ein theoretischer als praktischer CSS Schreiber – px zu benutzen scheint pragmatischer.

  9. macx am 13. Dezember 2006 #

    Gerrit? Hallo? Was hast du für Pillen geschluckt? Schimpfst auf den Pixel und sehnst ihn nun herbei. Ich habe mich schon lange vom dem Gedanken verabschiedet, dass Webseiten überall gleich aussehen, denn das tun sie definitiv nicht. Und seit dem ich nicht mehr versuche, die Webseite auf allen Browsern gleich aussehen zu lassen, mache ich bessere Designs. Und wie Daniel sagte: Es ist sch … egal, ob eine Schrift 15,654 Pixel oder 20 groß ist. Pixelabstände und -größen sind mir schon lange egal.
    Wenn der Einfluß der Drogen wieder abnimmt, sag uns Bescheid. ;-)

  10. Gerrit am 13. Dezember 2006 #

    Nun, ich rede hier nicht von Layouts, die ich selber entwerfe oder verantworte, sondern von Seiten, die nach Web1.0-Designmaßstäben für unsere Web0.8-Kunden entwickelt werden. Und da ist es halt blöd, wenn bei drei untereinander platzierten Kästchen in der Seitenleiste der vertikale Abstand einmal 4 Pixel beträgt und einmal 5 Pixel. Es sieht einfach scheiße aus, und sowas sehen bisweilen sogar die Kunden, die sich zurecht beschweren. Dass man Designs heute eigentlich so anlegt, dass Pixelperfektion keine Rolle spielt, musst Du mir nicht erzählen (Guck dir praegnanz.de an) aber unsere Designkollegen und Kunden sind da noch traditionell geprägt und sie haben das Sagen. Wenn ich also moderne Webstandards unter der Haube verkaufen will, ohen dass der Kunde es merkt, muss ich pixelperfektes Design zumindest simulieren! Außerdem habe ich im letzten Absatz vom CSS-Pixel geredet, der ja eine sehr dehnbare, flexible Größe ist und sich gar nicht so sehr von em unterscheidet, wie es zunächst den Anschein haben mag. Kennste doch, oder?

  11. Daniel am 13. Dezember 2006 #

    Ich will cm. Ich will einen realistischen Bezug auf die gerenderte physikalische Endgröße. 100, 120 oder 350 ppi, das Ergebnis sollte nur besser aussehen, aber nicht wirklich größer oder kleiner werden. Bis der Browser den PPI-Wert seines Rechners kennt werde ich da noch warten müssen.. aber das ist der Plan. Das alles was als Vektor machbar ist natürlich auch erst im Browser zu pixeln wird ist klar, Bilder werden tendenziell etwas größer als nötig geliefert, der Browser braucht schöne Skalierung dafür. Wie auf dem mac zum Beispiel. Das wär schön :)

  12. Hauke Rehfeld am 13. Dezember 2006 #

    Daniel: das macht nur begrenzt Sinn – denn auf meinem 12« Notebook moechte ich alles kleiner haben als auf meinem 19« Flachschirm. Daher die Idee des relativen CSS-‘Pixels’, das individuell in der Groesse angepasst werden kann.

  13. Marc am 13. Dezember 2006 #

    Im Zusammenhang Pixel/em-Umrechnung ist vielleicht dieses Dashboard-Widget interessant:

    http://www.qxm.de/widget/20060731-095423/designers-toolbox-1-0-2

  14. Struppi am 13. Dezember 2006 #

    Jede Einheit hat ihren Verwendungszweck.

    em sollte da eingesetzt werden wo Größen relativ zur Schriftgröße wichtig sind, z.b. bei einer typischen Menüleiste, dort läßt sich die Breite an den längsten Eintrag in em sehr schön anpassen und perfekt skalieren – nichts verrutscht.

    Für kleine Werte ist pixel definitiv die bessere Wahl. Bei Abständen kommt es darauf an, soll es proportional sein (z.b. Abstände Überschrift zu Textabsätzen), dann em. Soll einfach nur ein mindest Abstand vorhanden sein, dann dürfte px sinnvoller sein.

    Für Bereiche die sich auf das Browserfenster beziehen (und für die nicht oben genanntes gilt) ist % sinnvoll.

    Ist doch ganz einfach (zugegeben – problematisch wird es, in dem Falle wenn mit pixel genauen Grafiken gearbeitet werden muss)

  15. at am 13. Dezember 2006 #

    @Marc:
    In diesem Zusammenhang ist vielleicht interessant, dass »Pixel/em-Umrechnung« prinzipiell nicht seitens des Gestalters vorgenommen wird, sondern seitens des Nutzers.

  16. M G Berberich am 13. Dezember 2006 #

    @Hauke:
    Klasse Idee, und wenn ich dann einen Bildschirm mit 300dpi habe, paßen gerade noch ein paar Buchstabe in vernünftiger Größe in die 800px.

    Ihr seid alle Helden: 1200dpi-Laserdrucker sind auch alle Mist, da kann ich meine 8×13 Schrift nur noch mit Mikroskop lesen!

  17. Daniel (der vom „Brief” oben) am 13. Dezember 2006 #

    @Hauke: Das Problem ist, dass das System zwar fragt, wieviele Pixel man auf dem Monitor haben will, nicht aber, welche Auflösung das ergibt (bzw. ergeben soll). Wäre das so, dann könntest Du das Display einfach auf 75dpi stellen, obwohl es 100dpi hat, den Monitor aber auf (echte) 200dpi. Am Display wäre alles verkleinert (weil Du das so willst), am Monitor alles normal. Wenn man es „richtig“ einstellt, dann ist 1« auf beiden Bildschirmen gleich lang. Einmal halt mit 100, einmal mit 200 Pixeln.

    Bei Netscape (und auch Mozilla Suite, IIRC) konnte man die Auflösung des Bildschirms einstellen: Es wurde eine Linie auf dem Bildschirm angezeigt und man sollte ausmessen, wie lange die ist. Sowas gehört aber meiner Meinung nach, getrennt für jeden Bildschirm einstellbar, ins Betriebssystem und nicht in die Anwendungen.

    MacOS ist da schon die ersten Schritte in diese Richtung losmarschiert. Vista wohl auch. Man wird sehen, was die nächsten paar Jahre da bringen. Ich sage ein MacBook mit mehr als 100dpi und passendem MacOS bis Ende 2012 voraus.

    Wobei das garnicht der Kern meines Kommentars sein sollte: Mir ging es darum, dass ich es nicht gut finde, wenn ein CSS überhaupt die (Basis-)Größe der Schrift vorgibt. Bei Menüs usw. sehe ich das ja noch ein, da verstehe ich Gerrits Einwand, dass die Abstände (und Hintergründe/Rahmen!) ein Problem sein können. Aber beim Inhalt? Wieso muss ein CSS da die Schriftgröße vorgeben?

    @Gerrit: Wer verantwortet denn das Layout von praegnanz.de, wenn nicht Du? Immerhin war das CSS, das Du als Beispiel bringst doch von hier, oder? ;-)

    Im Ernst: Wieso setzt Du die Schriftgröße für den Haupttext bei praegnanz.de? Würde mich wirklich interessieren. Ich finde die Schrift viel zu groß (obwohl sie objektiv gesehen nur minimal größer ist als meine Standard-Schrift, aber die läuft auch enger und wirkt schlanker als die Lucida Grande – die Nu Sans, falls es jemanden interessiert).

    Wie würde die Nu Sans als Schrift im Portrait abschneiden? Sie ist zwar nicht frei, aber interessiert würde mich, was Du von ihr hältst. Ich habe lange nach einer Monospaced gesucht, die meinen Ansprüchen gerecht wurde (Programmierung: gut zu unterscheidende Zahlen und Klammern und anderes) und bin dabei über die Nu Sans Mono zur Nu Sans gekommen. Letztere hab ich mir dann mit dazu gekauft, weil ich sie am Bildschirm sehr gut zu lesen fand.

  18. Gerrit am 13. Dezember 2006 #

    Standardschriftgröße der Browser ist bei 100 % Zoom 16 Pixel, hier habe ich 14 Pixel, also deutlich kleiner als Standard, dennoch deutlich größer als der »wirkliche« Standard im Web, der liegt bei 11 oder 12 Pixel.

    Warum ich überhaupt eine Basisschriftgröße festlege? Damit ich dem Surfer ein unverbindliches Layout-Angebot machen kann, dass er nutzen oder abwandeln kann. Schau her, ich bin immer noch Designer und habe Spaß daran, zu gestalten. Gestaltung bedingt immer Abkehr von der völligen Generität (Gibt’s das Wort?). Das würde man Gestaltungsverweigerung nennen. Da ich jedoch gerne gestalte, gibt’s bei mir auch Basisschriftgrößen und Spaltenbreiten und Abstände und den ganzen Kram. Und wer Lust hat, kann mit seinem Browser an seinen Parametern schrauben, um das Design entsprechend umzubiegen. Wer Lust hat. Die meisten machen das freilich nicht!

  19. at am 14. Dezember 2006 #

    »Die meisten machen das freilich nicht!«
    Stimmt, die ärgern sich bloß.

  20. Dirk am 15. Dezember 2006 #

    Ich halte EM nicht für eine veraltete Übergangslösung, sondern für einen sinnvollen Ansatz auf dem Ziel zur auflösungsunabhängig optimalen Darstellung von Webseiteninhalten.

    Deine 14px sind bei 1280px-Auflösung gut lesbar – keine Frage. Auf einem 24’‘ Mac-Display mit ca. 2500px ist die Schriftgröße durch die höhere Auflösung allerdings nur noch halb so groß, also gefühlte 7px (alles andere als optimal). Ein Besucher mit einem solchen Monitor muss also bei jedem Besuch deiner Seite, bzw. auf jeder Einzelseite, die Schriftgröße anpassen, um in den Genuss einer akzeptablen Schriftgröße zu kommen.

    Pixelangaben halte ich immer mehr für ungeeignet, da die Auflösungen der verschiedensten Darstellungsmedien heute viel stärker variieren als noch vor 2..3 Jahren. Je größer die Auflösungen werden, desto weniger wichtig ist es, ob die Schriftgröße nun 16 oder 16,477 Pixel hoch ist. Eine Kantenglättung findet unter den meisten Betriebssystemen in jedem Fall statt.

    Sicherlich ist EM nicht ganz so einfach anzuwenden, da der Bezug zum Elternelement besteht, allerdings sehe ich die Schwierigkeiten eher darin, Gewohnheiten zu ändern. Die Regeln für den Einsatz von EM sind etwas anders, daran muss man sich gewöhnen. Danach überwiegen nach meiner Ansicht aber eindeutig die Vorteile.

    In der Regel ist die Diskussion EM/PX allerdings verbunden mit einer generellen Layoutphilosophie. Wer pixelbasiert arbeitet, will absolute Kontrolle bzw. ist diese gewohnt. Flexible Layouts arbeiten jedoch anders. Hier hat der Nutzer das Sagen. Bei der Erstellung flexibler – und damit pixelunabhängiger – Layouts ist eine ebenso vom Pixeldenken losgelöste festgelegte Wahl der Schriftgröße nur konsequent. Das Layout wird damit von ganz allein medienunabhängiger, denn mit EM kann ich mich auf die Standardschriftgröße des aktuellen Ausgabemediums beziehen, welches heutzutage nicht mehr nur der heimische PC sein muss.

    Just my 2ct.
    Dirk

  21. Jens Meiert am 19. Dezember 2006 #

    »px« sind bekanntlich per se »legitim«, da eben keine »absolute« Einheit, und mit »em« kann man hervorragend rechnen und somit auch arbeiten (nebenbei bemerkt sind drei Nachkommastellen selten da nur bei großen Maßangaben erforderlich).

    Zu Richard Rutters Artikel sowie dem Yahoo-»Reset«-Stylesheet: Eher Finger weg als gleich adaptieren. Der Code ist dermaßen unelegant, dass man sich fragen muss, ob die Leute keine anderen Hobbies haben als alle je gekannten HTML-Elemente in Stylesheets zu gruppieren (universeller Selektor, hmm?).

  22. Matthias am 29. Dezember 2006 #

    Ich sehe auch vielmehr eine Berreicherung durch em-Größenangaben. Letztlich ist es etwas konzeptioneller. Wenn man sich allerdings über die Vererbung bewußt ist, dann ist es doch kein Problem selbst pixelgenaue Layouts sind mit em absolut möglich, solange man im body 100.01% Schriftgröße definiert und dann den Teiler 16 verwendet. Alle anderen Teiler haben nach meiner Erfahrung Rundungsfehler in verschiedenen Browsern. Hinzu kommt: Wozu brauch man font-size-Angaben in Boxen? Schriftgrößen legt man im body fest und dann wieder allgemein für Tags, die auch sinnvollerweise eine Schriftgröße brauchen (wie p, hx, li, a … u.s.w.) . Eben immer dort wo auch Schrift drin ist ;-) Dann hat man mit der Vererbung keine Probleme.

    Gruß Matthias

  23. Peter am 5. Januar 2007 #

    Ich habe eine Bildschirmauflösung von 1600×1200 Pixeln und surfen im Web ist (zumindest mit dem IE 5 / 6) eine reine Qual, da ich auf den meisten Webseiten leider nicht die Schriftgrößen so anpassen kann wie ich es will.

    Mit Opera oder Firefox bin ich besser bedient, aber insbesondere Computeranfänger werden ihre Schwierigkeiten haben, sich an einen neuen Browser zu gewöhnen, nur weil Webdesigner nicht verstehen (wollen), das jeder Rechner anders ist.

    Wenn ich im Opera oder Firefox dann die Schriftgrößen angepasst habe, geht die Qual weiter.
    Das halbe Browserfenster ist leer weil wieder jemand »Bildschirmoptimiert« hat und die Texte überlappen sich, weil jemand unbedingt height:20px für die vertikale Navigation verwenden muss, weil das tolle Hintergrundbild dann genau passt.

    Meistens werden solche Webseiten gerade von denen »designt«, die am lautesten von »Usability« reden.

  24. danofthenorthstar am 5. Januar 2007 #

    Interessanter Artikel und gute Kommentare, finde ich. Ich möchte an dieser Stelle gerne anmerken, daß der Internet Explorer 7 eine gute Zoomfunktion hat – ähnlich wie Opera 9.

    MozFF muss hier noch nachbessern, aber wahrscheinlich gibt’s auch schon die passender Erweiterung – nur kenne ich sie halt noch nicht. Mit »Zoomfunktion« meine ich natürlich den browserbasierten Zoom, unabhängig vom OS.

    Mir geht es bzw. ging es beim WebDev eigentlich immer nur um die Skalierbarkeit (»Zoom«) und weniger um die Manipulation der Schriftgröße. Wenn ich einen Vertrag unterschreibe und etwas ist zu klein gedruckt, benutze ich zumindest eine Lupe …

    PS: Der IE7 ist eigentlich ein ganz guter Browser. Oh mein Gott, daß ich das mal schreiben darf.

Kommentar schreiben

Nutzt Textile zum Strukturieren eures Textes.
SEO-Beiträge werden gelöscht, auch bei thematisch passendem Spam.