Loading...
Web-Typografie
Work in Progress

Web-Typografie

Eine Einführung in die Web-Typografie, Webfonts und ihre Möglichkeiten. Dieses Kapitel geht nicht auf die Schriftästhetik oder die richtige Schriftwahl ein.

Default Fonts

Die Standard-Schriften

Von 1990 und bis ca. 2008 wurde lediglich mit ca. 15 Schriften Webdesign gemacht.

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.

1

Info

Diese reduzierte Anzahl an Schriftmöglichkeiten, liess in den Nuller-Jahren Adobe-Flash gross werden. Dort konnte man alle Schriften einsetzen und Gestalten wie man es gewohnt war.

Flash, ist aber eine Black-Box für Accessiblity, nicht konzipiert fürs responsive Design (funktioniert nicht auf dem iPhone) und zu allem Leid auch noch Sicherheitstechnisch inakzeptabel. Darum wurde Flash aus dem Internet verbannt.

Webfonts

Die Nutzung von

Um Schriften darstellen zu können, muss der Zeichensatz verfügbar sein.

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 Typekit einbinden.
  2. WOFF, OTF oder TTF Fonts auf einen eigenen Server laden und in der Webseite einbinden.

Unterschied der beiden Varianten

Nicht alle Schriften sind in Google Fonts oder Typekit vorhanden. Die Schriftaufwahl ist dadurch weniger individuell, da diese Font-Server für Millionen andere Webseiten genutzt werden.

Aber Google-Fonts bieten einen sicheren Wert, wenn man als Entwickler*in ohne Font-Kenntnisse oder typografischem Flair eine Webseitenschrift auswählt.

WOFF, OTF oder TTF Files selber einbinden ist 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 Typekit die Fonts direkt einzubinden, aber nicht alle ermöglichen eigene Schriften hochzuladen.

Variable Fonts

WOFF 2

Variable Schriften enthalten in einem Font-File die Informationen zur ganzen Schriftfamilie.

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.

Eine saubere Web-Typografie baut auf einer dualen und modularen Schriftlogik auf.

Die Textstruktur

HTML-TAgs und Design-Abgrenzung

Die Texthierarchie im HTML ist ein essenzielles Bindeglied zwischen Designer, Programmierer, Accessilibity und der Suchmaschinen Optimierung (SEO).

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

Modulares Schriftsystem

Was machen wir mit dieser Logik?

Als Gestalter*in muss man die visuelle Schrift-Logik definieren und eine Brücke zwischen der visuellen und technischen Sicht schlagen.

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.

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

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

Diese Modularität ist wichtig zu begreifen.

5

Terminologien

Es gibt verschiedene Ansätze. Design Programme respektive die Design-Spezifikation braucht noch die Viewport-Äquivalente. Meist mit den Endungen Mobile, Desktop, Tablet. z. B. Titel-1-Mobile.

Titel-1 bis Titel-6 und Lauftext

Eine ziemlich einfache Referenz zum HTML, aber nicht identisch. Alphabetische Grössenordnung (sinnvoll für Design-Programme)

Font-XXL bis Font-XXS

Wie T-Shirtgrössen. Verständlich, aber nicht Alphabetisch und irgendwann nicht mehr ausbaubar. XXXXXXXL (nope).

Elefant, Zebra, Maus

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

Font-100--Regular bis Font-700--Bold

Ein Namensystem, welches auf der Basis 100 aufbaut. Alphabetisch.

Standard Schriftstile

Standard Styling

Die Standard-Schrift der meisten Browser ist Times New Roman in 16 Pixel. Doch auch die Title-Tags im HTML haben ein Grund-Styling.

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.

Schriftgestaltung im Web

R/EM Fonts

SChriften in Proportion

Die Einheiten EM oder REM (Root EM) gehen von einem Standardwert der Schriftgrösse des Elementes aus. Dieser Wert ist dann 1 em/rem

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 sind 16px.

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.

Modular Scale

Fluid Typography

Die Schriftproportionen verändern ihr Verhältnis zueinander, wenn das Device kleiner wird.

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.

Diagramm das den Unterschied zwischen Desktop Schriftgrössen-Verhältnisse zueinander und Mobile Schriftgrössen-Verhältnisse zueinander aufzeigt.
© Webdesign Essentials
Diagramm das den Unterschied zwischen Desktop Schriftgrössen-Verhältnisse zueinander und Mobile Schriftgrössen-Verhältnisse zueinander aufzeigt.
6

Die Abflachung der Proportion

Mit grossen Schriften auf kleinen Devices läuft man schnell in das Problem, dass der Text über den vorgesehenen Platz hinaus geht (Text-Overflow). Besonders gut bei deutschen Nomen zu beobachten.

Tools

Modular Scale

Gridlover

Font-Ratio oder die Adaptive Modular Scale.

Bei den meisten Webseiten wird die Schriftgrösse mittels Media Queries dynamisch auf den jeweiligen Viewport angepasst. Dies wird manuell definiert. Doch man könnte dies auch berechnen und in ein zusammenhängendes und dynamisches Schriftsystem umwandeln.

Adaptive Modular Scale

Florian Schulz hat bereits viel Effort geleistet, dieses Problem zu lösen. Sein Blogbeitrag ist sehr zu empfehlen. Designing with Intent.

Dabei werden die extremsten Grössen definiert und per mathematischen Formel die Grössen dazwischen interpoliert.

Fluid Typography

Ein How-To Anleitung zeigt auch Mike Riethmüller in seinem Artikel über responsive und Fluid Typography

CSS Calc statt Media-Queries

Mit CSS kann man auch einfache Schriftberechnungen machen. z.B. wenn man von der Basisschrift ausgehend dynamisch mit der Viewportbreite die Titelschrift grösser werden lassen möchte, kann man dies relativ einfach machen.

z. B.: font-size: calc(1em + 2vw);

Richtig berechnet, braucht es dann keine Media Queries mehr.

Typografie Optionen

Die Typografie Basis

In der Web-Typografie kann man nur gesamthafte Regeln einstellen und keine punktuelle Mikrotypografie.

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

Auflistung von Optionen für die Schriftgestaltung.
© Webdesign Essentials
Auflistung von Optionen für die Schriftgestaltung.
7

Links

CSS Text Optionen - W3Schools.com

CH-Wert

Die Perfekte Zeilenlänge

Der relative Wert ch ist ideal um die Zeilenlänge zu definieren. Dabei misst er die Breite des Null (0) und nimmt sie als Referenz.

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

Aber gut, wenn man dies so klar automatisieren kann.

Line-Height

Zeilenabstand

Der perfekte Zeilenabstand ist keine einfache Aufgabe im Web.

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, dass dadurch aber entsteht ist der Versatz zwischen allen Zeilenabständen zueinander, da so ein Zeilenabstand sich pro Schriftgrösse definiert. Doch auch dafür gibt es Lösungen.

Typografie Restriktionen

Dont's

Mikrotypografie sowie punktuelle Adaptionen sind nicht möglich.

Viele der essenziellen Einstellungen des InDesigns 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.

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.

Auflistung von Schriftgestaltungs-Optionen die nicht gehen. (Kerning, Flattersatzausgleich, Umbruchoptionen, Text-Abstände, Tabulatoren)
© Webdesign Essentials
Auflistung von Schriftgestaltungs-Optionen die nicht gehen. (Kerning, Flattersatzausgleich, Umbruchoptionen, Text-Abstände, Tabulatoren)
8

Die Silbentrennungsproblematik

Hyphens & Soft Hyphens

Typografie für eine Formatlose Gestaltung gepaart mit langen Wörtern ist keine leichte Aufgabe. Als Gestalter*in ist es jedoch unsere Verantwortung.

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, sollte dies 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, ist aber nicht immer gewünscht.

GIF-Animation mit dem Wort Silbentrennungsproblematik. Browserfenster geht langsam zu und zeigt vier Optionen, wie sich die Schrift umbrechen kann.
© Webdesign Essentials
GIF-Animation mit dem Wort Silbentrennungsproblematik. Browserfenster geht langsam zu und zeigt vier Optionen, wie sich die Schrift umbrechen kann.

Responsive Typografie wird immer besser. Warten wir auf CSS4. Not.

Weil CSS4 wird es nicht geben. Zudem. Diese Zusammenstellung zeigt nur ein Bruchteil der Typografie Optionen fürs Web an.

Design Fundamentals

Eine Reise durch eine sich stetig veränderbare Welt. Unzählige Hürden gilt es zu meistern. Die stetigen Veränderungen betreffen nicht nur die technischen Voraussetzungen, sondern der allgemeine Umgang mit Inhalt und Inhaltskuration. Die Veränderung als Ausgangslage für die Gestaltung ist eine komplexe Angelegenheit. Tauchen wir ein.

Scroll Snap
On
Off