Web-Typografie

Es sind die Systemschriften, welche auf allen Computern (Mac & PC) vorinstalliert und daher immer geladen werden konnten. 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.

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

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

Doch dies ist nun Geschichte und wir können jegliche Fonts im Web nutzen.

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

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

1. Fonts via Google Fonts, Typothek, Adobe Fonts oder einem anderen Font-Server einbinden.
2. WOFF, OTF oder TTF Fonts auf den eigenen Server laden und in der Webseite einbinden.

‍

Der Unterschied

Font-Server

Nicht alle Schriften sind in Google Fonts oder Adobe Fonts vorhanden. Die Schriftauswahl ist dadurch weniger individuell, da diese Font-Server für Millionen andere Webseiten genutzt werden. Zudem ist unklar, was genau diese Font-Server alles für Informationen aus dem Schrift-Einsatz speichern.

Self-Hosting

WOFF, OTF oder TTF Files selbst einbinden ist für Nicht-Entwickler:innen etwas umständlicher, aber man hat dafür die ganze Palette moderner Schriften zur Auswahl. Viele Site-Builder ermöglichen es via Google Fonts oder Adobe Fonts direkt einzubinden, aber nicht alle ermöglichen eigene Schriften hochzuladen.

‍

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

Moderne Variable Fonts ermöglichen gezielt den Schriftaufbau (Die Schrift-Anatomie) zu steuern und dadurch zu verändern. Sei es die x-Höhe, die Länge der Serifen, Breite, der Slant oder was auch immer. Noch sind viele dieser Anwendungen eher  spielerisch, aber sie bieten viel Potenzial.

Das WOFF2 Format (Web Open Font Format 2.0) ermöglicht den Einsatz von Variable Fonts.

‍

Dieses Basis-Styling 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.

Body-Font

Die Body-Font ist 1em oder eben 16 Pixel und demnach der Parent der Titelschriften.

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 selbst 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 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.

Für die Accessibility bekommt diese Logik ein zusätzliches Gewicht. Stellt man im Browser die Schriftgrösse um, ändern die Schriften relativ dazu.

Wichtig ist der klare und hierarchische 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 die Titelgrössen klar voneinander abgrenzen. In der Regel sind die grossen Schriftschnitte für wichtige Titel und kleinere Schriftschnitte für Untertitel, Labels, Lauftext etc. gedacht.

Technische Perspektive

Die HTML-Tags definieren eine klare Inhaltshierarchie. Sie bilden das strukturelle Fundament einer Webseite.

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

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

Es sind wie die vordefinierten «WORD-Absatzformate». Sie werden genutzt, damit Suchmaschinen, Screenreader und andere Bots den HTML-Text richtig lesen und interpretieren.

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

Doch wie müssen Designer:innen nun die Schrift-Logik definieren?

Die HTML-Tags strukturieren den Text, mit dem CSS wird das Styling appliziert. Es ist essenziell, dass wir diese Trennung beibehalten und mit CSS-Klassen arbeiten, statt zu versuchen, diese HTML-Struktur auf Design-Ebene zu definieren.

Semantik

Die Semantik des HTML-5 sieht vor, jede section, article etc. eine eigene Titelstruktur, sprich jedesmal ein neuer h1, h2 etc. haben kann. Visuell fallen diese Titel unterschiedlich aus.

Der klassische HTML-Aufbau (non-sematisch) verfolgt hingegen eine stringente Titel-Hierarchie über die ganze Webseite.

Weisst du, wie deine Seite programmiert wird?

Benutzer, Marketing, Google und Screen-Reader

Diverse Ansichten aufs Gleiche erzwingen unterschiedliche Gewichtungen zwischen semantischer und visueller Hierarchie. Je nach Perspektive driftet die visuelle sowie semantische Meinung über die Schriftgrösse auseinander.
z.B.: Haben viele Unternehmens-Startseiten ihr Werbeslogan als grössten Titel, aber aus Suchmaschinen- und Accessibility-Sicht wäre der Firmenname passender.

Separation of Concerns

HTML ist für die Struktur einer Webseite, CSS für die Gestaltung. Nutzen wir Klassen statt HTML-Elemente zur Schriftgestaltung unterstützen wir diese Trennung der Zuständigkeiten.

Terminologie

In einem Projekt-Team ist es zudem viel einfach, wenn die visuellen Schriftschnitte einen eigenen Namen haben, so wird in Gesprächen viel spezifischer kommuniziert.

‍

Wir bleiben flexibler und stringenter, wenn wir eine eigene Schriftlogik aufbauen.

Schrifthierarchie

Es ist einfach, eine Brücke zwischen der visuellen und semantischen Struktur zu bauen. Wir benötigen mindestens 6 Titelgrössen und dem Body-Text (Lauftext) als Basisschrift. So lassen sich die passenden HTML-Tags ableiten und für alle Schrift-Optionen haben wir eine erste Antwort.
‍

Die richtige Terminologie

Es gibt verschiedene Ansätze, die Schrift-Logik zu benennen. Was sinnvoll ist, entscheidet das Projekt-Team. Dennoch gibt es bessere und schlechtere Konzepte.

Seriell

Alphabetische oder Numerische Grössenordnungen sind sinnvoll für Design-Programme (Webflow, Figma). Ihre Auflistung ist geordnet.

Ausbaubar

Das Namensset sollte logisch ausbaubar sein. Nach oben wie nach unten.

Interpretation

Die Namen sollten möglichst klar sein. Fehlinterpretationen sollte vermieden werden.

‍

Mögliche Namenstypen

Nummerierung

Titel-1 bis Titel-6. Eine ziemlich einfache Referenz zum HTML, aber nicht identisch. Alphabetisch.

Grössen

Gigantic, Huge, Medium, Tiny. Sinnvoll, aber nicht alphabetisch und unterschiedlich interpretierbar.

T-Shirt Sizes (S, M, L, XL)

Verständlich, aber nicht alphabetisch und bald einmal nicht sinnvoll ausbaubar.

Eigennamen

Elefant, Zebra, Maus. Fantasienamen, die eine Referenz zur Grösse geben. Nur für Projektinvolvierte verständlich. Nicht zwingend Alphabetisch.

Base-Font Sizing

Font-100 (Base und Body-Font), Font-600 der grösste Schriftschnitt. Alphabetisch, nicht zu nahe, aber dennoch verwandt zum HTML und zudem ausbaubar.

‍

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 ­ oder ­ 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 ­ 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.