px vs. em = Entweder oder? Nicht nur fonts, sondern margin, etc in em?

[aJunkie]

Hallo,

ich las nun zwei Beiträge zum Thema: Schriftgröße in px, pt oder em.
Ich habe mich nun für em entschieden. Bitte hier widersprechen, wenn angebracht.

Ich lese aber auch, dass, wenn man em (skalierbar) benutzt, alles andere wie padding, margin, border, etc. in em angeben sollte. Ist dies wahr?

Im Moment ist es nämlich so, dass bei mir nur die Schriftgröße in em angegeben ist.
Die Website hat aber eine absolute Größe mit 1000 Pixeln.

 

[koslowski]

Moin,

wenn du alles in em angibst hast du ein elastisches Layout, d.h. wenn du nur den Text vergrößerst, wächst alles andere trotzdem dynamisch mit weil em von der Textgröße abhängig ist.

Du kannst aber em und px mischen, nur Textgröße immer in em, weil sich sonst der Text im IE nicht vergrößern lässt.

Je nach Layout mache ich manchmal Pixel-Layouts, manchmal em-Layouts und manchmal Mix-Layouts.

1000px sind für ein Layout zu breit. Da müssen viele schon horizontal scrollen.

Unter Webworkern, Agenturen, etc. hat man sich mittlerweile unausgesprochen auf max. 950px Breite geeinigt.

 

[_Thor_]

ich las nun zwei Beiträge zum Thema: Schriftgröße in px, pt oder em.
Ich habe mich nun für em entschieden. Bitte hier widersprechen, wenn angebracht.

em für die Schrift ist absolut richtig. Wichtig dabei ist noch, dass der Inhalt die Schriftgröße 1em bekommt. Das ist dann die Schriftgröße, die der Benutzer für sich in seinem Browser als optimal eingestellt hat.

Ich lese aber auch, dass, wenn man em (skalierbar) benutzt, alles andere wie padding, margin, border, etc. in em angeben sollte. Ist dies wahr?

Das muss man nicht. Ich vergebe für margin und padding auch px, da der Abstand zwischen den Elementen sich nicht unbedingt vergrößern muss, wenn die Schrift vergrößert wird.

Im Moment ist es nämlich so, dass bei mir nur die Schriftgröße in em angegeben ist.
Die Website hat aber eine absolute Größe mit 1000 Pixeln.

Eine Webseite sollte sich nach Möglichkeit immer an den Viewport des Browsers anpassen. Bis zu einem gewissen Teil jedenfalls. Es macht keinen Sinn, dass sich der Inhalt auf 50px Breite verkleinern lässt, ebenso wenig macht es Sinn, dass sich die Seite auf 2800px verbreitern lässt. Beides ist dann nur sehr schwer lesbar. Hier ist also ein Kompromiss nötig.

Unter Webworkern, Agenturen, etc. hat man sich mittlerweile unausgesprochen auf max. 950px Breite geeinigt.

Na da freuen sich aber alle Nutzer eines Smartphones...

 

[koslowski]

Wichtig dabei ist noch, dass der Inhalt die Schriftgröße 1em bekommt.

kann man imho nicht so pauschal sagen.
Sollte Arial die erste Schriftart sein stelle ich den Fließtext auf 0.9em. 1em empfinden dann die meisten als zu groß.

Na da freuen sich aber alle Nutzer eines Smartphones...

950px nehme ich normal nicht her. Meine Beschränkung liegt bei 896px, weil man da mit einem normalen Netbook bei normalen Einstellungen noch alles lesen kann ohne horizontal scrollen zu müssen.

Bei Handys wird doch meines Wissens oft ein Operabrowser eingesetzt. Der stellt die Website doch ganz gut dar, ohne das man was machen muss.
Was bei einem Smartphone zum Einsatz kommt weiß ich nicht, wäre dir aber für eine Aufklärung dankbar. :-)

Greift bei einem Smartphone eigentlich media="handheld;"?? Das würde mich noch interessieren.

 

[_Thor_]

kann man imho nicht so pauschal sagen.
Sollte Arial die erste Schriftart sein stelle ich den Fließtext auf 0.9em. 1em empfinden dann die meisten als zu groß.

Und genau das ist nicht die Aufgabe des Entwicklers, sondern die des Besuchers. Der kann sich nämlich nicht nur die Schriftgröße, sondern auch die Schriftart auswählen und da weißt du nie, welche das ist. Wenn es dem Besucher dann zu groß ist, kann er die Schriftgröße selber einstellen.
Fließtext sollte immer 1em haben.

950px nehme ich normal nicht her. Meine Beschränkung liegt bei 896px, weil man da mit einem normalen Netbook bei normalen Einstellungen noch alles lesen kann ohne horizontal scrollen zu müssen.

Ich kann auch auf meinem 1920x1080 nur einen Viewport von 623x597 erzeugen, was ist dann mit deinen 896px?

Bei Handys wird doch meines Wissens oft ein Operabrowser eingesetzt. Der stellt die Website doch ganz gut dar, ohne das man was machen muss.

Das lässt sich sicher nicht so pauschal sagen, aber da wird sicher nicht nur Opera drauf sein.

Was bei einem Smartphone zum Einsatz kommt weiß ich nicht, wäre dir aber für eine Aufklärung dankbar. :-)

Da kann man sich aussuchen, welchen Browser man installiert ;)

Greift bei einem Smartphone eigentlich media="handheld;"?? Das würde mich noch interessieren.

Nein, greift bei den meisten Browsern leider noch nicht, nur bei Opera mini auf nem Android hab ich das bis jetzt positiv feststellen können. Alle anderen Browser kümmern sich leider noch nicht um den Medientyp. Es wäre schön, wenn sich das recht bald ändern würde.

 

[koslowski]

Und genau das ist nicht die Aufgabe des Entwicklers, sondern die des Besuchers. Der kann sich nämlich nicht nur die Schriftgröße, sondern auch die Schriftart auswählen und da weißt du nie, welche das ist. Wenn es dem Besucher dann zu groß ist, kann er die Schriftgröße selber einstellen.
Fließtext sollte immer 1em haben.

es ist grundsätzlich richtig dem Besucher die größtmögliche Freiheit zu lassen.
Leider wird das meistens von der Wirklichkeit nachhaltig torpediert. :)

Der normale Besucher weiß nix und stellt im Browser auch nix ein. Er übernimmt es so, wie es ihm vorgesetzt wird.
Das mit den 1em hatte ich auch mal eingesetzt.
Die Lieblingsschriftart vieler Freiberufler u. Unternehmer ist arial. Hatte ich die auf 1em gestellt wurde ich ausnahmslos angeblökt:"Die Schrift ist mir aber a weng groß. Kann man die nicht a bisserl kleiner machen?"
Erklärungen warum 1em sinnvoll ist wurden mit scheinbarem Interesse verfolgt, um dann zu sagen:"Na, da hab ich keine Zeit für. Können Sie mir das bitte gleich richtig einstellen?"
*seufz* Na gut.

Ich kann auch auf meinem 1920x1080 nur einen Viewport von 623x597 erzeugen, was ist dann mit deinen 896px?

Was hast du denn für ein netbook??
ich teste das mit einem netbook meiner Frau (Samsung irgendwas). Da haben sich die 896px als gerade noch okay herausgestellt.

Es wäre schön, wenn sich das recht bald ändern würde.

jep, wäre mir auch recht!

 

[_Thor_]

es ist grundsätzlich richtig dem Besucher die größtmögliche Freiheit zu lassen.
Leider wird das meistens von der Wirklichkeit nachhaltig torpediert. :)

Der normale Besucher weiß nix und stellt im Browser auch nix ein. Er übernimmt es so, wie es ihm vorgesetzt wird.

Dann muss es den normalen Benutzer eben beigebracht werden. Ein Browser ist ein Programm wie jedes andere auch und wer es vernünftig verwenden will, muss sich mit den Eingeschaften vertraut machen. Wer dazu keine Lust hat, muss eben damit leben, dass es nicht ganz so aussieht, wie er es gerne hätte.

Das mit den 1em hatte ich auch mal eingesetzt.
Die Lieblingsschriftart vieler Freiberufler u. Unternehmer ist arial. Hatte ich die auf 1em gestellt wurde ich ausnahmslos angeblökt:"Die Schrift ist mir aber a weng groß. Kann man die nicht a bisserl kleiner machen?"
Erklärungen warum 1em sinnvoll ist wurden mit scheinbarem Interesse verfolgt, um dann zu sagen:"Na, da hab ich keine Zeit für. Können Sie mir das bitte gleich richtig einstellen?"
*seufz* Na gut.

Da hätte die Antwort kommen müssen, 1em ist ja schon die richtige Schriftgröße, sie müssen ihren Browser richtig einstellen, denn sie sind nicht der einzige, der die Seite betrachten wird. Andere Besucher benötigen vielleicht eine größere Schrift.

Was hast du denn für ein netbook??

Ob Netbook oder nicht ist doch völlig egal, auch auf nem Netbook muss nicht jeder den Browser maximiert haben. Die Auflösung des Monitors ist irrelevant, der Viewport des Browsers ist der ausschlaggebende Faktor.

 

[koslowski]

Dann muss es den normalen Benutzer eben beigebracht werden. Ein Browser ist ein Programm wie jedes andere auch und wer es vernünftig verwenden will, muss sich mit den Eingeschaften vertraut machen. Wer dazu keine Lust hat, muss eben damit leben, dass es nicht ganz so aussieht, wie er es gerne hätte.

Da hätte die Antwort kommen müssen, 1em ist ja schon die richtige Schriftgröße, sie müssen ihren Browser richtig einstellen, denn sie sind nicht der einzige, der die Seite betrachten wird. Andere Besucher benötigen vielleicht eine größere Schrift.

Mit der Einstellung brauch ich den Kunden nicht zu kommen. Dann hätte ich ganz schnell keine mehr. ;-)

Kunden sind konservativ, eher unflexibel, das techn. Verständnis ist mehr als übersichtlich und so Schriftgrößendiskussionen lieben sie gar nicht. Sie müssen nicht damit leben, das es Ihnen zu groß ist. Sie bestimmen die Schriftgröße, weil sie mich dafür bezahlen damit es so aussieht wie es Ihnen gefällt.

Ob Netbook oder nicht ist doch völlig egal, auch auf nem Netbook muss nicht jeder den Browser maximiert haben. Die Auflösung des Monitors ist irrelevant, der Viewport des Browsers ist der ausschlaggebende Faktor.

Ich verstehe nicht so ganz, was du mir damit sagen willst?
Soll ich meine Sites nur noch 400px breit machen, um auch alle mitzunehmen die ein Netbook haben und ihren Browser vielleicht nicht maximiert haben? :?

 

[_Thor_]

Mit der Einstellung brauch ich den Kunden nicht zu kommen. Dann hätte ich ganz schnell keine mehr. ;-)

Kunden sind konservativ, eher unflexibel, das techn. Verständnis ist mehr als übersichtlich und so Schriftgrößendiskussionen lieben sie gar nicht. Sie müssen nicht damit leben, das es Ihnen zu groß ist. Sie bestimmen die Schriftgröße, weil sie mich dafür bezahlen damit es so aussieht wie es Ihnen gefällt.

Dann solltest du deine Kunden aber darüber aufklären, dass die Seite nicht nur für sie ist, sondern meistens für ihre Kunden und die haben teilweise andere Ansprüche als der Auftraggeber. Werden diese nicht beachtet, verliert er unter Umständen potentielle Kunden. Das könntest du vermeiden, wenn du ihn darüber informierst.

Ich verstehe nicht so ganz, was du mir damit sagen willst?
Soll ich meine Sites nur noch 400px breit machen, um auch alle mitzunehmen die ein Netbook haben und ihren Browser vielleicht nicht maximiert haben? :?

Du solltest ihr eine flexible Breite geben, so dass sie sich dem Viewport anpassen kann.

 

[koslowski]

Dann solltest du deine Kunden aber darüber aufklären, dass die Seite nicht nur für sie ist, sondern meistens für ihre Kunden und die haben teilweise andere Ansprüche als der Auftraggeber. Werden diese nicht beachtet, verliert er unter Umständen potentielle Kunden. Das könntest du vermeiden, wenn du ihn darüber informierst.

*seufz*
Das mein Kunde potentielle Kunden verlieren könnte, wenn ihm für seine Website eine Schriftgröße von 1em zu groß ist, ist nicht dein Ernst, oder?

Aber bleib ruhig bei deinen 1em, ich bin mit meinen 0.9em auch ganz glücklich.

Du solltest ihr eine flexible Breite geben, so dass sie sich dem Viewport anpassen kann.

Flexible Breiten haben imho mehr Nachteile als Vorteile, deshalb setze ich sie i.d.R. nicht ein.

 

[_Thor_]

*seufz*
Das mein Kunde potentielle Kunden verlieren könnte, wenn ihm für seine Website eine Schriftgröße von 1em zu groß ist, ist nicht dein Ernst, oder?

Es geht nicht um ihn, es geht um die Besucher seiner Seite und es geht dabei nicht nur um die Schriftgröße, es geht um die Barrierefreiheit allgemein.
Und er wird die Kunden nicht verlieren, er wird sie vermutlich gar nicht erst gewinnen.

Aber bleib ruhig bei deinen 1em, ich bin mit meinen 0.9em auch ganz glücklich.

Wie schon gesagt, geht es nicht um uns, sondern um die Personen, die die Seite betrachten.

Flexible Breiten haben imho mehr Nachteile als Vorteile, deshalb setze ich sie i.d.R. nicht ein.

Und die wären?

 

[koslowski]

Es geht nicht um ihn, es geht um die Besucher seiner Seite und es geht dabei nicht nur um die Schriftgröße, es geht um die Barrierefreiheit allgemein.
Und er wird die Kunden nicht verlieren, er wird sie vermutlich gar nicht erst gewinnen.

Wie schon gesagt, geht es nicht um uns, sondern um die Personen, die die Seite betrachten.

lass es doch einfach.
Deine Argumente sind für mich nicht überzeugend und umgekehrt wohl auch.

Die Diskussion ist imho damit sinnlos geworden. ;)

Und die wären?

*Doppelseufz*

Die Diskussion ob fest oder flexibel ist uralt und zigmal geführt. Ein Gewinner ist leider immer noch nicht in Sicht.

 

[neuroleptika]

Und die wären?

Schwierigkeiten bereiten mir vor allem vorgegebene Schmuckbilder die je nach Viewport links, rechts oder beidseitig abgeschnitten werden müssten.
Wenn dann auch noch breitere Tabellen hinzukommen liegen min-width und max-width so nah beieinander, daß ich auch gleich bei einer festen Breite in px bleiben kann.

Eine Breite in em hat zusätzlich den Nachteil, daß schon eine geringe Schriftvergrößerung zum horizontalen Scrollbalken führen kann.

 

[_Thor_]

lass es doch einfach.
Deine Argumente sind für mich nicht überzeugend und umgekehrt wohl auch.

Die Diskussion ist imho damit sinnlos geworden. ;)

Da lässt sich nur hoffen, dass du nie in die Lage kommst, auf solche Argumente angewiesen zu sein, dann würdest du nämlich sehr schnell merken, wie sinnvoll die sind.

*Doppelseufz*

Die Diskussion ob fest oder flexibel ist uralt und zigmal geführt. Ein Gewinner ist leider immer noch nicht in Sicht.

Gewinner ist der, der die beste Unterstützung für alle Clients gewährleistet.

Schwierigkeiten bereiten mir vor allem vorgegebene Schmuckbilder die je nach Viewport links, rechts oder beidseitig abgeschnitten werden müssten.

Schmuckbilder sind aber eigentlich Hintergrundgrafiken und wenn der Platz nicht ausreicht, werden sie eben abgeschnitten.

Wenn dann auch noch breitere Tabellen hinzukommen liegen min-width und max-width so nah beieinander, daß ich auch gleich bei einer festen Breite in px bleiben kann.

Das sehe ich nicht so, flexibles Layout ist dem fixen Layout m.E.n. immer vorzuziehen.

Eine Breite in em hat zusätzlich den Nachteil, daß schon eine geringe Schriftvergrößerung zum horizontalen Scrollbalken führen kann.

Dann sind die Maßeinheiten für das Layout aber schlecht gewählt. Ich bekomme es meistens hin, dass horizontale Scrollbalken erst sehr spät, wenn überhaupt auftauchen.

 

[koslowski]

Da lässt sich nur hoffen, dass du nie in die Lage kommst, auf solche Argumente angewiesen zu sein, dann würdest du nämlich sehr schnell merken, wie sinnvoll die sind.

für- und wider-Argumente sind bekannt und können von mir sicher angewendet werden.
Bloß irgendwann am Ende aller Argumente bleibt nur noch die Klinkefiesterei, um die Diskussion in Gang zu halten
SCNR :mrgreen:

Gewinner ist der, der die beste Unterstützung für alle Clients gewährleistet.

Okay, ich erkläre dich hiermit zum Sieger und trete freiwillig 50 Gummipunkte an dich ab. :grin:

 

[mermshaus]

Wer eine von 1em abweichende Standardgröße für Schriftarten wünscht, sollte diese dann fairerweise zumindest nicht in em angeben, sondern in einer absoluten Einheit wie px. Sonst hat es für den Benutzer für viele Seiten mehr Nach- als Vorteile, selbst in den Browseroptionen optimale Einstellungen festzulegen, und die ganze Geschichte wird sich keinen Millimeter bewegen und 1em wird weiterhin 16px bedeuten.

 

[koslowski]

Wer eine von 1em abweichende Standardgröße für Schriftarten wünscht, sollte diese dann fairerweise zumindest nicht in em angeben, sondern in einer absoluten Einheit wie px. Sonst hat es für den Benutzer für viele Seiten mehr Nach- als Vorteile, selbst in den Browseroptionen optimale Einstellungen festzulegen, und die ganze Geschichte wird sich keinen Millimeter bewegen und 1em wird weiterhin 16px bedeuten.

Pixel ist als Einheit für die Schriftgröße leider ganz und gar nicht geeignet, weil sich der Text dann in allen IE-Versionen nicht vergrößern läßt (Seite - Textgröße, nicht Seitenzoom!!). ;)

Leider hat sich das bei sehr vielen noch nicht herumgesprochen.

 

[mermshaus]

Ja, ich verstehe den praktischen Einwand, aber das ändert nichts an der Tatsache, dass Microsoft oder die Webdesigner, die verschleiern, dass das "Textgröße"-Feature im IE "nicht korrekt(?) funktioniert", damit praktisch festlegen, dass 1em = 16px sind und em damit von einer relativen zu einer absoluten Einheit machen. Dadurch werden die Standardeinstellungen für Schriftgröße im Browser mehr oder weniger hinfällig. (Wobei der Unterschied zwischen 1em und 0.9em jetzt glücklicherweise nicht *zu* groß ist.) Im IE kann man sich also gewissermaßen entscheiden, welches Feature man torpedieren möchte. ;)

In vielen Aspekten bin ich sehr dafür, den IE möglichst weitgreifend zu unterstützen (z. B. Background-Images statt CSS3-Effekten), aber an dieser Stelle sehe ich das kleinere Übel ganz klar darin, das Textgröße-Feature für nicht funktional zu erklären. (STRG-Mausrad löst zum Glück Seitenzoom aus, das macht die Entscheidung einfacher.)

Ärgerlich ist, dass die Zuordnung zu

- "Besucher ist unglücklich, weil Textgröße-Feature (nicht Seitenzoom) im IE nicht geht" und
- "Besucher ist unglücklich, weil eigene Standardeinstellungen auf vielen Seiten zu zu kleinem Text führen" (betrifft übrigens natürlich auch IE-Nutzer)

in diesem Fall mehr oder weniger "binär" ist und jeder Besucher einer der beiden Gruppen zugeordnet werden muss.


Edit: Vielleicht 'ne Browserweiche und 0.9em für den IE und ~14px für alle anderen Browser? Teilt natürlich das Problem aber im Grunde auch nur auf.


PS: Bei dem Gerede von Seitenzoom und Textzoom:

Ich vergebe für margin und padding auch px, da der Abstand zwischen den Elementen sich nicht unbedingt vergrößern muss, wenn die Schrift vergrößert wird.

Das ist letztlich auch nicht konsequent, oder? Kommt mir vor wie eine Vermischung von Seitenzoom und reinem Textzoom.

PPS: Ein festes Layout ist ein flexibles Layout mit identischer min-width und max-width. ;)

 

[_Thor_]

Das ist da letztlich auch nicht konsequent, oder?

Wieso sollte das nicht konsequent sein? Wozu würde man nen margin von mehreren em zwischen den Elementen brauchen, oder padding von 3em in einem Element? Wichtig ist, dass sich die Schrift und die Elemente vergrößern.

 

[Loon3y]

Ich habe mir jetzt nicht alle Beiträge von oben bis unten durchgelsen, aber ich möchte gerne auch etwas zu dem letzten von mermshaus sagen.

- "Besucher ist unglücklich, weil Textgröße-Feature (nicht Seitenzoom) im IE nicht geht" und
- "Besucher ist unglücklich, weil eigene Standardeinstellungen auf vielen Seiten zu zu kleinem Text führen" (betrifft übrigens natürlich auch IE-Nutzer)

Aber wer doch bei seinen Standardeinstellungen extra einstellt, dass er 14px Standardschriftgröße haben möchte, der muss sich doch darüber im Klaren sein, dass 14px < 16px sind und somit alles "kleiner" dargestellt wird. Andersrum ist es ebenso.

PPS: Ein festes Layout ist ein flexibles Layout mit identischer min-width und max-width. ;)

Besser wäre wohl endweder:

- ein festes Layout was Auflösungsabhängig ist (Stichwort ist hier @media max-device-width)
- oder ein flexibles Layout mit min-width und max-width.

Alles andere ist zu print-Lastig und einfach nicht webtauglich. Es gibt eine unendliche Fülle an Browserfensterauflösungen (meine z.B. ist daheim Fensterbreite: 1076px, Fensterhöhe: 846px ||Breite Ansichtsbereich: 1060px, Höhe Ansichtsbereich: 651px).

Einzigstes wichtige ist bei einer Webseite, egal ob em oder px, dass man keine zu kleine Schrift und keine zu kleinen Zeilenabstände verwendet. Die Einheit "pt" ist absolut fehl am Platz und kommt aus dem print-Bereich.

Und zum Schluss noch meine Ansicht: ich tendiere eher zu % und/oder em im Deskopbrowser-Bereich, da für mich auch die Einheit "px" eher einen "Zwang" darstellt und dem Besucher etwas aufzwingt und die Besucher auch faul / dumm werden lässt (sie setzten sich nichtmehr mit dem Thema "Technik" auseinander, sondern verlassen sich). Im mobilen Bereich gibt es eh nur Seiten-Zoom, da sind em-Werte für Schriftgrößen überflüssig. Ebenso im CE (Consumer Electronic) - Bereich.


Grüßli
Loon3y