Gunther: Wert der Basis-Schriftgröße

Beitrag lesen

@@Gunnar:

nuqneH

Glyphen verschiedener Schriftarten gleicher Nominalgröße können unterschiedlich groß sein (x-Höhe). Für ein ähnliches Erscheinungsbild muss man die Zeilenhöhe der Schriftart anpassen.

Ja, und wie?

Nach Augenmaß.

Ich sehe, wir nähern uns an ...! ;-)

Eine An*gleich*ung ist aber nicht möglich, da man nie weiß, welche Schriftart beim Nutzer verwendet wird.

Da hast du Recht, insoweit der User bspw. eigene Schriftarten verwendet.
Ansonsten kann man dem nur versuchen entgegenwirken, indem man per '@font-face' eine entsprechende Schriftart einbindet.

Auch kann das Verhältnis x-Höhe zu Schriftgröße für dieselbe Schrift auf verschiedenen Systemen unterschiedlich sein.

Hier hilft dann nur UA-Sniffing ...

Wobei ich dann wiederum nicht unbedingt sehe, was dagegen sprechen sollte, sich unter diesen Umständen nicht an die Vorgabe der WCAG (>= 1.5) zu halten.

Denn lieber eine größere Zeilenhöhe, als eine zu geringe.

Durchaus möglich, dass die Kurve für Lesbarkeit in Abhängigkeit vom Zeilenabstand vom Optimum zu höheren Abständen flacher abfällt als zu geringeren.

Kann ja jeder halten, wie er meint ...!

Abhängigkeit von Satzbreite als progressive enhancement.

... und das dann aktuell per JS (da mit CSS nicht möglich!).

Mit "nicht möglich" meine ich, dass calc() für line-height aktuell nur von Chrome unterstützt wird,

Mit „progressive enhancement“ meine ich, dass nur in Browsern, die das mit CSS hinbekommen, enhancet wird. Gegenwärtig dann halt nur Chrome.

Dafür ein JavaScript zu schreiben, ist wohl eher graceful degradation.

Ob progressive enhancement oder graceful degradation ist wohl eine Frage des Ausgangspunkt.
Ich sehe es als eine Basis per CSS für alle Browser und dementsprechend enhanced per JS, bzw. wo möglich per CSS.

Als was man das dann bezeichnet, ist mir aber im Endeffekt auch "wurscht".

Und bis man das fertig hat, ist vielleicht schon der nächste Firefox draußen, der das auch mit calc() kann.

Den dann natürlich auch sofort jeder verwendet ...! :-P
Und von den 20 anderen Browsern "out in the wild" ganz zu schweigen.
Irgendwo haben die Möglichkeiten des Testens ja auch ihre Grenzen ...!

und dass man dafür die Breite des Elements kennen muss,

Dass man die i.d.R. kennt, erwähnte ich schon.

auf die man auch per calc() nicht zugreifen kann, da sich ja bspw. Prozentwerte auf die Schriftgröße, und nicht auf die Dimensionen des Elements beziehen …

Deshalb ja vw, nicht %.

Das nutzt dir rein gar nichts!
Es geht doch um die Zeilenhöhe in Abhängigkeit der Zeilenbreite. Und die Zeilenbreite kann ja völlig unabhängig von der Viewportbreite sein.

Du hattest vorgeschlagen:

html {  
   line-height: calc(1.1em + 1vw);  
}

Wenn ich jetzt z.B. ein 3-Spalten Layout habe, wie in meinem vorigen Beispiel angeführt, und somit bspw. für die beiden äußeren Spalten eine Breitenangabe habe wie:

.col {  
   width: 30%;  
   max-width: 30rem;  
}

dann sagt das immer noch nichts über die Schriftgröße, noch die Zeilenbreite, noch die tatsächliche prozentuale Breite dieser Spalte aus.

Ich verstehe ehrlich gesagt (noch) nicht, wie man das Problem mittels 'vw' lösen können soll!?

Gruß Gunther

0 84

[SASS] mixin @media rule Verknüpfung der Expressions?

Gunther
  • css
  1. 1
    Gunnar Bittersmann
    1. 0
      Gunther
      1. 0
        Gunnar Bittersmann
        1. 0
          Gunther
          1. 0

            Korrektur: Geht doch ohne 'unquote()'

            Gunther
          2. 0
            Gunnar Bittersmann
            1. 0
              Gunther
              1. 1
                Gunnar Bittersmann
                1. 0
                  Gunther
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      Gunnar Bittersmann
                    2. 0
                      Gunther
                  2. 0
                    molily
                    1. 0
                      Gunnar Bittersmann
                    2. 0
                      Gunther
                      1. 0
                        molily
                        1. 0
                          Gunther
                          1. 0
                            molily
                            1. 0
                              Gunther
                              1. 0
                                molily
                                1. 0
                                  Gunther
                            2. 0

                              Mobile First

                              molily
                              • design/layout
            2. 0
              Gunnar Bittersmann
            3. 0
              Gunnar Bittersmann
              1. 0
                Gunther
                1. 0
                  Gunnar Bittersmann
              2. 0
                molily
                1. 0
                  Gunther
                  1. 0
                    Gunnar Bittersmann
                  2. 0
                    Gunnar Bittersmann
                  3. 0

                    gelesene Postings hervorheben

                    Gunnar Bittersmann
                    • zu diesem forum
                    1. 0
                      Gunther
                2. 0

                  "Lücke" in stacked MQs detektieren

                  Gunther
                  • javascript
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      Gunther
                  2. 0
                    molily
            4. 0

              Wert der Basis-Schriftgröße

              Gunther
              1. 0
                Gunnar Bittersmann
                1. 0
                  Gunther
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      Gunther
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          Gunther
                          1. 0
                            Gunther
                            1. 0
                              Gunnar Bittersmann
                              1. 0
                                Gunther
                                1. 0
                                  Gunnar Bittersmann
                                  1. 0
                                    Gunther
                                    1. 0
                                      Gunnar Bittersmann
                                      1. 0
                                        Gunther
                                        1. 0
                                          Gunnar Bittersmann
                                          1. 0
                                            Gunther
                                            1. 0
                                              Gunnar Bittersmann
                                              1. 0
                                                Gunnar Bittersmann
                                                1. 0
                                                  Gunther
                          2. 0
                            Gunnar Bittersmann
                            1. 0
                              Gunther
                              1. 0
                                Gunnar Bittersmann
                        2. 0
                          Gunnar Bittersmann
                        3. 0
                          Gunnar Bittersmann
                          1. 0
                            Gunnar Bittersmann
        2. 0
          Gunnar Bittersmann
          1. 0
            Gunther
            1. 0
              Gunnar Bittersmann
              1. 0
                Gunther
                1. 0
                  Gunnar Bittersmann
                  1. 0
                    Gunther
        3. 0
          molily
          1. 0
            Gunther
            1. 0
              molily
              1. 0
                Gunther
            2. 1
              Gunnar Bittersmann
              1. 0
                Gunther
                1. 0
                  Gunnar Bittersmann
                  1. 0
                    Gunther
                  2. 0
                    molily
                    1. 0
                      Gunnar Bittersmann
                      1. 0
                        Gunther
      2. 0
        molily
        1. 0
          Gunther
          1. 0
            molily
    2. 0
      Gunnar Bittersmann
      1. 0
        Gunther