RWD und 'font-size'

[Gunther]

Hallo werte Selfgemeinde,

ich habe meinen Beitrag jetzt absichtlich unter dem Themenbereich "Meinung" gepostet, da mich mal eure Meinungen/ Ansichten/ Vorgehensweisen zum Thema interessieren.

Für mich stellt sich bei dem Thema "Responsive Web Design" vor allem immer ein Problem, nämlich dass der Schriftgröße(n).

Da es ja zumindest bisher und in absehbarer Zukunft keine CSS-Eigenschaften wie "min-|max-font-size" gibt, bzw. geben wird, kann man also bis dato ja nur eine 'font-size' für ein Element angeben.

Für normalen Fließtext kommt man da sicherlich auch mit ein paar Breakpoints via Media Queries aus.

Anders aber schon bei Überschriften und "speziellen Texten" (bspw. Slogans), deren Größe starke Auswirkungen auf das Gesamtbild hat.

Wie macht ihr das, bzw. würdet ihr das machen?

Eine mögliche Variante, die mir einfällt, wäre die größtmögliche Schriftgröße (für den Bereich der jeweiligen MQ) per CSS festzulegen, und dann per Javascript entsprechend anzupassen.

Wobei ich dann gleich die Frage hätte, wie man das per JS ggf. am "performantesten" löst?
Also quasi so eine Funktion, wie z.B. das jQuery Plugin FitText.

Oder gleich FitText verwenden? Ansonsten welches der auf der GitHub-Seite genannten alternativen Skripte könnt ihr empfehlen?

Ach ja, ich verwende 'EM' für die Schriftgrößen, weil ich eine ggf. vom User im Browser eingestellte Standard-Schriftgröße erhalten möchte. Das Skript sollte also die "Basis-Schriftgröße" mit berücksichtigen.

Besten Dank im Voraus!

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Wie macht ihr das, bzw. würdet ihr das machen?

Du erinnerst dich?

Statt der linearen sind natürlch auch anderen Funktionen denkbar.

Chrome ist übrigens buggy.

Qapla'

[Gunther]

@@Gunnar:

nuqneH

Wie macht ihr das, bzw. würdet ihr das machen?

Du erinnerst dich?

Jetzt wo du es sagst, bzw. verlinkt hast ...! ;-)

Statt der linearen sind natürlch auch anderen Funktionen denkbar.

Chrome ist übrigens buggy.

Na ja, calc() hat ja schon eine erschreckend schlechte Browserunterstützung und die der Viewport Units ist auch nicht viel besser.

Und wenn dann auch noch Chrome aufgrund des/der Bugs ausfällt, dann bleibt ja kaum noch etwas übrig ...! :-(

Aber das wäre ja dann der (ideale?) Ansatz für eine JS Lösung, denn 'vw' lässt sich ja per

var vw = document.documentElement.clientWidth / 100;  

(vgl. http://jsperf.com/viewport-width-pure-js-vs-jquery/6)

ermitteln.

"Problem" dabei ist nur, dass man das u.U. noch mit "matchMedia" (oder für bessere Cross-Browser-Kompatibilität "Modernizr.mq") kombinieren muss, wenn aufgrund unterschiedlicher Anordnungen verschiedene "Formeln/ Werte" benötigt werden. Aber auch das sollte ja zu schaffen sein.

Oder hast du eine andere/ bessere Idee?

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Na ja, calc() hat ja schon eine erschreckend schlechte Browserunterstützung und die der Viewport Units ist auch nicht viel besser.

?? Android hinkt hinterher. Opera Mini, hm, ist der besonders relevant? Ansonsten ist doch alles im grünen Bereich.

Und natürlich sollte vor calc und vw/vh etc. ein Fallback stehen, der von allen Browsern verstanden wird. Progressive enhancement.

Und wenn dann auch noch Chrome aufgrund des/der Bugs ausfällt, dann bleibt ja kaum noch etwas übrig ...! :-(

Fällt aus? Der Bug tritt bei Änderung der Browserfenstergröße auf. Dann wird die Schriftgröße nicht neu berechnet. Beim initialen Laden der Seite rechnet Chrome korrekt.

Wer (außer Entwicklern) zerrt schon an seinem Browserfenster?

Und wer dreht schon sein Smartphone/Tablet? Das sind schon ein paar mehr. Dummerweise scheint Chrome auch bei orientation-change die Schreiftgröße nicht neu zu berechnen. Das ist wirklich übel.

Qapla'

[Gunther]

@@Gunnar:

nuqneH

Na ja, calc() hat ja schon eine erschreckend schlechte Browserunterstützung und die der Viewport Units ist auch nicht viel besser.

?? Android hinkt hinterher.

Aber nicht in punkto Marktanteilen ...! ;-)

Opera Mini, hm, ist der besonders relevant?

Nö, für mich gar nicht.

Ansonsten ist doch alles im grünen Bereich.

Und natürlich sollte vor calc und vw/vh etc. ein Fallback stehen, der von allen Browsern verstanden wird. Progressive enhancement.

Ja, versteht sich ja von selbst ...! :-P

Und wenn dann auch noch Chrome aufgrund des/der Bugs ausfällt, dann bleibt ja kaum noch etwas übrig ...! :-(

Fällt aus? Der Bug tritt bei Änderung der Browserfenstergröße auf. Dann wird die Schriftgröße nicht neu berechnet. Beim initialen Laden der Seite rechnet Chrome korrekt.

Hmmm ..., wat denn nun!?
Bei Can I use steht (Known issues):"Chrome does not support viewport units for border widths, column gaps, transform values, box shadows or in calc() until version 34."

Wer (außer Entwicklern) zerrt schon an seinem Browserfenster?

Keiner natürlich.

Und wer dreht schon sein Smartphone/Tablet? Das sind schon ein paar mehr. Dummerweise scheint Chrome auch bei orientation-change die Schreiftgröße nicht neu zu berechnen. Das ist wirklich übel.

Deshalb ja u.a. auch (zusätzlich) eine JS Variante.

Gruß Gunther