CSS Coding: typoScale AéM 1.0

Automatisches Schrift-Skalierungssytem für Webseiten

In diesem Artikel stelle ich euch ein CSS-Berechnungssystem vor, dass es euch ermöglicht, ohne den Einsatz von @media queries die Schriftgrößen auf einer Website kontinuierlich und vollautomatisch der Bildschirmauflösung anzupassen, also über alle Ausgabegeräte hinweg vom Smartphone über das Tablet zum Laptop zum PC-Monitor bis zum 5K-Bildschirm. Das Ergebnis ist ein Font-Skalierungssystem im Responsive Webdesign, aber ohne Verwendung von @media Anweisungen.

Und so sieht das fertige System aus: LINK
Spielt ein bisschen mit der Größe des Browserfensters, um zu sehen, wie sich die Schriftgrößen verhalten.

Vorbemerkung:

Dieses System basiert auf dem Artikel „100% Responsive Typography System using a Modular Scale“ von Ricardo Zea. Während das von Zea entwickelte System als Designbasis auf die eher sanfte „Modulare Skalierung“ setzt, verfolgt dieses System eher den progressiven Ansatz, bei dem durch Hebelwirkung die Schriftgrößen auf größeren Monitoren stärker steigen. Ein weiterer großer Unterschied ist, dass alle Schriftgrößen durch Min-/Max-Werte begrenzt werden. Während Zeas System eine feste Seitenbreite von 1140 px zugrunde legt, soll dieses System mit Full Page Designs harmonieren und auch nicht versagen, wenn hochauflösende 4K oder Ultrawide Monitore jenseits von 2560 px Breite zum Einsatz kommen.

An wen sich dieser Artikel richtet:

An alle Webdesigner und Webentwickler, die sich für neue Ansätze interessieren, die Schriftdarstellung auf den Ausgabegeräten zu optimieren und den Code dafür wesentlich schlanker zu halten. Die zum Einsatz kommenden CSS Anweisungen werden ausführlich erklärt. Es wird jedoch grundsätzliches Basiswissen in CSS vorausgesetzt. Aber keine Sorge – alles ganz easy auf niedrigem Niveau. Ich selbst bin Designer und kein Coder. Ich setze für diesen Artikel aber voraus, dass du weißt, was bspw. @media queries sind oder wie sich generell Schriften per CSS formatieren lassen (font-size, line-height, etc.). Diese sowie alle anderen Standrad CSS-Anweisungen werden hier nicht gesondert erläutert. Und auch wie du ein CSS Style Sheet einbindest wird hier nicht thematisiert. Warum auch – selfhtml.org, mozilla.org oder w3schools.com sowie viele, viele andere haben dies längst getan.

Der Standard: @media queries

Die unterschiede der Bildschirmgrößen werden immer krasser. Von einem veralteten iPhone mit 380 px Bildschirmbreite bis zu einem modernen Gamer Ultrawide Screen mit mehr als 3800 px Breite oder einem iMac mit 5K Retina Display soll der moderne Webauftritt möglichst immer bestmöglich in Erscheinung treten.

Seit es Responsives Webdesign gibt, bei dem sich also die Elemente auf einer Webseite stets auf die Bildschirmgröße und den Erfordernissen des Ausgabegeräts anpassen, wird dies technisch durch den Einsatz von CSS @media Anweisungen umgesetzt.

Das Problem dabei ist, dass diese Anpassung nur in wenigen groben Schritten durchgeführt wird. Im einfachsten Fall geschieht dies in den 3 Einteilungen Smartphone, Tablet, PC. Bei etwas hochwertigeren Umsetzungen wird „PC“ noch in „Laptop“ und „PC“ eingeteilt und Premiumumsetzungen haben auch schon einmal an die 6 Einteilungen. Dann hört es aber idR auf, denn jede weitere Größenanweisung ist mit viel Aufwand verbunden.

Die Lösung

Das „Automatische Font Skalierungssytem“ berechnet in Echtzeit die optimale Schriftgröße für alle definierten Schriftstile auf Basis der Bildschirmauflösung bzw. vielmehr der Größe des aktuell genutzten Browserfensters. Die Vorteile:

• Stufenlose Schriftgrößen-Berechnung
• @media queries für Schriftgrößen nicht mehr erforderlich
• Kompakte und zentrale Steuerung an wenigen Stellschrauben im CSS Style Sheet
• Weniger Code

Technischer Aufbau und CSS Logik

Basis Schriftgröße

Und so funktioniert das Prinzip des „Automatischen Font Skalierungssystems“. Zu allererst wird eine Basis Schriftgröße im body des CSS Style Sheets definiert:

body {
font-size: 12px;
}

Diese ist mit 12 px bewusst zu klein gehalten, denn dieser statische Wert wird nun in einen dynamischen Wert, abhängig zur Größe des Browserfensters, umgewandelt:

body {
font-size: calc(12px + 0.4vw;
}

Der Befehl calc erlaubt eine Berechnung innerhalb seiner Klammern auszuführen. vw steht für view width, wobei 100vw für die volle Breite (100%) des Browserfensters steht, 1vw somit für 1%. Dem Basiswert von 12px wird also 0,4/100 Fensterbreite hinzugefügt. Bei einem Full HD Monitor, auf dem das Browserfenster voll geöffnet ist, wäre die Schrift nun 12+0,4/100*1920 = 19,68px groß. Auf einem Smartphone mit 480px Breite (im Hochformat) wäre die Schrift 13,92px groß.

Diese dynamische Schriftgrößenberechnung erweitern wir nun um Maximal- und Minimalwerte. Dazu gibt es die Anweisung clamp. Sie besteht aus 3 Werten, die innerhalb der Klammer durch Komma getrennt werden: Minimalwert, Sollwert, Maximalwert.

body {
clamp(16px, calc(12px + 0.4vw), 19px);
}

Mit dieser Anweisung wird die Schrift nun also dynamisch der Fenstergröße angepasst. Die Schrift wird jedoch niemals kleiner als 16px und niemals größer als 19px. Aslo auch bei einem 5K Retina Bildschirm mit 5.120 x 2.880 px mit einer Pixeldichte von 1:2 (wie sie bspw. ein iMac 5K aufweist), wodurch die Ausgabe mit immerhin noch 2.560 x 1.440 px erfolgt, bliebe die Schriftgröße bei 19px. Dies ist unter anderem auch deshalb sinnvoll, weil selbst eine auf volle Breite konzipierte Website sich nicht endlos ausdehnen sollte. Nach aktuellem Stand der Technik sollte sie also spätestens bei 2.560 px stoppen.

Unsere Basisschrift ist nun festgelegt und kann nach Designbedarf nun mit weiteren Attributen wie font-family, font-weight, line-height, etc. formatiert werden. Die line-height sollte dabei als reiner Faktor angelegt werden. Sie berechnet sich aus der Schriftgröße (font-size) und ist somit ebenfalls dynamisch.

body {
clamp(16px, calc(12px + 0.4vw), 19px);
line-height: 1.5;
}

Headlines H1-H6 und andere

Alle weiteren Schriften der Website werden nun in Abhängigkeit zu dieser Basisschrift formatiert. Sie haben also ein Größenverhältnis zu dieser. Hierfür eignet sich die Anweisung em. Soll bspw. eine H2 dreimal so groß wie die Basisschrift sein, so definieren wir sie einfach mit font-size: 3em. Da die Basisschrift bereits dynamisch definiert ist, wird sich also auch diese H2 dynamisch verändern.

h2 {
font-size: 3em;
}

Aufgrund des Dynamikumfangs der Basisschrift von 16px bis 19px würde die H2 sich nun also zwischen 48 und 57 px bewegen. Während der Bereich von 16-19px für den Fließtext aber völlig ausreichend ist, ist dies für eine große Headline einfach zu wenig. Egal welchen em-Wert wir für die H2 wählen, sie wird entweder auf dem Smartphone nicht klein genug sein oder auf dem PC nicht groß genug. Zumindest nicht, wenn wir uns ein progressives Webdesign wünschen, auf dem Headlines so richtig schön ins Auge fallen. Warum ist das so? Ein kleiner Exkurs zwischendurch:

Progressivharmonische Headlines
Das ist zugegebenermaßen eine eigene, nicht ganz ernstgemeinte Wortschöpfung. Ich erkläre mal, was ich damit meine: Eine H4, H5 oder H6 ist idR. nicht viel größer als der Fließtext. Manchmal nur fetter oder in einer Schmuckfarbe. Die H1 oder H2 könnten sich zwar prinzipiell auch durch andere Eigenschaften ihren Platz in der Hierarchie der Überschriften sichern als nur durch die Größe, aber wenn eine H1 oder H2 auf der Website richtig fett Platz bekommt, macht das schon was her. Ergo hätten wir es hier also mit einem Design zu tun, bei dem auf großen Monitoren die H1 und H2, vielleicht noch die H3, so richtig groß daherkommen, während die H4-H6 sich schon in Richtung der Schriftgröße des Fließtextes bewegen. Ganz anders aber – und jetzt kommt’s – verhält es sich auf dem Screen des kleinen Smartphones. Hier ist zwar die H1 weiterhin die größte und die H6 die kleinste Schrift, aber ihre Unterschiede zueinander sind hier längst nicht so ausgeprägt, denn zu große Überschriften würden den Rahmen des kleinen Screens sprengen und lange Wörter würden zum Problem werden.

Deshalb sind in diesem Skalierungssystem die Berechnungen so ausgelegt, dass große Überschriften mit zunehmender Bildschirmgröße stärker wachsen, während die kleineren dies weitaus weniger tun. Oder anders ausgedrückt: Die Schriftgrößenunterschiede sind auf dem Smartphone weniger stark ausgeprägt als auf dem 27 Zöller. Exkurs Ende.

Weiter geht’s: Wir möchten also, dass sich die H2 (und auch die anderen Überschriften) im Verhältnis zur Bildschirmauflösung exponentiell vergrößert. Dazu erhöhen wir die Dynamik der H2 mit bewehrten Mitteln:

h2 {
font-size: calc(1.9em + 1vw);
}

Während sich die H2 mit dem reinen em-Faktor zwischen 30,4px (480px Screen bzw. 16px min. Basisschrift) und 36,1px (1920px Screen bzw. 19px max. Basisschrift) bewegen würde kommt sie durch den zusätzlichen Faktor 1vw auf 35,2px bis 55,3px

30 – 36 px (nur mit em)
35 – 55 px (mit em + vw)

Nun machen wir mit der H2 noch das, was wir bereits mit der Basisschrift getan hatten: Wir zwängen Sie in ein Korsett und sagen ihr wie klein sie minimal oder wie groß sie maximal werden darf:

h2 {
font-size: clamp(38px, calc(1.9em + 1vw), 58px);
}

Nun wird diese Berechnung für alle anderen Schriften durchgeführt. Wirklich Abreit ist dies aber nur für die exponentiell großen Überschriften (in diesem Fall also H1-H3 und evtl. noch H4) Für kleinere Schriften wie H4-H6 sowie weitere definierte Schriftstile reicht es aus, einen reinen em-Wert einzusetzen.

In meinem Design kommt nun nachfolgendes Szenario zum Einsatz. Welche Werte sich hier letztlich eignen, hängt natürlich vom gewünschten Design, der eingesetzten Schriften und deren weiterer Formatierungen ab. Welche Werte hier für em und vw genommen werden und in welchem Verhältnis zueinander, erfordert gerade bei den großen Schriften zugegebenermaßen viel Fingerspitzengefühl.

h1 {font-size: clamp(47px, calc(2.5em + 1vw), 70px);}
h2 {font-size: clamp(38px, calc(1.9em + 1vw), 58px);}
h3 {font-size: clamp(26px, calc(1.3em + 1.2vw), 50px);}
h4 {font-size: clamp(22px, calc(1.3em + 0.7vw), 40px)}
h5 {font-size: 1.1em;}
h6 {font-size: 1.1em;}
h1, h2, h3, h4, h5, h6 {line-height: 1.2;}

Font Auswahl und Formatierung

Wann welche Werte zu einer harmonischen Reihe werden hängt natürlich maßgeblich von der eingesetzten Schrift und ihren Formatierungen ab. Welche Schrift zum Einsatz kommen soll, würde für ein Designkonzept also eigentlich als erster Schritt festgelgt werden. Die Formatierungen von p und h1-h6 finden hingegen parallel zum Skalierungssystem statt.

Variable Fonts

Wenn man sich schon so eines innovativen Skalierungssystems bedient, was läge da nicht näher, als sich passend dazu auch gleich moderner Font-Technik zu bedienen und die neuen Variablen Schriften einzusetzen. Wer’s nicht kennt: Das sind Schriften, die in einer einzigen Datei alle Schriftschnitte beherbergen, von der Schriftstärke, font-weight, dünn bis fett über die Schriftbreite, font-stretch, condensed bis extra-wide, bis zur Schriftlage, font-style, normal oder kursiv. Das wirklich neue und geniale daran ist aber, dass viele der Einstellungen bei einer guten variablen Schrift stufenlos eingestellt werden können! Statt einer Strichstärke font-weight: 100 oder 600 geht nun auch 122 oder 599. Klingelt was? Ja, das passt perfekt zu unserem Skalierungssystem, denn es ist genau wie dieses: stufenlos!

Ein Font, der dies bereits vorzüglich beherrscht ist die freie Schrift Merriweather, die somit zum Einsatz kommt und ins System eingebunden wird:

@font-face {
font-family: "MerriweatherSans";
font-weight: 300 800; /* Without this specifications no safe output in Blink browsers */
src: url("./fonts/MerriweatherSans-VariableFontwght.ttf");
}

In diesem Fall also bei Google Fonts heruntergeladen und in das Verzeichnis /fonts gepackt.

Schriftformatierung

Für mein Designkonzept sollen zwei große, aber schlanke Überschriften zum Einsatz kommen, H1 und H2, zwei kleinere, die dafür aber fetter sind, H3 und H4 sowie zwei kleine Auszeichnungs-Überschriften in gleicher Größe aber unterschiedlichen Schriftschnitten, die nur aus Versalien bestehen, H5 und H6. Für mein Beispieldesign kommen somit folgende Werte zum Einstatz (die Merriweather hat einen font-weight von 300 bis 800):

/* font: weight */
h1 {font-weight: 300;}
h2 {font-weight: 350;}
h3, h4 {font-weight: 400;}
h5 {font-weight: 550; font-stretch: 55%; letter-spacing: 0.1em;}
h6 {font-weight: 300; letter-spacing: 0.1em;}
/* font: transform */
h5, h6 {text-transform: uppercase;}
/* font: margin */
h1, h2, h3, h4, h5, h6 {margin: 0.5em 0;}

Kompletter Code

Das „Automatische Schriften-Skalierungssystem“ ist damit fertiggestellt. Das System lässt sich genau so auf jede Website anwenden. Je nach Designkonzept reicht es aus, nur die Werte der Basis-Schrift zu ändern:

body {
clamp(16px, calc(12px + 0.4vw), 19px);
}

oder je nach Vorlieben an den Stellschrauben der Headlines zu drehen:

h1 {font-size: clamp(47px, calc(2.5em + 1vw), 70px);}
…
…
h6 {font-size: 1.1em;}
h1, h2, h3, h4, h5, h6 {line-height: 1.2;}

Letzteres benötigt sicherlich etwas Erfahrung und Fingerspitzengefühl. Kommt ein Design zum Tragen, für das keine besonders großen Überschriften zur Anwendung kommen sollen, lässt sich jederzeit auf die Hebelwirkung vw verzichten und auch die clamp() Beschneidungen könnten dann entfallen:

h1 {font-size: 2.5em;}
…
…
h6 {font-size: 1.1em;}
h1, h2, h3, h4, h5, h6 {line-height: 1.2;}

Und dies wäre der vollständige CSS-Code:

/* ***************
Automatic TypoScale AéM 1.0
Continuous typography scaling system calculation under abandonment of @media queries.
This system is based on the "100% Responsive Typography System using a Modular Scale" by Ricardo Zea: https://www.codementor.io/@ricardozea/100-responsive-typography-system-using-a-modular-scale-s5rhft58g?ref=webdesignernews.com

This system uses greater font size leverage for more progressive font design. The modification/extension is also for better usability with full page designs on high resolution screens (2,560 px and more). It uses the css clamp() calculation to restrict the minimum and maximum values of all font sizes.
*************** */

body {
  	margin:0;
  	padding:0;
  	background-color: black;
	color: white;
	background-image: url("abstract01a-pc.webp"); /* webp not supported by safari < big sur */
	background-size: auto;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment:fixed;
	font-family: MerriweatherSans, Arial, sans-serif;
	font-weight: 300;
  	font-size: clamp(16px, calc(12px + 0.4vw), 19px); /* Responsive base font size with min and max values */
  	line-height: 1.5;
}

@font-face {
	font-family: "MerriweatherSans";
	font-weight: 300 800; /* Without this specifications no safe output in Blink browsers */
	src: url("./fonts/MerriweatherSans-VariableFont_wght.ttf");
}

/* *************** font: weight */

h1 {font-weight: 300;}
h2 {font-weight: 350;}
h3, h4 {font-weight: 400;}
h5 {font-weight: 550; font-stretch: 55%; letter-spacing: 0.1em;}
h6 {font-weight: 300; letter-spacing: 0.1em;}


/* *************** font: transform */

h5, h6 { text-transform: uppercase; }

/* *************** font: margin */

h1, h2, h3, h4, h5, h6 {
	margin: 0.5em 0;
}

/* *************** font: size */

h1 {
	font-size: clamp(47px, calc(2.5em + 1vw), 70px); /* 47-67 if base 16-19 */
    line-height: 1.2;
}

h2 {
      font-size: clamp(38px, calc(1.9em + 1vw), 58px); /* 38-55 if base 16-19 */
      line-height: 1.2;
}

h3 {
    font-size: clamp(26px, calc(1.3em + 1.2vw), 50px); /* 26-48 if base 16-19 */
    line-height: 1.2;
}

h4 { font-size: clamp(22px, calc(1.3em + 0.7vw), 40px)} /* 20,8-24,8 if base 16-19 */
h5 { font-size: 1.1em;} /* 17,6-20,9 if base 16-19 */
h6 { font-size: 1.1em;} /* 17,6-20,9 if base 16-19 */

h4, h5, h6 {line-height: 1.2;}

.spacer {margin: clamp(30px, 3vw, 60px);}

/* Divider Dotted border */
hr.dotted {
	border: 0px;
	border-top: 2px dotted #ccc;
  	margin: 7px 0px 40px 0px;}

.textbox {
  position: relative;
  top: 25vh;
  left: 2%;
  width: 80%;
  padding: 40px;
  background: rgba(0,0,0,.6);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0,0,0,.6);
  border-radius: 10px;
  margin-bottom: 45vh;
  backdrop-filter: blur(20px);
}

.text2col {
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
} /* not in use */

.grid2col {
	display: grid;
    grid-template-columns: 40% 60%;
    grid-column-gap: 20px;
}

a:link {color: red;}
a:visited {color: Chartreuse;}
a:hover {color: hotpink;}
a:active {color: blue;}

@media only screen and (max-width: 1024px) {
  body {
    background-color: lightblue;
    background-size: cover;
    background-image: url("abstract01a-mob.webp");
  }
  .textbox {
  position: relative;
  top: 17vh;
  margin-bottom: 45vh;
  left: 0%;
  width: 100%;
  padding: 15px;
  transform: translate(-0%, 0%);
  background: rgba(0,0,0,.6);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0,0,0,.6);
  border-radius: 0px;
  backdrop-filter: blur(10px); /* not supported by FF86 */
}
  .grid2col {
	display: grid;
    grid-template-columns: 100%;
    grid-column-gap: 20px;
}
}

@media (hover:none) {
body {
color: lightblue;}} /* does not work with FF86.1.1 Android */

Zertig! Äh … fertig.

Und so sieht das fertige System aus: LINK

Der komplette Code der Beispielseite kann hier heruntergeladen werden. Es ist frei nutzbar. Als kleine Bezahlung erwarte ich lediglich einen kurzen Kommentar hier unter dem Artikel und gerne auch einen Link, wenn der Code auf einem Internetauftritt zur Anwendung gekommen ist!

CSS & HTML: DOWNLOAD