responsive Webdesign - Wieso Schriftgrößen in em?

Winkili · 14.11.2011

Hallo PSD'ler,

ich bin aktuell dabei mich in das Thema responsive Webdesign einzulesen. Bei dem Thema fluid Grids bin ich wiederholt über die Aussage gestolpert, man solle Schriftgrößen in der Prozentangabe em angeben. Aber wieso?
Ich kann verstehen, dass bei einem durchgängig flexiblen Raster alles auf prozentualen Angaben aufbaut, doch ist dies nur eine schönere Variante und theoretisch nicht zwingend notwendig?

Vielen Dank,
Winkili

ckaiser · 14.11.2011

AW: responsive Webdesign - Wieso Schriftgrößen in em?

Ich kann Dir leider nicht helfen, möchte Dich aber gerne fragen, was Du gerade zum Thema "responsive Webdesign" liest?

msblacky · 14.11.2011

AW: responsive Webdesign - Wieso Schriftgrößen in em?

Hallo,

soweit ich weis, was ich heute mal gelesen habe bedeutet em prozentual die Angabe zur Standardgröße von internen Browser-hmtl Einstellungen und bei Schriftgrößen ist es 16 pkt bei den meisten Browsern.

msblacky

mwxx · 15.11.2011

AW: responsive Webdesign - Wieso Schriftgrößen in em?

Die Einheit em ist eine relative Einheit. Sie ist, wie msblacky schreibt, auf die Standard-Schriftgröße bezogen. Das bedeutet, dass z.B. beim Zoomen des Bildschirms automatisch auch die Schrift sauber mitgezoomt wird.

Myhar · 15.11.2011

AW: responsive Webdesign - Wieso Schriftgrößen in em?

Das hat zB folgenden Hintergrund:
Öffne eine Seite, welche die Schriftgröße in px definiert, einmal mit dem Internet Explorer. Dann im Menü unter Ansicht -> Schriftgröße die Schriftgröße ändern. Was passiert im IE? Gar nichts. Er stellt weiterhin 12px als 12px dar. Definiert man jedoch die Schriftgröße in em, dann wird auch korrekt skaliert.
Das ganze geht auch mit der aktuellen Version 9 des IE.

Das Selbe gilt natürlich auch für Breiten- und Höhenangaben in em/px. Lässt sich sogar im Firefox nachvollziehen: Man öffnet eine Seite und stellt unter Ansicht -> Zoom -> "Nur Text zoomen" ein. Dann werden Bereiche, bei denen die Größe in px angegeben wurde, nicht mitskaliert.

Auch ist mit der Schriftgröße in em festgestellt, dass sich Schriftgrößen an der vom Benutzer eingestellten Schriftgröße orientieren. Auch hier ein kleines Bsp, welches auch in FF, Opera, etc. funktioniert
Ein Mensch, welcher nicht mehr so gut sieht, stellt sich seine Schriftgröße standardmäßig auf 22px, statt der Standardmäßigen 16px ein. Kommt er nun auf eine Webseite, welche die Schriftgröße des <body> mit 12px definiert, dann wird ihm alles in 12px angezeigt (außer, er hat zusätzlich noch eine Mindestschriftgröße definiert). Ist als Definition jedoch zB 0.8em angegeben, dann sieht er es um 0.8em kleiner als seine eingestellten 22px. (Wie viel das ist, weiß ich leider nicht auswendig :-D )

Hat das geholfen?
L. G.

Ladyan · 15.11.2011

AW: responsive Webdesign - Wieso Schriftgrößen in em?

mwxx schrieb:
Das bedeutet, dass z.B. beim Zoomen des Bildschirms automatisch auch die Schrift sauber mitgezoomt wird.

Das wird sie auch bei px-Angaben.

Myhar · 15.11.2011

AW: responsive Webdesign - Wieso Schriftgrößen in em?

Nein, das ist schlichtweg falsch, auch wenn es für die mehrzahl der am Markt befindlichen Browser zutreffen mag.
Es ist nicht so, dass die px-Angaben mitgezoomed werden. Lieber einmal ausprobieren, bevor man etwas falsches schreibt. Ich weiß, dass du dich nicht auf meinen Beitrag beziehst, aber ich habe in meinem Beitrag genau aufgeführt, unter welchen Umständen/Browsern dies zutrifft.
Und Internet Explorer wird in meinen Beiträgen nicht als Synonym für "alle Browser, welche es auf der weiten Welt gibt" verwendet. ;-)

L. G.

piepel · 15.11.2011

AW: responsive Webdesign - Wieso Schriftgrößen in em?

Winkili schrieb:
... man solle Schriftgrößen in der Prozentangabe em angeben. Aber wieso?
Ich kann verstehen, dass bei einem durchgängig flexiblen Raster alles auf prozentualen Angaben aufbaut, doch ist dies nur eine schönere Variante und theoretisch nicht zwingend notwendig?

es gehört zum sauberen Stil.
Ansonsten gehört die %-Angabe zu einem zugehörigen Container und die em-Angabe zur eingestellten Schriftgröße.
So stelltst z.B. in einem CSS-Reset deine Container mit

HTML:

font-size: 100%;

ein und arbeitest dann mit em weiter.
Klar kannst du auch mit Taschenrechner und % arbeiten, aber ich denke
em ist einfach sauberer.

Ladyan · 16.11.2011

AW: responsive Webdesign - Wieso Schriftgrößen in em?

Myhar schrieb:
Nein, das ist schlichtweg falsch, auch wenn es für die mehrzahl der am Markt befindlichen Browser zutreffen mag.
Es ist nicht so, dass die px-Angaben mitgezoomed werden. Lieber einmal ausprobieren, bevor man etwas falsches schreibt. Ich weiß, dass du dich nicht auf meinen Beitrag beziehst, aber ich habe in meinem Beitrag genau aufgeführt, unter welchen Umständen/Browsern dies zutrifft.
Und Internet Explorer wird in meinen Beiträgen nicht als Synonym für "alle Browser, welche es auf der weiten Welt gibt" verwendet. ;-)

L. G.

Deswegen habe ich mich auch nicht auf deinen Beitrag bezogen. Wieso nimmst du ihn dann als Grundlage?

Wenn man die Ansicht der Seite zoomt WIRD die Schrift vergrößert und verkleinert - im Firefox sowie im Internet Explorer für eine Seite die mit em arbeitet und für eine Seite die mit px-Angaben arbeitet ausprobiert bevor ich meinen Beitrag verfasst habe.

Natürlich hilft "die Seite zoomen" den meisten Nutzern nicht weiter, weshalb ein reaktives Verhalten zur eingestellten Standardschriftgröße sowie die Änderung bei "Schriftgröße vergrößern/verkleinern" durchaus sinnvoll ist. Nicht falsch verstehen, ich bin absolut für den Einsatz von Angaben in em - lediglich die Aussage, dass beim Zoomen des gesamten Webauftritts die Schrift in px nicht mitgezoomt würde ist falsch.

Lg

Myhar · 16.11.2011

AW: responsive Webdesign - Wieso Schriftgrößen in em?

Ok, da hast du wohl Recht. Du meintest wohl die Zoomfunktion vom Browser (welcher beim IE aber auch erst seit Version 7 existiert). Hier wird alles gezoomed, da hast du natürlich Recht.
Irgendwie war ich wohl der Annahme, dass du das Zoomen von Text meinst, dann wäre die Aussage falsch gewesen.
Entschuldige

Ladyan · 19.11.2011

AW: responsive Webdesign - Wieso Schriftgrößen in em?

Kein Ding, du hast ja vollkommen Recht mit dem was du schreibst - ich wollte nur die Aussage von mwxx nicht unkommentiert so stehen lassen.
Der IE zoomt erst seit Version 7? Auch bei STRG + ? Interessant.. ist mir nie aufgefallen, nutze ihn allerdings auch nur zum Testen.

Lg

wex_stallion · 12.12.2011

AW: responsive Webdesign - Wieso Schriftgrößen in em?

Ich hänge mir hier mal dran …

Ich hab mir mal diverse Tutorials zum Thema angeschaut (vielleicht auch die falschen) und bin über eine Sache gestolpert, die mich wundert.

Viele machen »obenrum« fleißig in Sachen Prozent/em, aber bei den Smartphones z.B. sieht man oft wieder Pixelangaben in den tutorierten CSS-Dateien.

Ich persönlich finde das eher unlogisch, aber ich bin mit gerade nicht sicher, ob ich nur die falschen Tutorials erwischt hab oder mein Logik als Logistiker mich hier gerade im Stich lässt.