Schriftgrößen-Idee: px am Root, rem für Komponenten, em für Textelemente

Ich, seit etwa einem Jahr: "rem sind so cool! Ich werde alles damit skalieren, damit ich die Schriftgröße am Root-Element anpassen kann und alles mitskaliert!" Es war ein schöner Traum. Und es war keine Katastrophe. Das ist es, was ich hier auf CSS-Tricks gerade mache und so spielt es sich in einem sehr einfachen Szenario ab

Das kommt im Wesentlichen von

/* Document level adjustments */
html {
  font-size: 17px;
}
@media (max-width: 900px) {
  html { font-size: 15px; }
}
@media (max-width: 400px) {
  html { font-size: 13px; }
}

/* Type will scale with document */
h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2.5rem;
}
h3 {
  font-size: 2rem;
}

Ich gebe zu, ich mag diese Einfachheit, aber ich fange an zu denken, dass sie für alle außer den einfachsten Websites ein wenig zu träumerisch ist. Das Hauptproblem: Man kann nicht erwarten, dass Typografie, die man bei einer Bildschirmgröße festlegt, durch einfaches proportionales Skalieren einfach richtig aussieht. Große Typografie könnte beim Hochskalieren zu groß werden. Kleine Typografie könnte zu klein werden (ein häufiges Problem, das mich erwischt). Oder sogar das Gegenteil von beidem, wobei große Typografie nicht *klein genug* werden könnte.

Wenn eines dieser Dinge passiert, dann nimmt man @media query-spezifische Anpassungen vor, was nicht nur verwirrend wird, sondern auch nicht sehr effizient ist (Größe ändern, nur um sie dann wieder zu ändern, um sie zu korrigieren).

Hier ist also meine Idee: Man behält px-Größenanpassungen auf Dokumentenebene bei, um einfache/effiziente umfangreiche Größenänderungen vornehmen zu können. Aber dann hat jedes Modul auf der Seite eine Schriftgröße, die in rem festgelegt ist. Tatsächliche Textelemente (h1, h2, p, li, was auch immer), wenn man sie überhaupt skaliert, werden in em skaliert und werden somit relativ zum Modul.

Auf diese Weise kann man die Schriftgröße auf Modulebene anpassen, was ziemlich einfach ist. Die Wahrscheinlichkeit, dass die Typografie innerhalb eines einzelnen Moduls gute Proportionen hat und schön zusammen skaliert werden kann, ist hoch. Das würde sich dann so auswirken

Man kann hier mit den Schiebereglern mit der Idee herumspielen

Siehe den Stift Em UND Rem von Chris Coyier (@chriscoyier) auf CodePen.

Bei einer bestimmten mittleren Größe sieht alles gut aus. Beim Hochskalieren kann man zu einem Punkt gelangen, an dem die Hauptartikel eine gute große Größe haben, aber die Seitenleisten nicht so groß sein müssen. Mit diesem System wäre es einfach, sie anzusprechen und wieder nach unten zu regeln. Beim Herunterskalieren werden diese Seitenleistenmodule zu schnell zu klein, daher könnte man sie leicht wieder nach oben regeln. Es könnte sogar Größen geben, bei denen man die Dinge angleicht, weil man zu einer einzelnen Spalte übergegangen ist (oder Ähnliches).

So würde es ablaufen

/* Document level adjustments */
html {
  font-size: 17px;
}
@media (max-width: 900px) {
  html { font-size: 15px; }
}
@media (max-width: 400px) {
  html { font-size: 13px; }
}

/* Modules will scale with document */
.header {
  font-size: 1.5rem;
}
.footer {
  font-size: 0.75rem;
}
.sidebar {
  font-size: 0.85rem;
}

/* Type will scale with modules */
h1 {
  font-size: 3em;
}
h2 {
  font-size: 2.5em;
}
h3 {
  font-size: 2em;
}

Ich habe "Idee" in den Titel gesetzt, weil ich noch keine Website so gebaut habe, aber es ergibt für mich Sinn und ich würde es auf jeden Fall ausprobieren.