praegnanz.de büro für intervernetzte medien

Gerrit, 17.02.2010

Warum ich Pixel für CSS-Schriftgrade verwende

Wer sich meine Frontend-Projekte der letzten Monate genau anguckt, wird sicher schnell feststellen, dass ich etwas getan habe, was vor gar nicht langer Zeit ein Sakrileg gewesen ist: Ich habe feste Pixelangaben für den Schriftgrad verwendet!

»Steinigt ihn!«

höre ich die Kritiker rufen, denn es gibt immer noch eine weitverbreitete Unwissenheit in diesen Dingen. Ich versuche das mal zu erläutern.

Von ca. 2003 bis 2008 galt das Credo, dass nur em oder Prozente für Schriftgrad-Angaben tauglich sind. Diese Angaben haben die Eigenschaft, dass sie auf Unterelemente vererbt werden. Wenn ich also einer Seitenbox ein font-size: 0.8em; zuweise, dann wird sich ein normaler Textabsatz darin kleiner wiederfinden als ein Textabsatz in der Hauptspalte, obwohl beide Absätze möglicherweise mit font-size: 1em; gestylt wurden. Das Elternelement bestimmt also unter Umständen mit, welchen Schriftgrad das Kindelement haben soll.

So weit, so unpraktisch. In vielen Fällen führt diese Vererbungskiste nämlich zu schwierigen Situationen, insbesondere, wenn man mit »krummen« Basis-Schriftgraden arbeitet. Will man nämlich, dass Fonts in auf 13 oder 15 Pixel herausgerendert werden, kommt man sehr schnell in die Situation, mit vielen Nachkommastellen hantieren zu müssen, damit der Browser nicht mit »berechneten Größen« von 13.666 Pixeln hantieren muss. Das führt zu Rundungsfehlern, und das kann nicht schick sein.

Ich spare mir diese ganze Sache und sage dem Browser direkt, wieviele Pixel er (in der 100%-Zoomstufe) verwenden soll, was mir das Leben als CSS-Entwickler extrem viel einfacher macht. Das Missverständnis vieler Entwickler liegt nämlich darin, dass sie denken, ein CSS-Pixel ist identisch mit einem Hardware-Pixel des Bildschirms. Dem ist nicht so. Nur in der 100%-Ansicht des Browser sind die beiden Pixelwelten identisch. Sobald ich mit STRG + oder STRG – die Zoom-Funktion des Browser betätige, decken sich die beiden Pixelmatrixen nicht mehr und der Browser berechnet und rundet die erforderlichen Hardwarepixelmaße der Schriften für die jeweilige Zoomstufe.

Das ist alle logisch und klar. Doch warum galt der CSS-Pixel lange Zeit als verpönt? Der einzige Grund, der mir einfällt (man möge mich korrigieren *) ist die Unfähigkeit des Internet Explorer 6, Schriften zu vergrößern oder zu verkleinern, die in Pixeln definiert wurden. Denn der IE6 hat den CSS-Pixel 1:1 in den Hardwarepixel umgesetzt. Das führte zur Situation, dass vor allem Liebhaber von größeren Schriften (Sehbehinderte, Ältere und viele andere) keine Chance hatten, dem 10-Pixel-Wahnsinn der Herren Webdesigner zu entkommen.

Der IE 6 ist kein wirklich maßgeblicher Browser mehr, und wer ihn heute noch nutzt, ist selber Schuld. Diejenigen, die im IE 6 die Funktion zur Schriftvergrößerung gefunden haben, sind sicherlich auch in der Lage gewesen, den Update-Button zu finden. Heute arbeiten alle modernen Browser mit Seitenzoom, vergrößern also alle Seitenelemente nach Belieben. Es gibt keinen Grund mehr, auf Schriftgrößenangaben in einer Einheit zu verzichten, die innerhalb des Bezugssystems konstant ist. Und das ist nunmal die Pixelangabe.

(Warnung: Der Zeilenabstand line-height ist ein anderes Tier! Er sollte weder in Pixeln, noch in em, sondern ganz ohne Maßeinheit gesetzt werden, damit er stets abhängig von der Schriftgröße ist, egal, wie sich diese ändern mag. Zu den Rundungsfehlern beim Zeilenabstand mach ich dann nochmal einen eigenen Artikel…)

  • Update: Aus den Kommentaren gefischt: Einige User stellen in den Browser-Grundeinstellungen eine Basis-Schriftgröße ein, die vom Standard-Wert 16 abweicht. Diese Einstellung wird bei der Verwendung von CSS-Pixeln tatsächlich übergangen. Davon nicht berührt ist jedoch die (weitaus üblichere) Seiten- oder Textskalierung. Diese funktioniert mit Pixeln und em gleichermaßen. Auf Spiegel Online kann man schön sehen, wie eine Kombination genutzt werden kann: Headlines und Fließtext wird abhängig von der Basis-Schriftgröße gerendert, aber Layout-kritische Dinge wie Navigationstexte in Pixeln gesetzt

76 Kommentare

  1. Marcus Kober am 17. Februar 2010 #

    Ich sehe das auch so: die Angabe der Schriftgrößen in Pixeln erleichtert das Design mittels CSS ungemein. Umständliche Umrechnungen braucht man dann nicht mehr.
    Auch bei meinen Projekten innerhalb ungefähr eines Jahres gebe ich die Größen nur noch in Pixeln an. Allerdings muss ich auch dazu sagen, dass das alles Projekte waren, bei denen es durchaus gewollt war, alte Browser nicht mehr zu berücksichtigen. Und ich bin auch sehr froh, dass sich so langsam durchsetzt, den IE6 als hoffnungslos veraltet bezeichnen und damit vernachlässigen zu dürfen.

  2. Paul am 17. Februar 2010 #

    Wer seine Schriftgrößen mit px angibt, gießt seine Webseiten zunächst auch in Photoshop. Davon bin ich vor langer Zeit abgewichen.

  3. Gerrit am 17. Februar 2010 #

    @Paul: Bestechende Argumentationskette!

  4. molily am 17. Februar 2010 #

    »warum galt der CSS-Pixel lange Zeit als verpönt?«

    Siehe:
    Die Frage nach der richtigen Schriftgröße (März 2006)
    Lesbarkeit von Texten im Web (März 2007)

    Die Designer entscheiden für die Websurfer, was als lesbar zu gelten hat. Das führte (und führt immer noch) dazu, dass manche Fließtexte in 10px gesetzt sind, andere in 16px, während der Benutzer unter den gegebenen technischen Bedingungen nur eine sehr eingeschränkte Spanne an Größen für lesbar erachtet.

    Zu der Zeit gab es generell noch keine Page-Zooms in den Browsern, Opera war damals der einzige. IE konnte wie gesagt überhaupt kein px skalieren und Firefox nur Text, nicht das gesamte Layout. Somit hatten die meisten Benutzer keine Möglichkeit, Texte vernünftig zu skalieren (wie du auch schreibst).

    Jedenfalls war die Gesamtsituation unbefriedigend. Und teilweise ist sie das auch heute noch, weil die Größen für Fließtexte immer noch auseinanderklaffen. Wenn man das zuende denkt, gibt es keine One-size-fits-all-Lösung. 15 oder 16px sind sicher in Ordnung und auf vielen Geräten für viele Benutzer gut lesbar.

    Aber cooler wäre es doch, so die Idee damals, dass jeder die Schriftgröße sieht, die er gerne hätte, ohne auf jeder Website nachskalieren zu müssen. Daher war die weitergehende, ziemlich radikale Idee von 1em, sich annehmend auf die im Browser voreingestellte Größe zu beziehen (also eben nicht body { font-size:0.8em }, sondern Fließtext in 1em = Browservorgabe). Wenn das viele machen würden, so die Argumentation, könnte der Benutzer diese Voreinstellung justieren und würde die Texte im Web gemäß seinem individuellen Bedürfnis sehen.

  5. Usul am 17. Februar 2010 #

    Und ich dachte immer, das feste Vorgeben von Pixeln hat den Nachteil, dass es sich überhaupt nicht darum kümmert, mit welcher Auflösung (DPI!) bzw. welchen Einstellungen im Browser vorhanden sind. Wenn ich 10 Pixel vorgebe, dann wird das wahrscheinlich auf einem Gerät mit 200 DPI oder mehr zu klein sein, auf einem Monitor mit nur 72 DPI (gibt es sowas noch?) vielleicht sogar zu groß. Wenn ich dagegen 1em nehme und darauf baue, dass der Browser bzw. das Betriebssystem dieses Basisgröße brauchbar definiert hat, dann sehe ich auf jedem Gerät eine brauchbare Größe.

    Das Killerargument mit man kann ja zoomen ist irgendwie sehr bequem gedacht.

  6. Gerrit am 17. Februar 2010 #

    @molily: Ich habe noch niemals gesehen, dass irgendjemand irgendetwas anderes als Basis-Schriftgröße im Browser eingestellt hatte als 16 Pixel. Wie so vieles war dies eine Möglichkeit, die niemand genutzt hat, weil sie zu ganz anderen Problemen geführt hätte, nämlich zerschossene Layouts auf vielen Websites.

  7. Gerrit am 17. Februar 2010 #

    @Usul:

    »Wenn ich dagegen 1em nehme und darauf baue, dass der Browser bzw. das Betriebssystem dieses Basisgröße brauchbar definiert hat, dann sehe ich auf jedem Gerät eine brauchbare Größe.«

    Das ist bis heute jedoch nicht passiert. Kein mir bekanntes Betriebssystem wertet automatisch die PPI des Monitors aus und verändert darauf basierend die Basis-Schriftgröße im Browser.

  8. Mo am 17. Februar 2010 #

    »Der IE 6 ist kein wirklich maßgeblicher Browser mehr, und wer ihn heute noch nutzt, ist selber Schuld.«

    Je nachdem in welcher Statistik man nachschaut (ob man ihr glaubt, steht jedem frei) kann der IE6 immernoch um die 20% haben. Das macht ihn eigentlich schon noch zu einem relevanten Browser.

    Außerdem gibst du vielen Leuten unrecht, die gezwungener Maßen den IE6 nutzen müssen, weil die Intranets der Firmen bei denen sie arbeiten »damals« erstellt wurden und nur mit dem IE6 lauffähig sind. Geld für eine Migration des Intranets ist ja eh nicht vorhanden, läuft ja, und die parallel Installation von z.B. FF bedeutet doppelten Pflegeaufwand für die eh schon chronsich überlastete IT.

    Ich will den IE6 nicht verteidigen, nur die armen Leute die ihn noch benutzen müssen.

  9. molily am 17. Februar 2010 #

    »Ich habe noch niemals gesehen, dass irgendjemand irgendetwas anderes als Basis-Schriftgröße im Browser eingestellt hatte als 16 Pixel.«

    Klar, weil sich die besagte Idee historisch nicht durchgesetzt hat bzw. schon damals mit diesem Argument abgelehnt wurde. Wenn es kein Layout gibt, was sich auf die voreingestellte Schriftgröße bezieht, dann gibt es auch keinen Grund, sie nach den Bedürfnissen einzustellen (Henne-Ei-Problem).

    Ich wollte auch nur den Hintergrund dieser Diskussion beleuchten. Wichtig erscheint mir nach wie vor die Feststellung, dass Pixelgrößen die grundlegenden Probleme nicht lösen. Reflektierter sind die Webdesigner seit 2006 leider nicht geworden – die Diskussion um Lesbarkeit ist vielmehr passé.

    Während also auf deren Seite die Weiterentwicklung ausblieb, haben die Browserhersteller die Benutzer befähigt, sich über das Diktat des jeweiligen Webautors hinwegzusetzen. Nun gut.

  10. Gerrit am 17. Februar 2010 #

    @molily: Sehr gut zusammengefasst!

  11. Thomas am 17. Februar 2010 #

    @Mo

    Der IE6 ist zumindest in Deutschland deutlich unter 10%

    Und das ist wohl was für uns hier maßgeblich ist, oder? Dass der IE6 in China 60% hat ist ja nicht unser Problem, fließt aber in die oft zitierten internationalen Marktanteile immer stark ein, weil dort die meisten Internetnutzer sitzen (zusammen mit den USA wo der IE6 auch noch stärker ist).

  12. Søren am 17. Februar 2010 #

    Einer unserer größten Kunden ist zur Einhaltung der Barrierefreiheit verpflichtet und hatte (hab grad nachgeschaut) in der Zeit vom 01.01.2010 bis heute einen IE6 Besucheranteil von knapp über 18%. Zumindest sagt Urchin das.

    Und jetzt?

  13. Gerrit am 17. Februar 2010 #

    Naja, es geht ja nicht darum, dass die Seiten im IE6 unbenutzbar werden, sondern nur darum, dass die Schrift nicht mehr skaliert werden kann. Das ist nicht lebenswichtig.

  14. Nico am 17. Februar 2010 #

    Nachteile hat das ganze aber in der Pflegbarkeit des CSS. Wenn ich einmal die Größe ändern will (auch denkbar für Webseiten die den Nutzer verschiedene Schriftgrößen einstellen lassen), dann muss ich überall die Größen umrechnen und ändern. Habe ich einmal eine feste Größe im body-Element definiert und daraufhin mit ems gearbeitet, bleiben die Verhältnisse gleich auch wenn ich die Größe ändere. Und das Problem der Vererbung von em-Angaben ist kein echtes Problem, da es eigentlich nicht vorkommen sollte. Wenn ich wie in deinem Beispiel eine Seitenbox mit 0.8em formatieren, dann doch genau deswegen, weil ich alles darin etwas kleiner haben will. Wenn ich nur manche Inhalte darin kleiner haben will, dann habe ich die Formatierung an der falschen Stelle sitzen. Von daher ist das für mich eine Lösung, für die es eigentlich kein Problem gibt.

  15. Gerrit am 17. Februar 2010 #

    @Nico: Das Problem ist das »etwas« kleiner :-) Ich will es nicht dem Browser überlassen, ob er sich für 11 oder 12 Pixel entscheidet, weil der berechnete Wert bei 11.5 Pixel liegt. Unter Umständen sieht eine Schrift unter Windows bei 11 Pixel dramatisch anders aus als unter 12 Pixeln. Ich will hier präzise und ohne Nachkommastellen arbeiten können, um in der 100%-Ansicht ein kontrolliertes Ergebnis zu erreichen. Was der user mit seinem Zoom anstellt, kann ich dann nicht mehr kontrollieren (was gut so ist), aber den Ausgangszustand möchte ich gerne soweit definieren, wie es mir möglich ist.

  16. Maik am 17. Februar 2010 #

    Sowohl px als auch em sind als Einheiten für die absolute Schriftgröße falsch. Die korrekte Einheit ist pt. px berücksichtigt die ppi des Displays nicht, em ist nicht absolut. Das (zutreffende) Argument, dass pt mit manchen Browser-Betriebssystem-Grafiktreiber-Kombinationen falsch dargestellt wird, ändert nichts daran, dass das prinzipiell die richtige Einheit ist. Ferner sollte für Fließtext keine Schriftgröße gesetzt werden; es ist Aufgabe des anzeigenden Systems, als Standardschriftgröße etwas lesbares zu wählen.

    CSS-Pixel sollten nur benutzt werden, wenn sich eine Größenangabe an einem Objekt orientieren muss, das technisch aus Pixeln besteht (in der Regel also ein Bild).

    em und die verwandte Einheit ex werden selbst aus der eingestellten Schrift und -größe abgeleitet; dementsprechend ist es idiotisch, daraus wieder eine Schriftgröße abzuleiten. Wenn man die Schriftgröße relativ zur geerbten Schriftgröße angeben will, macht man das einfach dimensionslos, mit oder ohne %. Das em dazwischen zu schalten erzwingt zwei völlig sinnlose Umrechnungen. Richtig verwendet man em und ex, wenn man die Größe einer Box an der Schriftgröße orientieren will.

    Zu deinen »ist mir noch nie begegnet«-Kommentaren 6 und 7:

    Auf Rechnern mit hochauflösendem Display stelle ich durchaus die Standardschriftgröße auf 20px um. Dass das bei den meisten Seiten nichts bringt, weil irgendein Trottel font-size: 12px für den Fließtext gesetzt hat, ist sehr schade. Meine Plus-Tasten sind schon ganz abgenutzt.

    Unter Linux beziehen alle von mir getesteten Browser in pt angegebene Schriftgrößen korrekt auf die ppi des Displays. Ich kann es nicht persönlich verifizieren, aber ich gehe davon aus, dass Mac OS das auch macht. Bei allem berechtigten Hass, den ich auf Apple habe – solche Dinge machen die normalerweise einfach richtig. Unter Windows ist das aber natürlich völlig kaputt, der kennt nur Displays mit 96 und 120 ppi, man muss von Hand einstellen, welches davon man gerne hätte, und jede zweite Software funktioniert nicht mehr richtig, wenn man 120 einstellt, weil fast niemand diese Einstellung ändert und daher niemand seine Software dagegen testet. Pfui.

  17. Gast am 17. Februar 2010 #

    Ein Aspekt wurde noch nicht erwähnt, durch die Größenangabe in Pixel ist es im IE 7 und 8 nicht mehr möglich nur den Text zu vergrößern. Dem Nutzer bleibt dann nur noch der Zoom.

    Da ich versuche mich bestmöglich auf den Nutzer einzustellen, werde ich auch weiterhin die Schriftgröße in em oder % angeben. Als Basis dient dabei natürlich 1em beziehungsweise 100% für den Fließtext, denn das ist die konsequente Umsetzung des Nutzerwunsches.

    Leider muss ich mit ansehen, wie wieder öfter zur Angabe in Pixeln geraten wird. Daran kann ich nichts ändern, schließlich muss jeder selbst entscheiden wie er die Größenangabe vornimmt, es schmerzt allerdings, dass die Belange der Nutzer offensichtlich allzu oft dabei vergessen werden.

  18. Gerrit am 17. Februar 2010 #

    In meiner bisherigen karriere als Webdesigner habe ich schon viele Kundenwünsche und Beschwerden gehört. Nicht ein einziges Mal war aber der Wunsch nach besser sklaierbaren Schriften dabei.

    All diese Möglichkeiten mag es in den Browsern geben. Allein, sie nutzt kein normaler Endanwender.

  19. Mario Fink am 17. Februar 2010 #

    »Der IE 6 ist kein wirklich maßgeblicher Browser mehr, und wer ihn heute noch nutzt, ist selber Schuld.«

    Genau das ist, meiner Erfahrung nach, nicht der Fall. Wie Mo schon angedeutet hat, sind die IE6 Benutzer eher dazu verdammt ihn zu verwenden. Solch eine Annahme kann dann auch mal nach hinten los gehen.
    Nur um das klar zu stellen: ich bin nicht der Meinung, dass man eine Menge Zeit investieren sollte um Seiten im IE6 genau so aussehen zu lassen wie in modernen Browsern—zu einfach sollte man es sich aber auch nicht machen.

  20. Tilman am 17. Februar 2010 #

    Die Argumentation der unterschiedlichen Auflösung heutiger Displays finde ich sehr interessant, hatte ich bisher kaum in Betracht gezogen. Allerdings kommt das Problem erst in den letzten ein bis zwei Jahren verstärkt zum tragen, vorher waren meiner Wahrnehmung nach Displays mit höherer Auflösung doch eher spärlich gesäht.
    Ob die zunehmende Verbreitung hochauflösender Anzeigegeräte aber dazu führt, dass das Groß der Entwickler auf relative Maße für die Schriftgröße umschwenkt, wage ich stark zu bezweifeln. Ich sehe da viel eher einen Trend zu entsprechend größeren absoluten Schriftgraden – wie er in den letzten Jahren schon wahrzunehmen war.

    Zum IE: Vor dem Hintergrund, dass der IE 6 hier in Deutschland lediglich in Unternehmen stärker vertreten ist, muss man sowieso Projektbezogen entscheiden, ob sich der Aufwand Fallbacks für diesen Browser anzubieten, überhaupt lohnt. Ich glaube kaum, dass der Großteil der 20% irgendwelche relevanten Hits/Visits sind. Sind sie das, dann hat das Unternehmen sicher ein Interesse daran seinen Arbeitnehmern ein effizienteres Werkzeug in die Hand zu geben.
    Und ob der IE in den USA oder in China stark verbreitet ist muss doch einen Betreiber nicht interessieren, dessen Website maßgeblich auf den deutschen Markt zugeschnitten ist.

  21. mike am 17. Februar 2010 #

    @Maik: http://dciwam.de/faq/gute-websites/einheit-pt

    @molily: page-zoom ist keine Lösung, zumindest nicht bei Auflösungen kleiner/gleich 1024, dort ist es reiner Rassismus eine Zumutung. Das selbe gilt für elastische Layouts.

    Zum Thema; kann ich nicht nachvollziehen, wass denn nun die Vorteile von px zu em sein sollen. Dass (relative) Schriftgrössen vererbt werden sehe ich eher als Vorteil, denn als Nachteil. Wenn ich mit Rundungsfehlern zu »kämpfen« habe, dann muss ich eben ein wenig rumrechnen.

  22. Willi am 17. Februar 2010 #

    Zu dem Problem, dass em-Werte vererbt werden: CSS3 definiert die Einheit rem (»root em«), die sich immer am Root-Wert und nicht am direkt übergeordneten Objekt orientiert. Bis CSS3 flächendeckend unterstützt wird dauert es zwar noch eine Weile, aber ich halte es für falsch, jetzt wieder auf absolute Werte umzusteigen.

    Nebenbei kann man die Seitenbox doch auch mit width und height proportionieren, dadurch verändert sich die Schriftgröße nicht.

    Das mit dem Runden auf Pixelwerte ist dagegen ein Problem, an das ich noch nicht gedacht habe. Ich habe das aber auch noch nie beobachtet, durch die Schriftglättung sieht doch eh immer alles sauber aus … ;)

  23. Gerrit am 17. Februar 2010 #

    @Willi: »Root em« klingt interessant und könnte viele der besprochenen Wünsche aller Seiten erfüllen! Kannte ich noch gar nicht!

  24. Peter am 17. Februar 2010 #

    @Gerrit, 18:

    Deine Kunden sind keine normalen Endanwender und dürften in der Regel nicht wissen, wie ihre Kunden mit dem Browser umgehen. Wenn du von deinen Kunden auf die Kunden deiner Kunden schließt, machst du möglicherweise einen Fehlschluss.

    Deine Schrift hier ist mir zu klein, ich zoome automatisch um eine Stufe. Natürlich nicht die ganze Seite, ich nutze den Textzoom, damit ich keine waagrechten Scrollbalken bekomme. Ich will lesen, nicht betrachten.

    Vielleicht noch eine Anregung: Mag sein, dass der Anteil der IE6-Nutzer um 10% liegt. Aber das sind immer noch mehr als 3 Millionen nur in Deutschland. Wenig? Wenn nur jeder 1000ste anruft und sich beschwert sind das ganz schön viele :-)

  25. Thomas Maier am 17. Februar 2010 #

    Einfach für den body font-size: 62.5%; definieren und Schriftgrößten mit der Einheit em nur auf die innersten Tags anwenden. 1.4em entspricht dann 14px. Die Methode hat sich durchgesetzt und ist meiner Meinung nach in vielerlei Hinsicht die beste.

  26. Gast am 17. Februar 2010 #

    @Gerrit
    Deine Kunden mögen da keinen Wert drauf legen, aber das ist ja »nur« der Geldgeber. Die eigentlich Zielgruppe auf die man sich einstellen sollte, sind die Besucher der Seite.

  27. Gerrit am 17. Februar 2010 #

    @Peter: Wenn sich die Kunden meiner Kunden beschweren, dann wird die Beschwerde aber schneller an mich weitergeleitet als Du »Flexibles Layout« sagen kannst :-) Das Argument zählt also nicht.

    Und niemand verbietet Dir oder jemand anderem, die Schriftgröße auch unabhängig vom Rest des Layouts anzupassen. Fast alle meine Layouts verkraften das ganz gut. Das hat ja auch nichts mit @em@ oder @px@ zu tun, sondern mit dem Nicht-Festlegen von vertikalen Höhen.

    Ändert nichts an der Tatsache, dass ich die 10% IE6-Nutzer ja nicht etwa ausschließe, sondern ihnen nur eine Funktion wegnehme, die sowieso kaum jemand benutzt hat.

  28. Tim Tepaße am 17. Februar 2010 #

    Ich bin einer der Nerds, die sich die Defaultschriftgröße im Browser anpassen, aber hey, Nerd. Viel wichtiger für mich ist, dass ich zusätzlich eine Mindestschriftgröße eingestellt habe, nichts großartiges, nur 13 pt, das ich als angenehm empfinde.

    Bei pixelfixierten Winzschriften merke ich dann manchmal, wie Safari nur die Schrift hochskaliert, aber den Rest des Layouts nicht. Das kann dann zu Problemen führen, wenn benötigte Navigationslinks irgendwohin rutschen, wo ich sie mit der Maus nicht erreichen kann. Für den extrem amibitionierten Webdesigner wäre es dann geschickt, sein Pixellayout auch mit einer nur hochskalierten Schrift zu testen, um zu prüfen, ob es da irgendwo Probleme hinsichtlich Lesbarkeit und vor allem Bedienbarkeit geben könnte.

    Rein auf em basierende Layouts haben dieses Problem eher nicht; allerdings wie molily sagt, ist es wohl vergeblich, noch darauf zu hoffen.

  29. Martin Ibert am 17. Februar 2010 #

    Wenn Du die Größe in Pixel vorgibst, dann ist das Ergebnis doch, daß der Text auf einem Full-HD-Display anders aussieht als auf einem 1366×768-Display mit gleicher physischer Schirmgröße. Es sei denn, man skaliert das ganze Layout und zerschießt damit die Fotos. Das kann aus meiner Sicht nicht gut sein.

    Außerdem finde ich es eine absolute Zumutung, wenn ich ständig rumzoomen muß, weil irgedein Genie eine Schriftgröße von 12px spezifiert hat, die ich auf meinem Full-HD-40-Zoll-Fernseher vom Sofa aus natürlich nicht lesen kann.

    Aber auch die Angabe in pt, die ja im Ergebnis versucht, die physische Größe auf dem Medium zu bestimmen, führt in die Irre, denn welche Größe dafür angemessen ist, hängt vom Betrachtungsabstand ab. (Siehe Beispiel oben.)

    Je weiter die Betrrachtungsabstände, Schirmgrößen und DPI-Werte auseinanderdriften — vom Smartphone über Tablet oder Netbook bis zum Full-HD-Fernseher oder Monsterbeamer —, desto klarer wird, daß sowohl Pixel als auch pt kein geeignetes Maß sind. Allein der Benutzer weiß, welche Schriftgröße er komfortabel lesen kann, und hat sie hoffentlich passend in seinen Browsereinstellungen stehen. Willst Du das variieren, dann steht Dir dafür die Skalierung von em-Vielfachen und -Bruchteilen zur Verfügung.

    Wer wie Du Webdesign zum Broterwerb betreibt, muß sich natürlich an den Wünschen der zahlenden Kundschaft orientieren. Deswegen solltest Du aber nicht vergessen, daß das, was Du tust, FALSCH ist, und Du es nur tust, weil Du jung bist und das Geld brauchst. Ich bin in der glücklichen Lage, Webdesign nur als Hobby zu betreiben. Deswegen sind eigentlich alle meine Designs optisch etwas langweilig, weil (zumindest weitgehend) sauber konzipiert und umgesetzt und natürlich ohne px- oder pt-Angaben bei Schriftgraden. (Bei Bildern ist das was Anderes, aber das führt hier zu weit, der Kommentar ist eh schon zu lang …)

  30. Gerrit am 17. Februar 2010 #

    @Martin: Das hat mit jung sein und Geld brauchen nichts zu tun. Die Standardschriftgröße ist bei 99,9 % der User auf 16 Pixel voreingestellt. Korrekturen am Schriftgrad werden per Skalierung erledigt (egal, ob Nur-Text oder Fullpage-Zoom), alle sind glücklich.

    Das theoretisch schöne Gedankenkonstrukt, dass die tatsächlich gerenderte Pixelgröße von Screen-PPI, Betrachtungsabstand oder anderen Dingen abhängt, findet in der Realität nicht statt. Das ist natürlich ein Henne-Ei-Problem. Aber ich sehe die Dinge gerne pragmatisch. Und da ist eine mit mühevollen EM-Werten bestückte Seite von 99,9% der Anwender nicht von einer pixelbasierten Seite unterscheidbar.

    Dass sich hier die Individualisierungs-Fans in den Kommentaren zusammenfinden, ist logisch. In freier Wildbahn findet man das aber nicht.

  31. struppi am 17. Februar 2010 #

    Im Prinzip ist das so wie, wenn der Designer die Farbe meines Autos entscheiden will.

    Ich habe dank Pixelfontgrößen nicht die Möglichkeit, meinen Browser so zu konfigurieren, dass ich auch mit Einschränkungen (z.b. starker Kurzsichtigkeit) Internetseiten lesen kann. Ich muss auf Hilfsmittel zugrückgreifen oder relativ umständlich mit einem user Stylesheet komplett die Schriftgrößenänderung untersagen.
    Und ob wirklich 99% der Leute ihre Software nicht konfigurieren?

  32. Gerrit am 17. Februar 2010 #

    @struppi: Die simplen Tasten »STRG +« stehen Dir zur Verfügung! Mach die Schrift so groß, wie Du sie haben willst! Einzige Bedingung: Verwende nicht den Internet Explorer 6! Und wenn das Layout nicht mitzoomen soll, mache eine entsprechende Einstellung in deinem Browser. Du brauchst kein User-Stylesheet für diese simplen Dinge.

  33. wumble am 17. Februar 2010 #

    find ich gut!
    mach ich auch so, und fertig.
    Danke für den Beitrag!

  34. Bernhard H. am 17. Februar 2010 #

    Och Leute, schon mal was von Semantik gehört?

    Ich benutze px, wenn ich will dass ein Text genau X px groß ist (z.B. im Vergleich zu Bildern, wenn es eben genau passen soll), dann em, wenn ich will, dass ein Text ein bisschen größer bzw. kleiner ist als der umgebende Text (wie für <small>), und ganz selten pt, wenn der Kunde sagt »können sie die Überschrift nicht genau 2 cm groß machen«…

    Zu Pauls Ausspruch »Wer seine Schriftgrößen mit px angibt, gießt seine Webseiten zunächst auch in Photoshop« muss ich ebenso polemisch fragen: Wer seine Schriftgrößen mit pt angibt, gießt seine Webseiten zunächst auch in InDesign?

    Die Idee em zu benutzen zum Zwecke individueller Fließtextgröße ist hinfällig, da ich meine Fließtextgröße und auch die Browserfenstergröße mit dem Abstand Augen-Bildschirm ändere, den ich folglich nicht in einem User-CSS o.ä. festlegen will ;) Außerdem ist es ja wohl sehr hässlich wenn man bei kleiner Schrift endlos- und bei großer Schrift 1-Wort-Zeilenlängen hat. Das ist schon in Ordung, wenn sich das Drumherum mit skaliert.

  35. Maik am 17. Februar 2010 #

    @21, wenn man in dem verlinkten Text den (vielen, vielen) Schwachsinn streicht und den Rest zusammenfasst, landet man beim Argument: „Das Fontrendering von Windows ist total kaputt.“ Nicht falsch, aber das hatte ich schon von alleine festgestellt. Ändert nichts daran, dass pt die richtige Einheit für absolute Schriftgrößen ist. Der Einwand von @29, dass man in vielen Situationen eigentlich gar keine absoluten Größenangaben verwenden sollte, ist unabhängig davon völlig richtig; ich hatte das auch schon angedeutet.

    @25, das ist so ziemlich die einzige Variante, die es schafft, noch dämlicher als eine Pixelangabe zu sein. Eine relative Einheit verwenden in der Hoffnung, dass es absolut 10px werden? Nein, dann schreibt doch bitte einfach 10px hin. Sieht genau so scheiße aus, aber bricht wenigstens nicht auseinander, wenn jemand kommt, bei dem 5/8 der Standardgröße zufällig nicht 10px sind.

    Zum root em: Nette idee, hat aber immer noch das Problem, dass die Größe einer Schrift von der Geviertbreite einer anderen Schrift abgeleitet wird. Das ist zwar ungefähr das gleiche, aber eben nicht genau das gleiche. (Der CSS3-Draft widerspricht sich an der Stelle selbst, indem er erst sagt, das sei das selbe wie die Schriftgröße, und zwei Absätze später, das sei nicht das selbe. Da auf dem Bildschirm auf ganze Pixel gerundet wird, dürfte es in der Praxis egal sein.)

  36. Björn am 17. Februar 2010 #

    Diese Diskussion hatte ich auch schon öfter zu führen. Ich hatte auch mal versucht, meine Designs auf em umzustellen, bin jedoch gescheitert. Bei halbwegs einfachem Seitenaufbau geht das ja ganz gut, aber schnell wird’s unübersichtlich und man kriegt Probleme. Klar, es hört sich einfach an, die Textgröße nur bei den untersten Elementen zu definieren, aber in der Praxis…

    Daher bin ich auch bei Pixelgrößen geblieben und ich finde Page Zoom ist eine akzeptable Möglichkeit für Anwender, die Textgröße zu verändern. Dass dabei auch das Layout mitwächst finde ich eher willkommen, denn wenn die Äuflösung des Monitors bzw. die Sehfähigkeiten des Besuchers eine Vergrößerung des Textes notwendig machen, dann ist ja wohl auch davon auszugehen, dass Bilder etc. zu klein dargestellt werden.

    Als Schriftgröße für Fließtext benutze ich allerdings auch mind. 14px, meist sogar 15px. So schlimm zu klein kann das auf den meisten Monitoren damit auch gar nicht sein.

  37. Martin Ibert am 17. Februar 2010 #

    @36: Das ist der Punkt. Bei einfachem Seitenaufbau geht das recht gut, die Container in Prozenten und die Schrift in em-Einheiten zu dimensionieren. (Man kann sogar — schockschwerenot — die dafür vorgesehenen Schlüsselwörter von xx-small bis xx-large verwenden.

    Und bei komplizierten Seitenaufbauten sollte man sich fragen, warum die Seite denn so kompliziert aussehen muß. :-) All das wird natürlich durch das Ich-bin-jung-und-brauche-das-Geld entkräftet, denn dem beratungsresistenten halbwissenden Marketingfuzzi, der unbedingt Tahoma in 10 Bildpixel Höhe sehen will, auch wenn die Hälfte der Besucher das nicht lesen kann, kommt man ohne Velust des Auftrags nicht bei, das ist mir schon klar.

    @35: Die Geviertbreite ist schon gleich der Schriftkegelhöhe, denn ein Geviert (Quadrat) zeichnet ja eben dadurch aus, genauso breit wie hoch zu sein. Nach allem, was ich weiß, ist die Bezeichnung »em« eigentlich nur historisch zu rechtfertigen, da die Breite des großen M keineswegs immer ein em beträgt. Insofern ist die Einheit em schon zur Definition von Schriftgrößen (bzw. eigentlich -höhen) geeignet, trotz des irreführenden Namens, der auf eine Beziehung zur Breite eines Buchstabens hindeutet, auch wenn diese nicht besteht.

  38. Björn am 17. Februar 2010 #

    @Martin: Für eine einzelne Seite ist es natürlich nicht schwer, den Aufbau einfach zu halten, so dass man em etc. benutzen kann. Sobald ich aber ein CMS hintendran habe und Seiten etwas abwechslungsreich gestalten will wird es einfach etwas komplizierter. Das heißt nicht, dass jede einzelne Seite sehr kompliziert sein muss – es aber sehr viele unterschiedliche Möglichkeiten gibt, die alle mit dem gleichen CSS abgedeckt werden sollten. Beispiele für solche Seitenvarianten wären Einspaltig, Zweispaltig, Dreispaltig, Einspaltig mit Infobox am Rand, Einspaltig mit Grafik usw.
    Dabei wird’s mit em sehr schnell kompliziert. Root em hört sich eigentlich ganz interessant an…

  39. Maik am 17. Februar 2010 #

    An dieser Stelle im CSS3-Draft steht die Definition, die meines typografischen Wissens nach richtig ist (allerdings komisch formuliert):

    For scalable fonts, the font-size is a scale factor applied to the EM unit of the font.

    Also, es gibt zwischen font-size und em einen Umrechnungsfaktor, der gleich 1 sein kann, aber nicht muss. Wenn ich eine Schrift nehme, bei der mit font-size: 12px ein em 14px entspricht, und ich sage in einem Kindelement font-size: 1.25em, obwohl ich 125% meine, kriege ich also 17.5px, nicht 15px.

    Wie gesagt behaupten sie an anderer Stelle aber auch, der Umrechnungsfaktor sei immer 1 – es ist eben ein unfertiger Entwurf eines Standards. Das müssen sie noch klarstellen.

  40. David am 17. Februar 2010 #

    „Die simplen Tasten »STRG +« stehen Dir zur Verfügung!“

    Wenn man jede zweite Seite erstmal zoomen muss, um sie angenehm lesen zu können, schaut man schon mal nach, ob die Größen nicht doch irgendwo global eingestellt werden können. Mir sind 16px für lange Texte zu klein, weshalb ich meine Browsereinstellungen angepasst habe.
    Bei Pixelschriftgrößen darf ich also wieder erstmal nachstellen, oder stelle die Mindestschriftgröße entsprechend hoch.

    Wenn ich das richtig verstehe, dann ist das einzige Pro-Argument dieses, dass Du es leichter hast.
    Warum muss eigentlich eine Schrift genau in 13er oder 15er Größe dargestellt werden?

  41. Jan Eric Hellbusch am 17. Februar 2010 #

    Barrierefrei sind nur em, % und Namen, s.a. C12, C13 und C14 auf

    http://www.w3.org/TR/WCAG20-TECHS/

    Für Sehbehinderte ist ein Page Zoom oft unbrauchbar. Der Text Zoom ist für die Nutzbarkeit einer Seite ausschlaggebend.

  42. Schepp am 17. Februar 2010 #

    Ich denke auch, die Quintessenz des Beitrags ist die dass die Gestaltung in em einfach noch/immer noch zu nervtötend ist, und einem das Pagezoomen der aktuellen Browser eine Flucht zurück zu den Pixeln verbunden mit weniger schlechtem Gewissen erlauben.

    Meine empfehlung für Leute mit Ambitionen oder einer gewissen Grundbereitschaft in Sachen em, aber schwerem Taschenrechner- und Fließkommafrust: Nehmt zum Entwickeln den guten Firebug, und probiert mal im Style-Inspector beim Inspizieren der HTML-Elemente rechts den Tab »Berechnet« aus.
    Das schöne daran: egal wie tief ein Containerelement sitzt, und egal wieviel Umrechnungsiterationen seit dem Dokumenten-Root gelaufen sind, es zeigt Euch immer die aktuell errechnete/gültige font-size des gewählten Elements in Pixeln an.

    Das heisst, man muss sich gar nicht mehr so furchtbar anstrengen, um das Element selbst oder die darin befindlichen Elemente zu bemaßen, weil man die entscheidende Zahl, wieviel Pixel in dieser Ebene gerade einen em entsprechen, direkt zur Hand hat. Firebug schwingt den Taschenrechner an Eurer statt.
    Ich behaupte: DAS ist die Verfahrenserleichterung, die den meisten fehlt. Ohne die hätte ich auch keine Lust mehr auf den em-…äh… Mist.

    So, und nach diesem kleinen Interludium dürft Ihr Euch jetzt wieder die Pro/Kontra Argumente um die Ohren hauen…

  43. Maik am 17. Februar 2010 #

    Nach längerem Nachlesen und -denken komme ich zu dem Schluss, dass CSS – sowohl 2.1 als auch 3 – zumindest so gemeint ist, dass 1em und die »calculated font size« immer exakt das selbe sind, und das insbesondere in einer font-size-Angabe »100%« und »1em« immer das gleiche bedeuten sollte. Es machen aber wohl nicht alle Browser richtig.
    Mein Widerspruch gegen em-Angaben, dass das zu Rechenfehlern führen kann, ist daher hiermit in soweit zurückgezogen, als dass das nur in kaputten Browsern zu Rechenfehlern führen kann, nicht in der Theorie.
    Mein Widerspruch, dass eine Angabe in em unlogisch ist, wenn man Prozent meint, bleibt bestehen. :-)

  44. Der Caspers am 17. Februar 2010 #

    »Steinigt ihn!«

    Nö.

    Einer dieser nicht ausrottbaren Mythen ist übrigens auch, dass der IE (egal welche Nummer) keine in px ausgezeichneten Schriften skalieren kann. “Extras“ -> “Internetoptionen“ -> “Eingabehilfen“ -> “Schriftgradangaben auf Webseiten ignorieren“ und gut ist. Ein robustes Layout hält das auch (innerhalb vernünftiger Grenzen) aus.

    @GvA: übrigens – die Schrift hier ist für mich zu groß. Ernsthaft.

  45. Gast am 17. Februar 2010 #

    @Gerrit, 27
    Besucher beschweren sich nicht bei Seitenbetreibern, sie gehen einfach und kommen nie wieder. Es dürfte wirklich ein absoluter Ausnahmefall sein, wenn sich tatsächlich mal jemand beschwert.

  46. Webrocker am 17. Februar 2010 #

    @35 einspruch.
    body mit 62.5% und danach em oder % angaben hat den vorteil (im gegensatz zu absoluten 10px im body), dass sich das verhältnis der grössenangaben in abhängigkeit der browsergrundeinstellung skaliert.
    dass man dabei von den meist voreingestellten 16px grundschrift ausgeht, und per 62.5% auf 10px runtergeht, ist nur ein umweg, um die em berechnungen leichter zu machen. wer dreisatz beherrscht und geduld hat, kann natürlich auch direkt von den angenommenen 16px ausgehen und die ems oder prozente entsprechend berechnen.
    wenn body absolut auf 10px gesetzt wird, dann wird die vom user evtl geänderte grundschriftgrösse ignoriert, es sei denn, dieser nimmt ein user-css.

  47. Willi am 17. Februar 2010 #

    Hier wurde ein paar Mal erwähnt, dass px praktisch sei, um Text an Bildern ausrichten zu können. Bin ich eigentlich der einzige, der selbst Bildgrößen in em und Prozent angibt, damit sie in einem nicht-starren Layout schön mitskalieren?

  48. Martin Ibert am 17. Februar 2010 #

    @47: Nein, sicher nicht. Ob ich das mache, hängt vom Bild ab. Dekoelemente werden nach Möglichkeit sehr viel größer angelegt, als sie am Ende wahrscheinlich gebraucht werden (belegen aber auch als große Bilddatei normalerweise wenig Platz, aufgrund der guten Komprimierbarkeit), und mit em skaliert. Fotos bleiben in ihrer natürlichen Größe in px, da dabei eine Skalierung zu einem unakzeptablen Qualitätsverlust und/oder unakzeptablen Trafficvolumina führen würde.

  49. Maik am 17. Februar 2010 #

    Es wäre mir neu, dass Pixelbilder jemals „schön“ skalieren. Das gibt ekelige Artefakte oder wird unscharf. Darum ist der Verweis eines Designers mit px-Fetisch auf die Zoomfunktion ja auch so eine Frechheit. Macht man Vollzoom, sehen danach alle Grafiken beschissen aus. Macht man Textzoom, reißt es das Layout auseinander oder die Spalten sind viel zu schmal für den Text.

    Teile der Seite, die von Pixelmaterial dominiert sind, hält man minimal und definiert sie über px. Teile der Seite, die Fließtext enthalten, bemaßt man in em und berücksichtigt die eingestellte Standardschriftgröße. Ist doch eigentlich nicht so schwierig…

  50. Willi am 17. Februar 2010 #

    Pixelbilder skalieren eigentlich ziemlich gut, solange die Auflösung herunter- und nicht hochgerechnet werden muss. Außerdem wird so das Layout nicht zerschossen, wenn jemand zoomen will.

  51. Andy Berg am 18. Februar 2010 #

    Klare Sache: Pixel-Angaben für Fließtext haben nur Nachteile.
    Es kommt hier auf die Lesbarkeit an und nix anderes. Das Gestalterische hat sich an der Funktion zu orientieren und nicht dem puren Selbstzweck. Aufgabe des Designers sollte es sein, die Form der Funktion anzupassen und dabei ein ansehnliches Gesamtbild zu schaffen.
    Absolute Angaben sind für gestalterische Elemente gedacht, Text muss für alle lesbar sein und darf nicht durch Faulheit des Gestalters unlesbar werden.
    Dank der Diversifizierung der Anzeige-Geräte sehen 12px für Fließtext leider auf einem Blackberry anders aus, als auf einem iPhone, als auf einem HD-Fernseher, als auf einem Netbook, als auf einem 17«-Röhrenmonitor. Nur relative Angaben gewährleisten in dieser Umgebung eine optimale Darstellung für alle diese existierenden und gleichberechtigten Darstellungsgeräte.
    Die Wahl des Browsers ist für mich sekundär: IE6, IE7, IE8, Opera, Epiphany, Firefox, Konqueror, Safari, Chrome, Blackberries, Palms, Nokias, iPhones – man muss sich damit abfinden, dass man nur begrenzt Einfluss auf das Aussehen hat. Sich aber an die Einstellungen des Gerätes zu halten und gestalterisch aktiv zu werden, wo es die Nutzbarkeit nicht behindert, kann man.
    Möchte man genau bestimmen, wie der Nutzer etwas sieht, kann man Druckerzeugnisse herstellen.

  52. Heinz am 18. Februar 2010 #

    Spielt das überhaupt eine Rolle, wenn die Schrift eine nicht ganzpixelige Größe haben soll? Das sind doch Vektoren, die müssen so oder so auf die Pixel abgebildet werden, was eigentlich nie »genau« klappen kann, allein schon die Strichstärke ist ja praktisch nie genau ganzpixelig.

    @16 Maik: In Windows kann man auch andere Auflösungen einstellen (»benutzerdefiniert«).

    @32 Gerrit: »Und wenn das Layout nicht mitzoomen soll, mache eine entsprechende Einstellung in deinem Browser.« – Leider gibt es soweit ich weiß diese Option derzeit nicht in meinem aus vielen Gründen Lieblingsbrowser.

    @36 Björn: »Dass dabei auch das Layout mitwächst finde ich eher willkommen, denn wenn die Äuflösung des Monitors bzw. die Sehfähigkeiten des Besuchers eine Vergrößerung des Textes notwendig machen, dann ist ja wohl auch davon auszugehen, dass Bilder etc. zu klein dargestellt werden.« – Wenn die Details eines Bildes wichtig sind (was bei den meisten Bildern nicht der Fall ist, da sie nur schmücken), wird in der Regel zusätzlich eine größere Version angeboten.

    Ich präferiere übrigens 100 % easy 2 read. Ich nutze auch eine Mindestschriftgröße im Browser, leider zerschießt das manches Layout (verrückte Boxen oder am unteren Rand einer Box abgeschnittener Text).

  53. Don am 18. Februar 2010 #

    ok,ich auch noch (vom iphone *murks):)
    frage ist,zählt das argument mit den 12.3456 pixel?
    gibt es denn halbe pixel? Werden die Schriftgrösse nicht schliesendlich auf Integer umgerechnet?
    ok well, wenn dann mal 11 statt 12 pixel rauskommen (wenn das wirklich so ist – Beweise? Screens!!naja dann halt 12 px hardcoden
    hmm schliessendlich gefällt mir aber der Wackelpeter von em und pt. Transportiert ja auch den Gedanken der Vererbung. Traum ist wirklich, das die Browser die Schrift nach DPI oder sonstiges Rendern. Mehr Kontrolle durch die Px Angabe, stimmt schon.

  54. Moritz Gießmann am 18. Februar 2010 #

    Sorry Gerrit, kein Aufschrei. Mache ich auch schon länger.

  55. cortex am 18. Februar 2010 #

    Kein Aufschrei, keine Steinigung. Eher eine Randnotiz, die in einer akademisch anmutenden Diskussion mit Unmengen heisser Luft gefüllt wird.

    @Martin Ibert: Du könntest auch kein Geld als Webdesigner / Webentwickler verdienen; Deine Hobby-Designs wären für professionelle Projekte untragbar + unerträglich. Davon ausgehend stellt sich die Frage, was Du als Full-HD-40-Zoll-Experte überhaupt fachlich beitragen kannst. Betrachtungsabstand zwischen Deiner HighTech-Glotze und Sofa…? Junge, Junge…

    In diesem Sinne – nichts wird so heiss gegessen, wie gekocht.

    cx

  56. Michael Preidel am 18. Februar 2010 #

    Mal ganz ehrlich: Wer auf CSS-Porn oder sowas steht, kann ja seine Größen gern in em oder sonstwas angeben. Für mich als Gestalter und Webdesigner überwiegen die Vorteile von absoluten Größenangaben bei weitem, deshalb waren sie für mich auch zu keiner Zeit verpönt oder gar ein Sakrileg.

    Im übrigen kann man das Problem von zu kleinen oder zu großen Schriften ganz simpel umgehen: Man lässt einfach den Besucher selbst den gewünschten Schriftgrad einstellen (wenn er denn möchte). Mache ich seit 2004 so.

  57. Ansgar Hein am 18. Februar 2010 #

    Steinigt ihn

    Deine Argumentationskette ist logisch und nachvollziehbar. Vorausgesetzt, man muss sich nicht an bestimmte Regelwerke, wie die hier bereits zitierten WCAG2.0 halten. Und die Umrechnung in EM ist inzwischen derart verbreitet und praktikabel, dass selbst Pixelfreunde dem nichts entgegenzusetzen haben, zumal nahezu jeder CSS-Coder inzwischen ein Reset-Stylesheet verwendet und die Infos dort reinschreibt. Der König ist tot, lang lebe der König!

  58. David Hellmann am 18. Februar 2010 #

    Ich nutze auch seit eh und je nur PX Werte da ich alles andere zu stressig und Aufwendig finde, fand und finden werde.

    PX > ALL :)

  59. Sven Wolfermann am 18. Februar 2010 #

    Ich bin auch wieder auf Pixelangaben umgestiegen und erfreue mich über Kommentare, die hier nach 2005 klingen. Gerrit beschreibt mit Sicherheit die Realität, denn welcher »normale« Internet-User benutzt User-Stylesheets, so ein Quatsch!

  60. Struppi am 18. Februar 2010 #

    @Sven Wolfermann

    Eben und ohne Userstylesheet kann ein User nicht die Schriftgröße dauerhaft nach seinem Bedürfnissen ändern, wenn die Größen in Pixel angegeben wurde.

    @Gerrit Strg+ [+] funktioniert nur für ein Tab und nur bis der Browser wieder geschlossen ist. Zumal es auch was anderes ist, als die Schriftart in vergrößern. Du solltest das Experiment mal machen und im Browser eine Schrift einstellen die größer als die 16px sind.

  61. Brigitte am 18. Februar 2010 #

    Warnung: Der Zeilenabstand line-height ist ein anderes Tier! Er sollte weder in Pixeln, noch in em, sondern ganz ohne Maßeinheit gesetzt werden, damit er stets abhängig von der Schriftgröße ist, egal, wie sich diese ändern mag.

    Wozu gebe ich dann überhaupt eine line-height an? Oder wird diese in % angegeben? Wenn ich einen Abstand möchte ist doch line-height viel unproblematischer als margin oder padding und der Text ist auch vertikal zentriert. Warum also keine line-height in Pixel oder em wenn die Schrift in Picel oder em angegeben ist? Bitte um Info!

  62. Maik am 18. Februar 2010 #

    Eine line-height sollte man dann und nur dann verwenden, wenn man findet, dass die verwendete Schriftart mehr (oder weniger) Durchschuss braucht, als der Schriftentwerfer vorgesehen hat.

    Der Standardwert für line-height ist „normal“. Was das bedeutet, ist browserabhängig. Wenn die Schriftdatei eine Empfehlung dafür enthält, sollte der Browser die nehmen, sonst irgendetwas zwischen 1.0em und 1.2em. Ich vermute, die meisten nehmen einfach 1em, habe das aber nicht überprüft.

    Eine Längenangabe, z.B. in px oder em, setzt line-height auf genau diesen Wert, Punkt.

    Eine dimensionslose oder Prozentangabe setzt laut CSS3 die line-height auf soundsoviel Prozent der Schriftgröße, nicht soundsoviel Prozent der Standard-Zeilenhöhe, auch wenn ich letzteres logischer fände. Die CSS3-Variante hat allerdings wieder den Vorteil, dass 1em und 100% das selbe sind.

    line-height sollte man höchstens dann absolut angeben, wenn auch font-size absolut angegeben wurde; auch in diesem Fall sollte man es aber eventuell lassen, weil manche Browser dann beim Zoomen Unsinn machen.

  63. GE am 18. Februar 2010 #

    Die immer komplexer und umfangreicher werdenden Möglichkeiten der modernen Browser bringen mich zunehmend zu der Erkenntnis, dass es eigentlich egal ist, wie ich was definiere.

    Die User können mit den Möglichkeiten der modernen Browser, wenn sie das wollen, jedes Layout / Layoutkonzept zerschiessen. Aus einem fixen Layout macht der Seitenzoom z. B. ein elastisches. Vielleicht ermöglicht ja die nächste Version irgendeines Browsers, auch bei einer em-skalierten Seite nur die Schrift zu vergrössern usw.

    Für mich ist wichtig, wie eine Seite unter normalen Bedingungen aussieht. Was die User dann mit Hilfe der verschiedenen Browser damit machen, liegt nicht mehr in meiner Verantwortung. Was die nächste Browsergeneration noch so an Möglichkeiten bieten wird, weiss ich sowieso nicht.

    Zum Thema: Schriftgrösse in px ist nicht nur ein Problem des IE6, sondern aller IE. Wenn ich einen Bildschirm mit geringer Auflösung habe und deshalb nur die Schrift skalieren will (und nicht die ganze Seite), dann habe ich bei in px definierter Schriftgrösse eben schlechte Karten, auch mit IE7/8.

  64. Willi am 18. Februar 2010 #

    Das mit der Line-Height kapier ich logisch nicht: ob ich nun z.B. bei einer Schriftgröße von 1em eine Zeilenhöhe von 1.5 oder 1.5em angebe, ist für den Anwender doch egal, da beides beim Verändern der Schriftgröße im Browser proportional mitskaliert.

    Bei verschiedenen Schriftgrößen in einem Dokument kann der Designer ohne Einheitsangabe vielleicht leichter rechnen (weil einfach alles mit dem gleichen Faktor multipliziert wird), aber dadurch wird die Angabe in em doch nicht falsch? Ich meine auch, dass in DTP-Programmen die Zeilenhöhe auch in Punkt angegeben wird.

    Nebenbei ist das Erhöhen der Zeilenhöhe doch fast immer notwendig. Die Dax hier hat ja auch nicht die normale Zeilenhöhe.

  65. M G Berberich am 19. Februar 2010 #

    Angabe in Pixel war schon immer einer schlechte Idee, sie wird aber von Tag zu Tag schlechter.

    Lange Zeit hatten mehr oder weniger alles Displays eine Auflösung von um die 95dpi. Aber das gilt nicht mehr. Mein Netbook hat 120 dpi, mein Tablet 125 dpi. Es gibt Notebooks, mit 1440er Displays in 12″ und 150 dpi, es ist nur eine Frage der Zeit wann erste Geräte auf den Markt kommen die auf ein paar Zoll Full-HD bieten und 200 dpi und mehr haben, und dann ist ein Pixel auf dem einem Gerät nichtmal mehr halb so groß wie auf dem anderen.

    Die „Standardgröße“ 16 ist auch ein Unfug. Der Benutzer sollte sich die ihm genehme Schriftgröße in seinem Browser einstellen und die Webseitenbastler sollte diese Entscheidung akzeptieren. Wieso bilden sich diese aroganten Leute immer ein, sie wüßten besser als der Benutzer welche Schriftgröße er haben will?

  66. Gerrit am 19. Februar 2010 #

    Okay, nachdem ich alle Kommentare gelesen habe, folgt in den nächsten Tagen ein weiterer Artikel mit dem Arbeitstitel »Warum ich in Zukunft sowohl Pixel- als auch EM-basierte Schriftgrad-Angaben machen werde«. Geht ja nichts über eine gepflegte Diskussion, in der man noch was lernen kann.

    Danke.

  67. Stefan am 19. Februar 2010 #

    Bravo, Gerrit! ;)

  68. Finn am 20. Februar 2010 #

    Ich nutze ebenfalls Pixel für die Einstellung der Schriftgröße in meinen Stylesheets. Das ganze hat aber nichts mit irgendeiner Überzeugung oder so zu tun sondern rein mit Pragmatik – erklär mal einem Marketing-Kasper irgendwas von verschiedenen Devices, Auflösungen usw. Wir (bzw. »die Kreativen«) sind im Web noch viel zu sehr vom Print geprägt. Jeder will sein CD auch ins Web übertragen und diese Denke aufzubrechen erfordert einfach verdammt viel Mühe & Zeit. Vermutlich sind wir erst in 10 Jahren so weit, Seiten so zu gestalten, wie es z.B. Martin möchte (und ich kann diesen Gedankengang sehr gut nachvollziehen – ob er sich in Zukunft durchsetzen wird weiß ich nicht). Bis dahin muss man halt weiter versuchen die entsprechenden Leute aufzuklären und irgendwann kriegen wir dann die Kurve. Ich zitier mal: Everything you know about web design is wrong!

  69. Gast am 21. Februar 2010 #

    @Finn

    Warum musst du bei Angabe in Pixeln nichts erklären? Ob nun em oder px, das interessiert einen »Marketing-Kasper« doch nicht und er kann auch nichts damit anfangen. Wenn du ihm eine kleinere Schriftgröße nicht ausgeredet bekommst, so kannst du immer noch per relativer Größenangabe die Schrift verkleinern, das nimmt den IE-Nutzern nicht die Möglichkeit den Text zu vergrößern. Es ist zwar auch nur eine Notlösung, aber immerhin näher an der Nutzervorgabe als die feste Angabe in Pixeln.

  70. andir am 21. Februar 2010 #

    Mir fällt immer noch kein allzu guter Grund ein, Pixel-Einheiten für Schriftgrößen zu verwenden ausser der Bequemlichkeit des Designers, Seitenzoom hin oder her.

    Für große Schriftgrade in designkritischen Elementen (Header etc.) bei sehr wenig Platz kann ich das gerade noch nachvollziehen – man möchte eben nicht, dass die Gestaltung bei bereits 10% Vergrößerung aus dem Leim geht, zumal diese Texte auch so gut lesbar sein dürften.

    Aber sonst?
    80% aller Nutzer, vielleicht ein paar mehr, kommen nie auf die Idee, eine fremde Seite an ihre Bedürfnisse – und sei es nur durch Schriftvergrößerung – anzupassen. Wir reden hier schließlich nicht von B.A. Designer, sondern von Otto Normalinteressent.

    Wer aber als Nutzer die Schrift vergrößert, hat einen Grund dazu.

    Diesen Nutzer interessiert es schlicht nicht, ob die Seite »etwas« aus dem Leim geht, er ist daran gewöhnt. Er will aber die Seite bedienen/erfassen können.

    Ein bißchen vergleiche ich das mit den mittlerweile obsoleten A+ / A- Zeichen auf Webseiten. Gefällig gestaltet in 10 oder 11px oder in ein Kästchen mit 16px Länge gesetzt, hat es genau die Zielgruppe, für die es gedacht war, nie erreicht….

    Hier wird umgekehrt ein Schuh draus: Wenns die meisten eh nicht interessiert, kann es auch bei der »em« (irgendwas skalierbares) Auszeichnung bleiben, denn die meisten setzen es eh nicht ein. Wer es aber braucht?

    Ich lese dein Blog gerne, Gerrit, und habe viele Posts genossen. Deswegen meine Anregung, ob dieser Gedanke an »px statt »em« nicht vielleicht einer eher selbst – oder designerzentrierten (Nabelschau) Betrachtung entspringt als einer nutzerorientierten (Kunden..) Betrachtung.

    Kurz: Besteht hier nicht ein Scheinproblem (aus Sicht des Nutzers betrachtet)?

  71. Andreas Hecht am 25. Februar 2010 #

    Klasse Beitrag und schön zusammengefasst!

    Danke.

  72. Ingo Chao am 26. Februar 2010 #

    @61 Brigitte: siehe
    http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
    und
    http://mrm.no-ip.com/auth/line-height-inherit.html

    Die Eigenschaft line-height wird vererbt. Wenn der Erbe aber eine eigene font-size hat, kann die line-height des Vorfahrens unerwünscht sein: Die line-height mit Einheit wurde schließlich über die font-size des Vorfahrens berechnet. Ohne Einheit wäre nur der Faktor der line-height vererbt worden.

    Andererseits: die Vererbung einer fixen line-height bezogen auf den Vorfahren kann auch erwünscht sein, um einen vertikalen Rhythmus zu erzeugen, siehe http://www.alistapart.com/articles/howtosizetextincss/

    Es kommt also wie immer darauf an.

  73. Marc am 14. März 2010 #

    Das Argument »Das dauert so lange« und »Das ist mir zu kompliziert« ist ja genauso alt, wie die Forderung manche Angaben in em zu notieren.
    Als jemand der schon sehr lange em nutzt kann ich sagen, dass ich nur sehr selten zum Taschenrechner greife, weil gerade für Schriftgrößen hat man es im Kopf, wie viel em 12 oder 13 Pixeln entsprechen.
    Wer Schriftgrößen in em nur für Elemente einsetzt, die keine Kind-Elemente haben, muss sich auch um die Verschachtelung keine Gedanken machen.
    Zum Taschenrechner greife ich nur, wenn ich Breiten-Angaben (selten) oder Höhenangaben (häufiger, gerade wenn man mit einer Größe ungleich 16 multplizieren muss) in em verwende. – Da spielt aber Vererbung keine Rolle.
    In dem ganzen Artikel ist kein neues Argument genannt! Von Praegnanz hätte ich das nicht erwartet.
    Ärgerlich wenn solches Halbwissen so ein Forum bekommt, denn sicher werden sich hier einige »Webdesigner« drauf beziehen. Als einer der sich gerne die Texte vergrößert, hasse ich die neuen Zoom-Funktionen der Browser: das Layout ist sehr schnell sehr viel breiter als der Viewport und der schlimmste aller möglichen Fälle tritt ein: ich muss horizontal scrollen.
    Gott sei Dank gibt es im FF noch die Möglichkeit »Nur Text zoomen« zu lassen. So lange Du wenigstens Breiten und Höhen (sinnvollerweise nicht alle) in em angibst, sollte das Ganze dann hoffentlich noch funktionieren. Aber ich sehe in letzter Zeit immer mehr schlecht gemachte Webseiten, in denen das Layout dann zerschossen wird. Und ganz ehrlich – so ein Layout ist ein Print-Layout und hat im Web nichts zu suchen. Wer Geld für so etwas verlangt ist gierig, faul und hat sich selbst von den minmalsten Qualitäts-Ansprüchen verabschiedet…
    Hoffentlich liest den Unsinn niemand.

  74. Stephan am 5. Mai 2010 #

    Ein großes Problem:

    Die Leute, die hier technisch das meiste Know-How haben, haben leider auch die hässlichsten Websites (habe mich mal durch die Kommentarschreiber geklickt). Und dann noch stolz das w3c-Logo drunter. Peinlich. Das ist wie ein Fähnchen in einen Hundehaufen zu stecken.

    Dann lieber gut designte (ja, mit Photoshop) Websites, mit festen Pixelangaben, Zoomen ist nicht wirklich vorgesehen.

  75. Niko am 3. November 2013 #

    Ein schönes Anwendungsgebiet für em ist der Abstand von z.B. <p>Tags,

    wenn ich z.B. möchte, dass ein Absatz immer 2Zeilenhöhen unter dem vorherigen steht, kann ich dies mit margin:0 0 2em 0; ohne dass ich bei Änderungen darauf achten muss erreichen.

    Ich sehe das generel eher undogmatisch. Es gibt »für mich« gute Gründe an manchen Stellen em zu verwenden aber solange ein brauchbares Ergebnis dabei raus kommt könnt ihr auch gerne in ex oder cm layouten;) Denn viele Wege…..

Kommentar schreiben

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