Welche Font-Size verwendet eine Media-Query?

[Gunnar Bittersmann]

@@Rolf B

Ich habe das jetzt auf 1.15rem (18.4px bei einer Standardfontsize von 16px) vereinheitlicht und muss zusehen, dass ich im weiteren Verlauf des Makeover den Font-Ringkampf der Stylesheets noch weiter beschwichtigt bekomme. Da sind eine Menge %-Angaben drin, die sich über mehrere Vererbungsstufen rauf- und wieder runterrechnen, das will ich - wo sinnvoll - auf rem standardisieren.

Wenn du da gerade dran bist, könntest du in Erwägung ziehen, die Typographie responsiv zu machen:

• Die Basisschriftgröße wächst mit der Viewportbreite. Natürlich nicht proportional, sondern bspw.

  html { font-size: calc(1em + 1vw) }
  

  Kleiner als 1em kann die Basisschriftgröße damit nicht werden. Nach oben kann man sie auch noch beschränken:

  html { font-size: min(1em + 1vw, 1.25em) }
  

• Die Zeilenhöhe hängt von der Satzbreite ab. Da man mit calc() (noch) nicht durch Längen dividieren kann, mit Mediaquery:

  html {
    line-height: 1.4;
  
    @media (width >= 40em) {
      line-height: 1.5;
    }
  }
  

• Verwendung einer Skala für Schriftgrößen, d.h. eines Faktors k.
  kleiner Text: Basisschriftgröße/k
  h3: Basisschriftgröße × k
  h2: Basisschriftgröße × k²
  h1: Basisschriftgröße × k³

  Der Faktor k hängt von Viewport ab. Bei kleinen Viewports sollte er nicht allzu groß sein; bei großen Viewports darf (sollte) der Unterschied der Schriftgrößen größer sein. Bspw.

  html {
    --font-scale: 1.2;
  
    @media (width >= 40em) {
      --font-scale: 1.25;
    }
  
    @media (width >= 60em) {
      --font-scale: 1.3;
    }
  }
  

Alles anzusehen in diesem Codepen.

Jolan tru