Responsive: Schriftgröße automatisch anpassen

[alwin]

Hallo zusammen!

Frage zur font-size im Allgemeinen: sind die Angaben font-size:100% und font-size:1.0em eigentlich äquivalent? Und stimmt es, dass sich die Schriftgröße nicht automatisch mit dem Vergrößern/-kleinern des Browserfensters ändert, oder hab ich da was falsch verstanden/gemacht?

Bei mir muß ich die Schriftgröße ständig per MediaQueries korrigieren. Das ist etwas nervig.

Alwin

 

[lachender_engel]

Das Thema wurde die Tage schon mal behandelt. Vielleicht hilft Dir der Thread weiter
http://www.psd-tutorials.de/forum/threads/responsiv-font-size-100.162309/

 

[Myhar]

Werde dir klar, was 1em überhaupt bedeutet. Und nein, es heißt nicht: "Ich bin eine magische Einheit die sich immer so verhält wie ich es möchte" ;-)
Wenn man verstanden hat, was 1em heißt weiß man auch, wieso sich die Schriftgröße nicht wie durch Zauberhand anpasst. Auch muss man bedenken, dass die standardmäßig eingestellt Schriftgröße bei jedem Browser (Desktop/Tablet/Smartphone) anders sein kann und auch dadurch Unterschiede auftreten können.

 

[lachender_engel]

Werde dir klar, was 1em überhaupt bedeutet. ....

Meinst Du wirklich so eine Aussage hilft? "Werde Dir klar..." ist ein total uncooler Schlaumeier-Spruch und signalisiert dem anderen, wie dumm er doch ist.
Das nervt mittlerweile, hier im Forum.
Schreibe doch einfach "Um em zu verwenden musst Du wissen, dass ...".
So etwas hilft im Gegensatz zu einem altklugen Spruch um sich selber besser zu machen als die anderen sind.
Dieses Forum dient der Hilfe und nicht der Klugscheißerei!
Wer nicht helfen will, lässt es - lässt aber auch das überhebliche "Ich weiß es, Du nicht..."-Gehabe.
Danke!

 

[Rata]

Meinst Du wirklich so eine Aussage hilft? "Werde Dir klar..." ist ein total uncooler Schlaumeier-Spruch und signalisiert dem anderen, wie dumm er doch ist.

Protest!

Es signalisiert, wie unwissend er möglicherweise noch ist oder weist darauf hin, über einen ihm mutmaßlich bekannten bestimmten Sachverhalt nachzudenken.
Alles darüber hinausgehende bände sich der Leser selbst ans Bein

Geschickter wäre natürlich »mach Dir klar, daß...« Klingt weniger wertend


Lieber Gruß
Rata

 

[lachender_engel]

Rata, bitte bedenke, dass wir alle unterschiedliche Auffassungsgaben und manchmal ein anderes Verständnis für DInge haben.
Ist der TE ist in diesem Bereich "unwissen"? Oder versteht er das, wass er bisher über em gelesen hat nur anders als andere?
Ich bleibe dabei: Zu schreiben "Werde Dir klar, dass..." hilft hier nicht weiter. Ein Hinweis worauf der TE beim "klar werden" achten soll und vielleicht ein Link mit genau der wichtigen Information hilft.
Noch mal: Für mich ist das hier ein Forum der HIlfe und keines das deutlich machen muss wie "dumm" oder meinet wegen auch "unwissen" jemand ist, der/die hier Fragen stellt.

 

[Myhar]

Meinst Du wirklich so eine Aussage hilft? "Werde Dir klar..." ist ein total uncooler Schlaumeier-Spruch und signalisiert dem anderen, wie dumm er doch ist.

Er sagt dem anderen, über welches Thema er (oder sie) sich informieren soll.
Hätte er/sie mich das bei einem Bier in der Bar gefragt hätte ich es erklärt, aber das Forum setzt voraus, dass man einen Internetzugang hat, also kann man diesen auch benutzen. Aber ich hätte natürlich auch statt dessen diesen Link hier posten können, da hätte man sich nicht die Mühe machen müssen, selbst etwas zu tippen.
Zu diesen Grundlagen findet man mehr als genügend Infos im Netz, da hilft es nichts, wenn ich das ganze zum 10000en mal erkläre. Ich leite die Leute gerne in die richtige Richtung, bei größeren Themen müssen sie sich die Infos leider selbst zusammensuchen, dafür ist mir meine Zeit zu knapp bemessen.
Edit: Natürlich kann man das bestimmt auch schöner und wertfreier formulieren, ich will ja niemandem etwas unterstellen. Niemand weiß alles und was man nicht weiß kann man sich beibringen

 

[alwin]

Hallo miteinander,

danke für Eure Hilfe. Auch, wenn es da etwas Diskussion über das "wie" gab

Das Thema wurde die Tage schon mal behandelt. Vielleicht hilft Dir der Thread weiter

Den Link hatte ich bereits gelesen und wollte meine Frage sogar dort drinnen stellen. Hab dann aber gedacht, dass gehört sich nicht

Werde dir klar, was 1em überhaupt bedeutet.

Der Satz hat ja für etwas "Unruhe" gesorgt Danke an die Verfechter der "guten Hilfe" und trotzdem Dank für den vielleicht als etwas unglücklich formuliert zu empfindenden Satz

Ja, die Antworten ala "nutz die SuFu" oder "frag Google" sind als Suchender echt verflixt nervig. Da hat man endlich den Thread gefunden, der perfekt das eigene Problem beschreibt und dann steht dort statt einer Antwort so was. Häufig sind gerade diese Beiträge auch noch die ersten Treffer bei google & co.
Andererseits ist natürlich auch nachzuvollziehen, dass die Gemeinde nicht unendlich viel Lust, Zeit und Kraft hat, jedem alles vorzukauen. Eigeninitiative muß schon sein.

Ich hatte mich mit em schon etwas beschäftigt. Bin auch über so manche Seiten gesurft und hab versucht ein Bild zu bekommen. Aber so richtig klar war es mir trotzdem nicht.

Was ich bisher gefunden habe:

• 1em = 16px = 100% => 16px ist Std. Größe bei Browsern (ohne extra CSS-Regel)
  
• em vererbt sich vom body-Element nach unten in die anderen Elemente. Dadurch kann es (je nach dem gewollt oder ungewollt) zu Überlagerungen kommen.
• wenn User im Browser Schriftgrößen extra einstellt, kann mit em das Verhältnis unterschiedlicher Schriftgrößen zu einander beibehalten werden.
• 1.0em = 100% gilt nur zu 99%: wenn man im Browser die Text-Größe mit SMALLEST und LARGEST einstellt, gibt es doch Größenunterschiede zwischen 1.0em und 100%. Und evtl. braucht man im html {} ein font-size: 100% für Kompatibilitäten in (alten?) IE Browsern.
• em stammt als Kürzel aus alten Druckertagen. Hab aber vergessen, was genau wo und wie.

Was ich gehofft hatte, dass jemand noch einen neuen Tipp hat, wie sich die Schriftgröße dynamisch der Fenstergröße anpassen kann. Aber wenn ich eure Kommentare richtig verstehe, dann geht das nicht. Ergo: man muss, immer wenn es unleserlich bzw. unhübsch wird, die font-size mittels MediaQueries neu trimmen.

Alwin

 

[afr0kalypse]

Mit javascript geht das

http://stackoverflow.com/questions/6207075/font-size-that-expands-when-you-resize-the-window

Möglicherweise geht das auch, wenn du anstatt purem css LESS oder SASS nutzt.

 

[Myhar]

em stammt als Kürzel aus alten Druckertagen. Hab aber vergessen, was genau wo und wie.

Dabei wäre genau der Punkt das wichtigste gewesen.
Also hier die

1em = 16px = 100% => 16px ist Std. Größe bei Browsern (ohne extra CSS-Regel)

1em ist also nichts anderes als die Breite des Großbuchstabens M. Die ist bei den meisten Browsern eben 16px in der Standardeinstellung. Hat man nun eine andere Schrift eingestellt ist 1em auch anders.
Kann man garantieren dass jeder (mobile) Browser (egal ob aktuelle oder zukünftige Versionen) immer 1em = 16px in der Standardeinstellung liefert? Ich denke nicht.
Vielleicht ist jetzt auch klar, warum 1em "vererbt" wird und wie man damit umgeht.

 

[afr0kalypse]

...immer 1em = 16px in der Standardeinstellung liefert? Ich denke nicht.

Dem kann man doch wunderbar entgegenwirken:

* { font-size: 16px; font-family: wasauchimmer; }

 

[Myhar]

Alle Einstellungen vom User zu überschreiben ist die Beste Lösung, was hat der denn auch schon an seinem Browser einzustellen. So was gehört unterbunden! Man will schließlich keine individuellen Besucher auf seiner Seite, alles muss pixelgenau gleich aussehen überall.

 

[afr0kalypse]

Alternativ kann man ja auch nur HTML und kein CSS anbieten.
Aber CSS ist für genau solche Fälle gedacht. Man muss halt abwägen, was man will. Ein rein funktionales Layout oder vielleicht ein Design, was bestimmte Anforderungen hat.

 

[FlashZange]

Was ich gehofft hatte, dass jemand noch einen neuen Tipp hat, wie sich die Schriftgröße dynamisch der Fenstergröße anpassen kann. Aber wenn ich eure Kommentare richtig verstehe, dann geht das nicht. Ergo: man muss, immer wenn es unleserlich bzw. unhübsch wird, die font-size mittels MediaQueries neu trimmen.

Wie afr0kalypse schreibt, das geht nur mit JavaScript. Auch ein schöner Artikel dazu:
http://tympanus.net/codrops/2013/11/19/techniques-for-responsive-typography/

Aber das Schöne an "em" (und auch "rem") ist ja, dass du nur die font-size des body ändern musst, weil alle anderen darauf aufbauen. D.h. du musst nur eine Regel ändern um die ganze Seite anzupassen. Kann ich mir Schlimmeres vorstellen