Philip: Schriftgrösse der Bildschirmbreite anpassen ?

Gibt es eine Möglichkeit die Schrittgröße an das Ausgabe Medium anzupassen. Ich meine das so, wenn ich z.B. einen Titel oder Satz habe wie

"Politik und Fußball passt nicht zusammen?"

und das AusgabeMedium 900 Pixel Breit ist, das die Schrittgröße automatisch so angepasst wird, das der Satz die richtige Größe hat, ohne zu klein oder zu Groß und einen Zeilenumbruch erhält. Philip

  1. @@Philip

    Gibt es eine Möglichkeit die Schrittgröße an das Ausgabe Medium anzupassen.

    Ja, mit JavaScript.

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  2. Hallo Philip,

    Gibt es eine Möglichkeit die Schrittgröße an das Ausgabe Medium anzupassen. Ich meine das so, wenn ich z.B. einen Titel oder Satz habe wie

    "Politik und Fußball passt nicht zusammen?"

    und das AusgabeMedium 900 Pixel Breit ist, das die Schrittgröße automatisch so angepasst wird, das der Satz die richtige Größe hat, ohne zu klein oder zu Groß und einen Zeilenumbruch erhält.

    Du kannst vw als Schriftgröße angeben, etwa so. Wenn du es noch spezifischer brauchst, kannst du eventuell zusätzlich noch mit media queries arbeiten.

    LG,
    CK

    1. @@Christian Kruse

      Du kannst vw als Schriftgröße angeben, etwa so.

      Und wie soll damit „das die Schrittgröße automatisch so angepasst wird, das der Satz die richtige Größe hat, ohne zu klein oder zu Groß und einen Zeilenumbruch erhält“ erfüllt werden?

      Allegemein ist font-size: 5vw keine gute Idee. Bei schmalen Viewports wird die Schriftgröße unleserlich winzig.[1]

      In die Berechnung muss schon eine Mindestschriftgröße mit rein: font-size: calc(0.8rem + 3vw)

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory

      1. Ich weiß, das ist in meinem Beispiel auch so. ↩︎

      1. Hello Gunnar,

        Allegemein ist font-size: 5vw keine gute Idee. Bei schmalen Viewports wird die Schriftgröße unleserlich winzig.[^1]

        In die Berechnung muss schon eine Mindestschriftgröße mit rein: font-size: calc(0.8rem + 3vw)

        Könntet Du bitte noch erklären, wie sich das mit der Viewport-Width berechnet? In welcher Einheit wird die denn normalerweise gemessen? Sind das nicht Pixel?

        Irgendwie leuchtet mir das nicht ein, wie ein vermutlich doch recht großer Wert sich auf meistens doch eher kleine Font-Size-Werte auswirkt.

        Liebe Grüße
        Tom S.

        --
        Es gibt nichts Gutes, außer man tut es
        Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
        1. @@TS

          In die Berechnung muss schon eine Mindestschriftgröße mit rein: font-size: calc(0.8rem + 3vw)

          Könntet Du bitte noch erklären, wie sich das mit der Viewport-Width berechnet? In welcher Einheit wird die denn normalerweise gemessen? Sind das nicht Pixel?

          Irgendwann muss zur Ausgabe auf den Bildschirm in Device-Pixel umgerechnet werden, ja.

          Zur Erklärung beziehe ich mich jetzt aber mal auf CSS-Pixel, im Folgenden „px“ genannt.

          Angenommen, der Viewport ist 320px breit und die Basisschriftgröße ist 16px. Dann ist die berechnete Schriftgröße 0.8 · 16px + 0.03 · 320px = 12.8px + 9.6px = 22.4px.

          Bei einer Viewportbreite von 1440px ergibt sich: 0.8 · 16px + 0.03 · 1440px = 12.8px + 43.2px = 56px.

          Irgendwie leuchtet mir das nicht ein, wie ein vermutlich doch recht großer Wert sich auf meistens doch eher kleine Font-Size-Werte auswirkt.

          Du warst nicht dem Irrtum aufgesessen, vw hieße viewport width? Es sind Prozent der Viewportbreite.

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. Hello,

            Schon mal Danke für den ersten Erklärungsansatz ;-)

            Irgendwie leuchtet mir das nicht ein, wie ein vermutlich doch recht großer Wert sich auf meistens doch eher kleine Font-Size-Werte auswirkt.

            Du warst nicht dem Irrtum aufgesessen, vw hieße viewport width? Es sind Prozent der Viewportbreite.

            Nicht vollständig. Dass es "der 100ste Teil der Viewportbreite" sein soll, hatte ich wohl gelesen. Es sind also auch nicht "Prozent der Viewportbreite", denn dazu würde eine zweite Bezugsgröße fehlen. Aber irgendwie laufen meine Versuche, daraus eine verlässliche Darstellungsgröße zu entwickeln, immer noch in die Irre. Ich werde noch eine Weile üben und mich dann dazu nochmal melden.

            Liebe Grüße
            Tom S.

            --
            Es gibt nichts Gutes, außer man tut es
            Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
            1. Hallo

              Dass es "der 100ste Teil der Viewportbreite" sein soll, hatte ich wohl gelesen. Es sind also auch nicht "Prozent der Viewportbreite", denn dazu würde eine zweite Bezugsgröße fehlen.

              ???

              Der 100-ste Teil der Viewportbreite enspricht aber sowas von exakt einem Prozent der Viewportbreite. Welche zweite Bezugsgröße fehlt dir denn hier?

              Tschö, Auge

              --
              Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
              Toller Dampf voraus von Terry Pratchett
            2. @@TS

              "der 100ste Teil der Viewportbreite" […] nicht "Prozent der Viewportbreite"

              Boing!

              denn dazu würde eine zweite Bezugsgröße fehlen.

              „Prozent von“ bezieht sich genau wie „Teil von“ auf eine Bezugsgröße.

              „Prozent von“ ist ja nichts anderes als „Teil von“ – eben der 100ste Teil.

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              1. Hello,

                @Auge
                @Gunnar Bittersmann

                ich habe das inzwischen auch verstanden, wie es gemeint ist.

                Mit '%' wird allerdings immer das {(Verhältnis zwischen zwei Größen) * 100} bezeichnet.
                Wenn nun eine der Größen die Viewportbreite in Pixeln ist, was ist dann die zweite Größe?

                Darüberhinaus ist mir die Rechnung von Gunnar noch nicht verständlich. Aber dazu gebt mir doch bitte noch etwas Zeit zum Nachdenken und Suchmaschinieren.

                Liebe Grüße
                Tom S.

                --
                Es gibt nichts Gutes, außer man tut es
                Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
                1. @@TS

                  Mit '%' wird allerdings immer das {(Verhältnis zwischen zwei Größen) * 100} bezeichnet.
                  Wenn nun eine der Größen die Viewportbreite in Pixeln ist, was ist dann die zweite Größe?

                  Der zweite Summand in calc(0.8rem + 3vw).

                  Darüberhinaus ist mir die Rechnung von Gunnar noch nicht verständlich. Aber dazu gebt mir doch bitte noch etwas Zeit zum Nachdenken und Suchmaschinieren.

                  An 3% = 0.03 sollte es nicht hängen?

                  LLAP 🖖

                  --
                  “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                  1. Hello,

                    ok, eindeutig ein Fall von

                    Brett mit Guckloch

                    Brett vorm Kopf :-O

                    Liebe Grüße
                    Tom S.

                    --
                    Es gibt nichts Gutes, außer man tut es
                    Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
    2. ich verstehe nicht ganz

      https://codepen.io/anon/pen/awmEae?editors=1100#0

      das hat keinerlei Auswirkung auf den Text

      1. Hallo,

        ganz zufällig habe ich mich viel damit die letzten Tage beschäftigt. Erst mal zur Lösung: vw wurde schon gesagt, besser klappts noch(für mich zumindest) mit vmin

        body{
        font-size: 12px; /* Browser die V-Werte nicht verstehen.*/
        font-size: 3vmin;
        }
        
        

        Auch der zusätzlich Hinweis mit media queries wurde schon gegeben. Nicht unbedingt notwendig aber als Feinschliff ganz gut. Beispiel:

        @media screen and (max-width: 820px)
        {
        body{font-size:4vmin;} 
        }
        

        Noch ein hilfreicher Link: *englisch https://css-tricks.com/viewport-sized-typography/

        Nun zum Wesentlichen: Ja es geht und für meine Ansprüche auch wie gewollt. Aber bei der Nutzung es gibt einiges zu bedenken:

        • -Viele Handys/Tablets und deren Browser bringen mittlerweile schon von Haus aus Tools mit, die eine seperate Textsteuerung ermöglichen, leider auch einige automatisch(die dadurch nicht genau vorhersehbar sind).

        • -Die Zoomfunktion des Browsers hat keine Wirkung mehr auf die Größe der Texte.

        • +Immer proportional wie gewollt auf dem Bildschirm egal ob Handy oder 100zoll Riesen-TV.

        Gruss
        Henry