Web-Typografie

Diese System-Schriften sind auf allen Computer (Mac & PC) vorinstalliert und können daher immer geladen werden. Sie sind noch heute die Fall-Back-Schriften, wenn die gewählte Schrift nicht geladen werden kann.

Fall-Back Schriften

Im CSS wird bei der Deklaration einer Schrift, noch zusätzlich eine passende Fall-Back System-Schrift hinzugefügt.

body {

   font-family: "Roboto", Arial, sans-serif;

}

Kann die Roboto nicht geladen werden, wird die Arial genommen oder zuletzt eine Sans-Serif.

Auf dem Computer installieren wir spezifisch Schriften, via Schriftsammlung oder einer Schriftverwaltungs-App. 

Damit auf jedem Device die genutzte Schrift der Webseite geladen wird, muss sie Online verfügbar sein. Dies kann man auf zwei Arten machen.

1. Fonts via Google Fonts, Typothek oder Adobe Fonts einbinden.
2. WOFF, OTF oder TTF Fonts auf einen eigenen Server laden und in der Webseite einbinden.

‍

Dies eröffnet uns einen neuen Umgang mit der Gestaltung, zudem kann die Geschwindigkeit einer Webseite erhöht werden, da nur eine Datei und nicht die ganze Schriftfamilie geladen wird.

Moderne Tools ermöglichen gezielt den Schriftaufbau (Schrift-Anatomie) zu steuern und dadurch zu verändern.

Noch finden viele Anwendungen eher im spielerischen Rahmen statt, aber sie bieten viel Potenzial.

Das WOFF2 Format (Web Open Font Format 2.0) ermöglicht dessen Einsatz.

‍

Wichtig ist der klare und einheitliche Aufbau eines Schriftsystems. Dabei gibt es die visuelle sowie technische Perspektive.

Visuelle Perspektive

Für ein gutes Design braucht es nicht zu viele Schriften, Schnitte und Grössen. Zudem sollten sich klar voneinander abgrenzen.

Technische Perspektive

Die HTML-Tags definieren eine klare Inhaltshierarchie. Es sind die vordefinierten «WORD-Absatzformate». Sie werden genutzt, damit Suchmaschinen, Screenreader und andere Bots den HTML Text richtig lesen und interpretieren können.

H1-H6 sind die Titelformate. H1 ist der Haupttitel.

P ist ein Absatz (Paragraph) der Grundschrift (Body-Font).

Das HTML Grundgerüst wird meist von FrontEnd-Entwickler:innen definiert und erstellt. Wir Gestalter:innen sind Zulieferer zu diesem Bausatz.

Schrifthierarchie

Wir definieren für unser Design eine klare Schrifthierarchie mit mind. 6 Titelgrössen und dem Body-Text (Lauftext) als Basisschrift.

So lassen sich die passenden HTML-Tags automatisch ableiten. Also vom Grössten zum Kleinsten Titel mit der Basisschrift als Parent.

Die Basisschrift (body-font) zu definieren ist wichtig. Es ist die eigene Fallback-Schrift für alle nicht klar spezifizierten HTML-Tags. Sie wird meist mit dem <p> Paragraph gleichgesetzt.

Es ist nicht erwünscht, dass der HTML-Tag mit der Schrifthierarchie immer übereinstimmt.

Die Benennung dieser Schrifthierarchie sollte sich daher von den HTML-Tags abgrenzen.

Diese Modularität ist wichtig zu begreifen.

‍

Dieses Grundstyling ist die Visualisierung des reinen HTMLs anhand des «User Agent Stylesheet» eines jeden Browsers.

Title-Tags

Die HTML-Title-Tags sind standardmässig Bold. (font-weight: 700;)

H1 ist der Grösste mit 2em und H6 der Kleinste Titel mit 0.67em. Die Body-Font ist 1em oder eben 16 Pixel und demnach der Parent der Titelschriften.

Doch diese Grundwerte können allesamt überschrieben werden, sie dienen nur als Fall-Back.

Aber wenn wir Gestalter:innen zu wenig klare Typografie-Spezifikationen definieren, dann werden plötzlich solche Standardwerte übernommen.

‍

EM

Der Standard-Wert des EM eines Elementes ist seine Font-Size. Zentrales Merkmal für die Wertbestimmung ist das Vererbungsprinzip. Ist die Font-Size 1em wird geschaut, was die Schriftgrösse des Parent-Elementes ist und schlussendlich die Body Font-Size oder HTML Font-Size als Basis genommen. Das wären dann 16px. Hat das Parent-Element eine andere Schriftgrösse, gilt dies als Basis (1em).

REM

Der Root-EM behält immer die HTML Font-Size (Standard 16px) als Wert und somit wird der Wert nicht vererbt. Die Font-Size des HTML/Body kann aber sehr wohl auf verschiedenen Media-Queries unterschiedlich gross sein.

EM/REM sind sinnvoll, da sie ihre Grösse proportional zu ihrer Basis verändern. Stellt man also die Basis um, verändern sich die Grössen proportional zur Basis mit.

Tipp

Für Typografie nahe Abstände eines Layouts ist es oft eine gute Wahl, mit EM/REM zu arbeiten, da sie relativ zur Schriftgrösse des Elementes sich ändern.

Auf Mobile Devices sind die Unterschiede zwischen den Absatzformaten deutlich geringer als auf grossen Bildschirmen. 

Auf Mobile Devices ist meist die Bildschirmauflösung höher. So kann es durchaus sein, dass der Lauftext grösser sein muss als im Desktop.

Diese Verhältnis-Adaption auch ein ungelöstes Problem der dynamischen EM-Systeme, da die proportionalen Werte für jeden Breakpoint neu zu definieren sind.

Denn in den bekannten CMS-Systemen ist es noch nicht möglich auf spezifischer Text- oder Buchstabenbasis die Texte zu adaptieren.

Dabei muss der Container oder das Element worin sich der Text befindet mit einer maximalen Breite von z.B. 55-70ch versehen werden. Je nach Schrift, Viewport und Anwendung ist die ideale Zeilenlänge unterschiedlich.

Der Zeilenabstand sollte nicht als Pixelwert angegeben werden, sondern relativ zur jeweiligen Schriftgrösse.

Die kann auch ohne Werteinheit geschehen. 1.25 wird analog zum EM gesetzt. EM, Prozent oder REM gehen auch. So ändert der Zeilenabstand gleichzeitig mit der Schriftgrösse. Dies ist nützlich, wenn Schriften per Media-Queries oder Berechnung ihre Grösse ändern.

Das Grundproblem, welches dadurch aber entsteht, ist der Versatz zwischen allen Zeilenabständen, da so ein Zeilenabstand sich pro Schriftgrösse definiert.

Doch auch dafür gibt es Lösungen.

Automatische Silbentrennung oder Soft-Hyphens sind im Web extrem relevant. Fixe Trennungen können nicht definiert werden, da der Inhalt responsive bleiben muss.

Das Soft-Hyphen &shy; oder &#173; kann gut in reine HTML Texte eingesetzt werden. Dies geschieht aber manuell, besonders bei deutschen Texten. Dies sollte  vom Aufwand her auf Titel beschränkt werden.

In vielen Richtext-Modulen wird das &shy; als Text interpretiert und nicht als HTML-Entity oder Unicode übersetzt.

CSS3 bietet automatische Hyphens an. Zusätzlich zum hyphens: auto; muss zudem die HTML Sprache (language-tag) eingestellt sein, damit die Spracherkennung des Browsers, die Wörter sauber umbricht. Dies funktioniert relativ gut.

Viele der essenziellen Einstellungen aus dem InDesign sind im Web noch nicht möglich.

Die automatische Silbentrennung ist zwar im Kommen, aber durch die globale Sprachvielfalt noch nicht auf dem Level, wo wir es als Gestalter:innen gerne hätten und manchmal, möchte man nicht, dass ein Wort umbricht.

Tabulatoren sucht man ebenfalls vergeblich. Verantwortlich dafür ist die responsive Gestaltung, welche noch keine gute Antwort auf die fixe Grösse von Buchstaben & Wörter und die flexible Grösse von Geräten hat.