Silja: Text an Gerätegröße anpassen

Moin,
Ist es besser, die Textgröße über verschiedene media-Angaben oder über die Einheit vw zu machen?
Oder gibt es weitere, bessere Methoden? Gruß
Silja

  1. Wie willst du den Text anpassen?

    Den Text bei kleineren Fenstergrößen zu verkleinern ist keine gute Idee.

    1. Auf meinem Smartphone sind die Textgrößen kleiner als am PC. Und warum ist dann die Größe vw eingeführt worden?

      1. Die Einheit vw ist nicht eingeführt worden um Texte schlechter lesbar zu machen.

        Smartphones werden häufig unterwegs gelesen, in der Bahn, um Auto, zu Fuß. Da sollten die Texte eher etwas größer sein.

        Und nur weil Andere schlechter lesbare Webseiten machen sollte man das nicht nachmachen.

      2. Hallo Silja,

        die Größe vw ist eher dazu da, eine Box auf „40% Bildschirmbreite“ zu dimensionieren, unabhängig von der Größe der Elternbox.

        Rolf

        --
        sumpsi - posui - obstruxi
  2. @@Silja

    Ist es besser, die Textgröße über verschiedene media-Angaben oder über die Einheit vw zu machen?

    Kommt drauf an.

    Quasi-stufenlose Änderung ohne Media-Querys hat vielleicht mehr Charme und ist einfacher umzusetzen.

    Aber nicht mit vw allein! Du brauchst einen statischen Anteil und einen variablen Anteil, der in Abhängigkeit von der Viewportbreite vergrößert wird. Und dazu noch eine obere Begrenzung.

    Also sowas wie font-size: min(1em + 1vw, 4em).

    Siehe Postings von neulich ff.

    😷 LLAP

    --
    “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
    1. Also sowas wie font-size: min(1em + 1vw, 4em).

      Was bedeutet dann
      font-size: max(3vw, 14px);
      wie hier
      im Jsfiddle von Rolf?

      1. Hallo Silja,

        Was bedeutet dann
        font-size: max(3vw, 14px);
        wie hier
        im Jsfiddle von Rolf?

        Na der größere der beiden Werte aus 3vw und 14px.

        Bis demnächst
        Matthias

        --
        Du kannst das Projekt SELFHTML unterstützen,
        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
        1. Hallo Matthias,

          Na der größere der beiden Werte aus 3vw und 14px.

          Das wusste ich.
          Ich verstehe aber die Beispiele als Empfehlungen.
          Ist dann die Angabe von min und max angesagt?

      2. Hallo Silja,

        bitte beachte, dass ich da noch nicht die Idee von Gunnar hatte. 3vw ist bei sehr breiten Bildschirmen zu viel. Aber das kannst Du Dir ja auch selbst ausrechnen.

        Bei einer Schriftgröße von 16px ist

        Viewportbreite 3vw calc(1em+1vw)
        640px 19,2px 22,4px
        960px 28,8px 25,6px
        1400px 42px 30px
        1920px 57,6px 35,2px
        3000px 90px 46px

        Mein 3vw entspricht letztlich calc(0em + 3vw). Durch passende Wahl von konstantem und variablem Anteil kannst Du Dir je nach Wunsch eine Gerade erzeugen, die Dir zu den Bildschirmbreiten passende Fontgrößen liefert.

        Mit der min-Funktion kannst Du den Wert dann noch nach oben limitieren. Ja, ich weiß, es klingt widersinnig, dass eine „Minimum“ Funktion einen Maximalwert festlegt, ist aber so. min(a,b) liefert den kleineren der beiden Werte. Ein min(4em, calc(...)) begrenzt den Wert deshalb nach oben auf 4em.

        Rolf

        --
        sumpsi - posui - obstruxi
        1. Hallo Rolf.
          Demnach gibt es keine allgemein anerkannte Empfehlung für die Schriftgrößen je nach Viewportgröße wie früher die 16px als es noch keine Kleingeräte gab.

          1. Hallo Silja,

            dazu sagt besser @Gunnar Bittersmann was...

            Rolf

            --
            sumpsi - posui - obstruxi
            1. Hallo,

              Hallo Silja,

              dazu sagt besser @Gunnar Bittersmann was...

              Rolf

              Ja, so eine Empfehlung von Gunnar oder anderen Ko­ry­phäe als clamp- und Alternativ-Formel für ältere Browser hätte ich auch gerne. Wenn die dann nicht ganz gefällt, kann man sie ja etwas abwandeln. Grüße Lothar

        2. ... und arum plötzlich das 'calc'.
          Die Angabe von

          font-size: min(1em + 1vw, 4em);
           font-size: max(3vw, 14px);  
          

          ist doch vermutlich sinnlos, denn es gilt doch nur die zweite Angabe.

          1. Hallo Silja,

            nein, das ist nicht richtig. Die vw Angabe hängt ja von der BildschirmViewportbreite ab, und dann musst Du einfach die Übergangspunkte ausrechnen. Ein bisschen Mathe sollte jeder Programmierer können…

            $$\frac{14}{0{,}03} \approx 466$$. D.h. unterhalb einer Viewportbreite von 467 Pixeln würde 3vw eine Fontgröße von weniger als 14px ergeben, und die max-Formel sorgt dafür, dass schmale Viewports keine Winzschrift liefern.

            Bei der anderen Formel hängt es von der Fontgröße ab, wo der Begrenzungspunkt ist. Bei einer Basis-Fontsize von 16px ist 1em = 16px und 4em = 64px, d.h. 1vw muss 48px erreichen, dann greift die Limitierung. Das ist bei einer Viewportbreite von 4800px der Fall, was ich nicht mal mit dem 43" Curved-Monster vor mir schaffe (da hätt ich so ein 49" Trümmer mit 5120x1440 nehmen müssen - und anbauen 😉). Schneller ist man bei einer kleineren Basis-Fontgröße an der Grenze, z.B. 12px (was schon anstrengend klein ist), da ist 1em = 12px und 4em = 48px, Differenz 36px. 1vw ist bei 3600px Viewportbreite gleich 36px, das schaff ich so gerade.

            Rolf

            --
            sumpsi - posui - obstruxi
            1. Warum ist das nicht richtig?

              font-size: min(1em + 1vw, 4em);

              liefert einen Wert x für die Fontgröße.

              font-size: max(3vw, 14px);

              liefert einen Wert y für die Fontgröße und überschreibt daher den Wert x.

              Ebenso wie bei

              ....{
              font-size: 16px; font-size: 12px; }

              der Wert 12px verwendet wird.

              Vermutlich lag ein Missverständnis vor. Ich habe oben geschrieben, dass die Angabe von min und max sinnlos ist.
              Und Deine Aussage

              Ja, ich weiß, es klingt widersinnig, dass eine „Minimum“ Funktion einen Maximalwert festlegt, ist aber so. min(a,b) liefert den kleineren der beiden Werte.

              stimmt nach meiner Meinung auch nicht. min legt nicht den Maximalwert der Schriftgröße sondern den Wert der Schriftgröße, es heißt ja nicht font-size <= .... sondern = .

              1. Hallo,

                stimmt nach meiner Meinung auch nicht. min legt nicht den Maximalwert der Schriftgröße sondern den Wert der Schriftgröße, es heißt ja nicht font-size <= .... sondern = .

                Min() ist eine Vergleichsfunktion, die den kleineren von zwei Werten liefert. In diesem Fall an font-size. Wenn einer von den beiden Werten immer weiter steigt, aber der andere konstant bleibt, kann die Schrift eben nicht immer größer werden, sondern erreicht mit dem konstanten Wert ihren Maximalwert.

                Gruß
                Kalk

              2. Hallo Silja,

                autsch. Ich habe Dich falsch verstanden. Ich dachte, du meintest den jeweils zweiten Parameter der min- oder max-Funktion. Bitte entschuldige.

                Ja, du hast recht, zweimal font-size in einer CSS Regel anzugeben ist nicht sinnvoll. Der zweite Wert gewinnt. Aber woher hast Du die Idee, das man das zweimal angeben könnte? Ich habe jetzt nicht alles genau gelesen - hat das hier jemand angedeutet? In meinem Fiddle steht's jedenfalls nicht (puh!).

                Wenn ein Element von zwei CSS Regeln getroffen wird, die beide eine font-size Angabe mitbringen, sieht die Sache schon anders aus. Das kann sinnvoll sein.

                Wenn Du Dich fragst, welche Angabe nun die für Dich richtige ist, tjaaaa... Das musst Du schon wissen. Du musst wissen, wie Du skalieren willst, ob Du eine Mindestgröße willst, oder eine Maximalgröße. Gunnars Formel bringt durch das 1em + ... eine Mindestgröße mit und durch die zusätzliche min-Funktion auch eine Maximalgröße. Damit stellt sie die flexibelste Variante dar. Du musst die Werte darin nur nach deinen Bedürfnissen passend setzen.

                Dann schriebst Du noch:

                Ich habe oben geschrieben, dass die Angabe von min und max sinnlos ist.

                Äh, nein. Eine minimale Fontgröße braucht man, damit die Schrift nicht zu klein wird. Eine maximale Fontgröße verhindert Monsterbuchstaben bei unerwartet breiten Bildschirmen. Und dazwischen ist ein Proportionalbereich.

                Wenn Du eine variable Fontgröße willst, solltest Du so einen Verlauf anstreben:

                X-Achse: Viewportbreite, Y-Achse: font-size

                Natürlich könnte man auch was anderes als eine Gerade zwischen A und B setzen, aber du willst das ja im CSS rechnen können und da ist alles andere als linear gruselig.

                D.h. solange der Punkt A nicht erreicht ist, hast Du einen konstanten minimalen Wert. Ab da steigt die Fontgröße, bis zum Punkt B, und überschreitet diesen Wert nicht.

                Mit einem min(calc(1em + 2vw), 3em) kriegst Du das allerdings nicht hin. Bei dieser Funktion liegt A bei x=0, y=1em. Deswegen kann man das noch um ein max erweitern: max(1em, min(calc(0.5em + 2vw), 3em)). Was Du im calc hinschreiben musst, hängt davon ab, wo die Punkte A und B liegen sollen. Das ist eine einfache Geradenberechnung aus zwei Punkten, hast Du in Mathe bestimmt mal gemacht. Für die Rechnung solltest Du 1em = 16px ansetzen - oder welche "Normal-Schriftgröße" du gerne haben willst. 2vw ist dann dein x in der Geradengleichung, und die 2 ist die Steigung: 2%, oder 0,02. 0.5em ist der y-Achsenabschnitt.

                Weil min(a, max(formel, b)) so mühsam zu schreiben ist, gibt's dafür im CSS auch eine kompaktere Schreibweise: clamp(a, formel, b)

                Rolf

                --
                sumpsi - posui - obstruxi
                1. Hallo Rolf B,

                  Aber woher hast Du die Idee, das man das zweimal angeben könnte?

                  Möglicherweise font-size: clamp(…) und dann eine zweite Angabe, für Browser, die clamp nicht verstehen.

                  Bis demnächst
                  Matthias

                  --
                  Du kannst das Projekt SELFHTML unterstützen,
                  indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                  1. @@Matthias Apsel

                    Möglicherweise font-size: clamp(…) und dann eine zweite Angabe, für Browser, die clamp nicht verstehen.

                    Andersrum wird ein Schuh draus.

                    😷 LLAP

                    --
                    “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
                2. @@Rolf B

                  zweimal font-size in einer CSS Regel anzugeben ist nicht sinnvoll.

                  Natürlich ist es das! Progressive enhancement.

                  Warst du nicht der, der immer darauf besteht, dass es auch im IE funktioniert?

                  body {
                    font-size: 1.2em; /* fallback for old browsers */
                    font-size: min(1em + 1vw, 4em);
                  }
                  

                  😷 LLAP

                  --
                  “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
                3. Hallo,

                  X-Achse: Viewportbreite, Y-Achse: font-size

                  oder hier zum ausprobieren: https://www.j-berkemeier.de/FktPlot.html?xmin=10;xmax=2500;f1=min(2*x/100,32);f2=max(16,2*x/100);f3=max(16,min(2*x/100,32))

                  Gruß
                  Jürgen

          2. Hallo Silja,

            ... und arum plötzlich das 'calc'.
            Die Angabe von

            font-size: min(1em + 1vw, 4em);
             font-size: max(3vw, 14px);  
            

            ist doch vermutlich sinnlos, denn es gilt doch nur die zweite Angabe.

            Insbesondere ist die erste Angabe ungültig, denn CSS kann nur mit calc rechnen.

            Bis demnächst
            Matthias

            --
            Du kannst das Projekt SELFHTML unterstützen,
            indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
            1. @@Matthias Apsel

              Die Angabe von

              font-size: min(1em + 1vw, 4em);
               font-size: max(3vw, 14px);  
              

              ist doch vermutlich sinnlos, denn es gilt doch nur die zweite Angabe.

              Insbesondere ist die erste Angabe ungültig, denn CSS kann nur mit calc rechnen.

              Ich sagte gerade das Gegenteil. Wer recht hat und wer nicht, sagt euch gleich das Licht.

              😷 LLAP

              --
              “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
          3. @@Silja

            ... und arum plötzlich das 'calc'.

            Für Berechnungen in CSS. Innerhalb von min, max, clamp ist calc nicht nötig. Hatte ich schon verlinkt.

            Die Angabe von

            font-size: min(1em + 1vw, 4em);
             font-size: max(3vw, 14px);  
            

            ist doch vermutlich sinnlos, denn es gilt doch nur die zweite Angabe.

            Ja. Wenn du nach oben und nach unten begrenzen willst, ist die clamp-Funktion dein Freund.

            😷 LLAP

            --
            “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
            1. Ja. Wenn du nach oben und nach unten begrenzen willst, ist die clamp-Funktion dein Freund.

              Danke, that's it!

  3. Hallo Silja,

    die Schriftgröße nach Viewporgröße zu wählen ist im Allgemeinen wenig sinnvoll. Warum soll jemand, der ein Bildschirmfenster schmaler zieht, eine kleinere Schrift bekommen und die Lupe zücken müssen?

    Es ist sinnvoll, eine auf einem durchschnittlichen Monitor lesbare Textgröße zu wählen (also ein Monitor mit ca 95dpi) und dem User die weitere Entscheidung zu überlassen. Eine solche Textgröße liegt um die 16px, was auch der Default der Browser ist.

    Man kann über eine leichte Anpassung der Schriftgröße reden, wenn es um Dekortext geht. Dann aber nur minimal, Gunnar schlug neulich etwas wie calc(1em + 1vw) vor, wenn ich mich recht erinnere. Also: Mindestens das Browser-Default, und 1% Fensterbreite hinzu. Bei 1900px sind das aber schon 19px Extra, es ist also ebenfalls eher für Überschriften als für Normaltext sinnvoll.

    Wer größere Schrift sehen will, soll im Browser zoomen. Wenn deine Seite auf bspw. 60em Maximalbreite gestellt ist, wird das beim Zoomen automatisch mehr.

    Rolf

    --
    sumpsi - posui - obstruxi