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

Ab 1990 bis 2008 wurde mit ca. 15 Schriftschnitten Webdesign gemacht.

Diese Schriften sind auf allen Computer vorinstalliert und können immer geladen werden. Sie sind noch immer die Fall-Back Schriften, wenn die gewählte Schrift nicht geladen werden kann.

Default

Im CSS wird bei der Deklaration einer Schrift, noch zusätzlich die passende Default-Font hinzugefügt.

p {

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

}

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

1

Webfonts

Die Nutzung von

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

Auf dem Computer installieren wir spezifisch Schriften, via Font-Library 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. OTF oder TTF Fonts auf den Server eines Site-Builder oder Hosting laden und in der Webseite einbinden.

© Typothek Intro
Vor- und Nachteile der beiden Varianten

Nicht alle Schriften sind in Google Fonts oder Typekit vorhanden. Die Auswahl wird daher auf den einen oder anderen Service beschränkt.

Es ist umständlicher, wenn man Google Fonts sowie Typekit Fonts einbinden muss.

OTF oder TTF Files selber einbinden ist etwas umständlicher, aber man hat dafür die ganze Palette moderner Schriften.

Viele Site-Builder ermöglichen es via Google Fonts oder Typekit die Fonts direkt einzubinden, aber nicht alle ermöglichen eigene Schriften hochzuladen.

Textstruktur

HTML-TAgs

Wichtig ist der klare Aufbau der Schriftstruktur. Es sind definierte: HTML-Tags, welche eine klare Inhaltshierarchie definieren.

Es sind die InDesign «Absatzformate».

H1-H6 sind die Titelformate

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

Die Hierarchie der HTML-Titelformate auf jeder Webseite ist extrem relevant. z. B. Der H1 ist der wichtigste Titel der Seite und darf nur einmal pro Section vorkommen.

Meistens ist es sinnvoll die CSS-Klassen ähnlich zu den HTML-Tags zu stylen. Also h1 bis h6 mit den CSS-Klassen titel-1 bis titel-6. So orientiert sich die Schriftproportion an der Inhaltshierarchie, ohne aber sie gleichzusetzen. Andere Titel-Terminologien sind aber ebenfalls gang und gäbe.

Denn die HTML Title-Tags direkt zu stylen kann mühsame Vererbungsprobleme nach sich ziehen.

Zudem ist es nicht immer erwünscht, dass der HTML-Tag mit der CSS-Klasse übereinstimmt.

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

Die HTML Tags und ihre Übersetzung. von H1-H6 und P
© Webdesign Essentials
Die HTML Tags und ihre Übersetzung. von H1-H6 und P

Schriftgrössen

Gross oder Klein?

Schriftgrössen unter 11 px sind eigentlich unlesbar. Klassischer Lauftext wird zwischen 16 px - 20 px gesetzt.

Für die Lesbarkeit sind klare Grössenunterschiede pro Schriftwahl günstig.

Die Web-Standard Schriftgrösse ist 16px.

Im Web wird die Schriftgrösse in Pixel (px) oder in proportionalen Verhältnissen definiert (em, rem oder Prozent). Die Einheit Point (pt.) wird auch verwendet, aber die Umwandlung von pt. zu Pixel mühsam ist und EM oder REM haben aus ihrer Basis heraus ebenfalls einen Pixelwert.

Viermal die gleiche Schriftgrösse in vier Grössenarten. 1em, 12pt., 16px, und 100 %.
© Kyle Schaeffer
Viermal die gleiche Schriftgrösse in vier Grössenarten. 1em, 12pt., 16px, und 100 %.
4

Link

Fontsize Converter

Fontface Ninja Browser Extension um Schriften von anderen Webseiten abzulesen.

Font Size Differences explained by Kyle Schaeffer

R/EM Fonts

SChriften in Proportion

Die Einheiten EM oder REM (Root EM) gehen von einem Standardwert einer Schriftgrösse aus. Dieser Wert ist dann 1EM/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 (Default 16px) als Standard-Wert und somit kann sein Wert nicht vererbt werden. 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 (z.B. bei Media Queries) um, verändern sich die Grössen proportional zur Basis mit.

© Webflow
5

Links

Visual Scale Rasch Schriftverhältnisse ausprobieren.

REM vs EM explained

Modern Scale Web Typography

Modular Scale

Fluid Typography

Die Schriftproportionen verändern ihr Verhältnis zueinander, wenn der 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 grösser. So kann es durchaus sein, das 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 grosse 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

Mehr zu Modular Scale

Bei den meisten Lösungen, wird die Schriftgrösse mittels Media Queries dynamisch gelöst, aber dies geschieht manuell.

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 Extremgrö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

Um der Komplexität der Schriftgestaltung schneller gerecht zu werden, müssten sich die Fonts besser zusammenfassen lassen.

Ein Verhältnis basiertes Font-System.

Ein Verhältnis basiertes Font-System, dass Schriften immer als Gruppe in all seinen Titel- und Textausprägungen zusammenfasst, wenn man von den HTML-Tags ausgeht und man P aus mit einem Wert alle Schriftgrössen definiert. Der Wert wäre das Verhältnis der Veränderung Font-ratio. In Prozent oder als Zuwachs einer Pixelgrösse usw.

Da sich die Schriftgrösse von einer Basis aus mit einem Faktor verändert kann so pro Media Queries nur den Faktor geändert werden und es müssen nicht alle Schriftschnitte neu angepasst werden.

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

Typografie Restriktionen

Don'ts

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

Soft-Hyphens können manuell in HTML Texte eingefügt werden, um lange Wörter zum Umbrechen zu zwingen.

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

Das Soft-Hyphen ­ oder ­ kann gut in reine HTML Texte eingesetzt werden. Da dies manuell geschehen muss, 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 code) eingestellt sein, damit die Spracherkennung des Browsers, die Wörter sauber umbricht. Dies funktioniert relativ gut, ist aber nicht immer gewünscht.

In CSS4 verspricht man sich noch eine bessere Option.

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