6 Typografie und Textgestaltung

6.1 Schriftarten und Webfonts

Die Wahl der Schriftarten ist ein zentraler Aspekt des Webdesigns, da sie die Lesbarkeit, das visuelle Erscheinungsbild und die Markenidentität einer Webseite beeinflussen. CSS bietet verschiedene Möglichkeiten, Schriftarten zu definieren und externe Schriftarten (Webfonts) einzubinden. In diesem Kapitel werden die Grundlagen zu Schriftarten und die Verwendung von Webfonts im Webdesign erläutert.

6.1.1 Standardschriftarten vs. Webfonts

Standardschriftarten sind auf den meisten Betriebssystemen vorinstalliert und werden direkt im Browser angezeigt, ohne zusätzliche Dateien zu laden. Typische Standardschriftarten sind Arial, Verdana, Times New Roman und Courier New. Da sie systemunabhängig sind, laden sie schneller, jedoch ist die Auswahl begrenzt.

Webfonts hingegen werden von externen Servern geladen, was eine größere Auswahl und Flexibilität bietet. Webfonts ermöglichen die Verwendung einer breiten Palette von Schriftarten, auch solcher, die normalerweise nicht auf dem Endgerät des Benutzers installiert sind. Der Nachteil ist eine geringfügige Ladezeit, da die Schriftdatei heruntergeladen werden muss.

6.1.2 Schriftarten mit CSS definieren

CSS bietet die font-family-Eigenschaft, um die Schriftart für ein Element festzulegen. Bei der Wahl der Schriftfamilie ist es wichtig, immer eine Fallback-Liste anzugeben, die alternative Schriftarten oder -familien definiert, falls die bevorzugte Schriftart nicht verfügbar ist.

body {
    font-family: "Helvetica Neue", Arial, sans-serif;
}

In diesem Beispiel wird zuerst versucht, Helvetica Neue zu verwenden. Wenn diese nicht verfügbar ist, wird Arial gewählt, und falls auch Arial fehlt, wird auf eine allgemeine Schriftart der Familie sans-serif zurückgegriffen.

6.1.3 Einbindung von Webfonts

Webfonts können über zwei Hauptmethoden eingebunden werden: über CSS-Eigenschaften (@font-face) oder über Dienste wie Google Fonts.

6.1.3.1 Einbindung von Google Fonts

Google Fonts bietet eine breite Auswahl an kostenlosen Schriftarten, die leicht eingebunden werden können. Dazu fügt man einen Link im <head>-Bereich der HTML-Datei hinzu.

HTML:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">

CSS:

body {
    font-family: 'Roboto', sans-serif;
}

In diesem Beispiel wird die Roboto-Schriftart verwendet. Sie wird direkt von den Google-Servern geladen und im Browser angezeigt.

6.1.3.2 Verwendung von @font-face

Mit @font-face können eigene Schriftarten eingebunden werden, die lokal gehostet oder extern bezogen werden. Dabei werden verschiedene Dateiformate angegeben, um die Kompatibilität mit allen Browsern sicherzustellen:

@font-face {
    font-family: 'CustomFont';
    src: url('/fonts/CustomFont.woff2') format('woff2'),
         url('/fonts/CustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family: 'CustomFont', sans-serif;
}

In diesem Beispiel wird eine benutzerdefinierte Schriftart CustomFont eingebunden. Die Schriftdatei CustomFont.woff2 wird aus dem angegebenen Verzeichnis geladen und steht anschließend zur Nutzung bereit.

6.1.4 Font-Formate

Um eine größtmögliche Browserkompatibilität sicherzustellen, empfiehlt es sich, Schriftarten in verschiedenen Formaten bereitzustellen:

6.1.5 Eigenschaften für die Schriftgestaltung

Zusätzlich zur Schriftart bietet CSS Eigenschaften zur Anpassung von Schriftgröße, Stil und Gewicht:

Beispiel:

h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    font-style: italic;
}

In diesem Beispiel wird ein fett und kursiv gestalteter h1-Header in der Schrift Roboto definiert.

6.1.6 Optimierung der Ladezeit von Webfonts

Da Webfonts von externen Servern geladen werden, können sie die Ladezeit der Webseite beeinflussen. Einige Optimierungstechniken sind:

6.2 Variable Fonts

Variable Fonts sind eine innovative Weiterentwicklung traditioneller Schriftartenformate, die eine Vielzahl von Schriftstärken, -stilen und anderen Eigenschaften in einer einzigen Datei bündeln. Diese Flexibilität ermöglicht es, dynamisch verschiedene Variationen einer Schriftart zu nutzen, ohne für jede Variante eine separate Datei laden zu müssen. Variable Fonts tragen so zur Optimierung der Ladezeiten und zur besseren Anpassbarkeit des Designs bei.

6.2.1 Grundlagen von Variable Fonts

Bei Variable Fonts sind Schriftparameter wie Stärke (Weight), Breite (Width), Neigung (Slant) und sogar optische Größe (Optical Size) in einer Datei gespeichert. Diese Parameter können kontinuierlich angepasst werden, anstatt auf feste Werte wie bold oder italic beschränkt zu sein.

Ein Beispiel für einen Variable Font ist Roboto Flex, der alle typografischen Anpassungen von extrem schmal bis extrafett in einer einzigen Datei ermöglicht. Die Flexibilität von Variable Fonts bietet großen gestalterischen Spielraum für responsive und adaptive Designs.

6.2.2 Nutzung von Variable Fonts in CSS

Um einen Variable Font zu nutzen, muss er zuerst mit der CSS-Regel @font-face eingebunden werden. Danach können die spezifischen Eigenschaften mithilfe von CSS-Eigenschaften wie font-weight, font-stretch und font-optical-sizing angepasst werden.

6.2.2.1 Einbindung eines Variable Fonts

Zunächst wird der Variable Font definiert. In diesem Beispiel binden wir Roboto Flex ein:

@font-face {
    font-family: 'Roboto Flex';
    src: url('https://fonts.example.com/RobotoFlex.woff2') format('woff2');
    font-weight: 100 900; /* Ermöglicht die Anpassung von Gewicht zwischen 100 und 900 */
    font-stretch: 75% 125%; /* Ermöglicht die Anpassung der Breite zwischen 75% und 125% */
    font-style: normal italic; /* Unterstützt normale und kursive Neigung */
}

6.2.3 Anpassung der Variablen in CSS

Einmal eingebunden, können die verschiedenen Parameter des Variable Fonts direkt über CSS gesteuert werden:

h1 {
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 700; /* Gewicht auf 700 gesetzt */
    font-stretch: 100%; /* Breite bei 100% */
    font-style: italic; /* Kursivdarstellung */
}

6.2.3.1 Dynamische Anpassungen

Variable Fonts ermöglichen reibungslose Übergänge und Anpassungen, besonders nützlich für responsives Design oder Animationen. So lässt sich beispielsweise die Breite oder Stärke eines Fonts in Abhängigkeit von der Bildschirmbreite anpassen:

@media (max-width: 768px) {
    h1 {
        font-weight: 400; /* Dünnere Variante auf kleineren Bildschirmen */
    }
}

@media (min-width: 769px) {
    h1 {
        font-weight: 900; /* Dickere Variante auf größeren Bildschirmen */
    }
}

6.2.4 CSS-Eigenschaften für Variable Fonts

Variable Fonts unterstützen zahlreiche CSS-Eigenschaften, die ihre Anpassbarkeit weiter steigern:

6.2.5 Vorteile von Variable Fonts

  1. Reduzierte Ladezeiten: Da alle Variationen in einer einzigen Datei gespeichert sind, wird die Anzahl der HTTP-Requests reduziert, was die Ladezeit der Webseite optimiert.

  2. Flexible Typografie: Variable Fonts ermöglichen stufenlose Anpassungen und bieten somit mehr Designoptionen, ohne dass zusätzliche Dateien erforderlich sind.

  3. Dynamische Anpassungen für Responsive Design: Durch die Möglichkeit, Parameter wie Schriftstärke und Breite stufenlos anzupassen, passen sich Variable Fonts nahtlos an verschiedene Bildschirmgrößen und -auflösungen an.

  4. Animationen und Übergänge: Da Variable Fonts verschiedene Schriftparameter dynamisch anpassen können, eignen sie sich ideal für Animationen und flüssige Übergänge.

6.2.6 Ein Beispiel für Animationen mit Variable Fonts

Variable Fonts ermöglichen beeindruckende Animationseffekte durch Übergänge zwischen Schriftstärken oder -breiten.

@keyframes weightShift {
    from {
        font-weight: 100;
    }
    to {
        font-weight: 900;
    }
}

h1 {
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 100;
    animation: weightShift 3s infinite alternate;
}

In diesem Beispiel wird das h1-Element animiert, indem die Schriftstärke stufenlos von 100 auf 900 variiert.

6.3 Textausrichtung und -gestaltung

Textausrichtung und -gestaltung sind wesentliche Aspekte der Typografie in CSS, die zur Verbesserung der Lesbarkeit und Strukturierung von Inhalten beitragen. Mit CSS lassen sich Texte gezielt anordnen, ausrichten und gestalten, um ein ansprechendes und benutzerfreundliches Layout zu schaffen.

6.3.1 Textausrichtung

Die Textausrichtung wird in CSS durch die text-align-Eigenschaft festgelegt, die bestimmt, wie der Text innerhalb eines Elements horizontal ausgerichtet wird.

6.3.1.1 text-align

Die text-align-Eigenschaft ist auf Block- und Inline-Block-Elemente anwendbar und unterstützt die folgenden Werte:

p {
    text-align: justify;
}

Dieser Code richtet den Text im <p>-Element so aus, dass er die Breite des Containers vollständig füllt.

6.3.2 Vertikale Ausrichtung

Die vertikale Ausrichtung von Inline-Elementen und Text innerhalb eines Containers wird durch die vertical-align-Eigenschaft bestimmt. Diese Eigenschaft wird häufig bei der Ausrichtung von Bildern, Icons oder Text in Tabellenzellen verwendet.

6.3.2.1 vertical-align

Wichtige Werte für vertical-align sind:

img {
    vertical-align: middle;
}

In diesem Beispiel wird das Bild mittig an den umgebenden Text ausgerichtet.

6.3.3 Zeilenhöhe und Abstände

Für die Gestaltung und Lesbarkeit von Texten ist die line-height-Eigenschaft wichtig, da sie den vertikalen Abstand zwischen den Textzeilen steuert.

6.3.3.1 line-height

line-height definiert die Höhe einer Textzeile und kann in absoluten Einheiten (z. B. px) oder relativen Werten (z. B. em) angegeben werden. Sie kann auch als Faktor festgelegt werden, der die Schriftgröße multipliziert:

p {
    font-size: 16px;
    line-height: 1.5;
}

Hier beträgt der Zeilenabstand das 1,5-fache der Schriftgröße, was zu einer besseren Lesbarkeit führt.

6.3.4 Textgestaltung und Stil

CSS bietet eine Vielzahl an Eigenschaften, um Texte zu gestalten und stilistisch anzupassen. Diese Eigenschaften helfen, Text hervorzuheben, strukturieren und ein individuelles Design zu schaffen.

6.3.4.1 text-transform

Mit text-transform lässt sich die Groß- und Kleinschreibung des Textes ändern:

h2 {
    text-transform: uppercase;
}

6.3.4.2 text-decoration

text-decoration fügt Dekorationen wie Unterstriche oder Durchstreichungen zum Text hinzu:

a {
    text-decoration: underline;
}

6.3.4.3 text-indent

text-indent legt den Einzug der ersten Zeile eines Textblocks fest. Diese Eigenschaft wird häufig für Absätze verwendet, um einen klassischen Einzugseffekt zu erzeugen.

p {
    text-indent: 2em;
}

Hier wird die erste Zeile des Absatzes um 2em eingerückt.

6.3.5 Abstände zwischen Buchstaben und Wörtern

Die Abstände zwischen Buchstaben und Wörtern lassen sich mit den Eigenschaften letter-spacing und word-spacing anpassen, was die Lesbarkeit verbessert oder gestalterische Effekte erzeugt.

6.3.5.1 letter-spacing

Mit letter-spacing kann der Abstand zwischen einzelnen Buchstaben angepasst werden:

h1 {
    letter-spacing: 0.05em;
}

Dieser Code vergrößert den Abstand zwischen den Buchstaben im <h1>-Element leicht.

6.3.5.2 word-spacing

word-spacing legt den Abstand zwischen Wörtern fest:

p {
    word-spacing: 0.2em;
}

Hier werden die Abstände zwischen den Wörtern im Absatz erweitert, was den Text lesbarer machen kann.

6.3.6 text-shadow

Die text-shadow-Eigenschaft fügt dem Text einen Schatten hinzu und kann für dekorative Effekte oder zur Hervorhebung bestimmter Elemente verwendet werden. Sie akzeptiert die folgenden Werte: horizontale Verschiebung, vertikale Verschiebung, Unschärfe und Farbe.

h1 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

Dieser Code fügt dem Text im <h1>-Element einen weichen Schatten hinzu, der leicht nach rechts und unten verschoben ist.

6.4 Typografische Techniken

Typografische Techniken in CSS tragen maßgeblich zur Lesbarkeit und zum visuellen Erscheinungsbild einer Webseite bei. Durch den Einsatz moderner CSS-Eigenschaften und -Techniken lassen sich flexible, ansprechende und gut strukturierte Textlayouts gestalten, die den Benutzer durch die Inhalte führen und die Hierarchie der Informationen klar machen.

6.4.1 Responsive Typografie

Mit responsive Typografie passen sich Schriftgrößen, Abstände und andere typografische Elemente an unterschiedliche Bildschirmgrößen an. Die Verwendung relativer Einheiten wie em, rem, und vw in Kombination mit Medienabfragen erlaubt eine dynamische und skalierbare Schriftgestaltung.

6.4.1.1 Verwendung von vw für Schriftgröße

Mit vw kann die Schriftgröße dynamisch an die Bildschirmbreite angepasst werden. Das sorgt für eine gleichmäßige Darstellung auf Geräten unterschiedlicher Größe.

h1 {
    font-size: 5vw; /* Schriftgröße beträgt 5% der Bildschirmbreite */
}

Alternativ kann man eine Kombination aus vw und rem verwenden, um ein besseres Gleichgewicht zu erreichen.

6.4.1.2 Medienabfragen für Schriftgröße

Medienabfragen ermöglichen es, die Schriftgröße bei bestimmten Bildschirmgrößen anzupassen.

body {
    font-size: 1rem;
}

@media (min-width: 768px) {
    body {
        font-size: 1.2rem;
    }
}

@media (min-width: 1200px) {
    body {
        font-size: 1.5rem;
    }
}

6.4.2 Modular Scale

Die Modular Scale ist eine Methode, um die Schriftgrößen auf Basis eines festen Verhältnisses zu skalieren. Häufig verwendete Verhältnisse sind die goldene Ratio (1:1.618) und das Oktav-Verhältnis (1:2), die harmonische Schriftgrößenverhältnisse erzeugen.

h1 {
    font-size: 2.618rem; /* Hauptüberschrift */
}

h2 {
    font-size: 1.618rem; /* Untergeordnete Überschrift */
}

p {
    font-size: 1rem; /* Standardtextgröße */
}

6.4.3 Variable Fonts für flexible Schriftstärken und -breiten

Variable Fonts bieten die Möglichkeit, die Schriftstärke und -breite dynamisch zu steuern, wodurch responsive Typografie und fließende Übergänge zwischen verschiedenen Stilen und Stärken ermöglicht werden. Damit lassen sich Schriftgrößen oder -stärken je nach Bildschirmgröße oder Layout-Kontext anpassen, ohne dass zusätzliche Schriftdateien geladen werden müssen.

h1 {
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 100 900;
    font-stretch: 75% 125%;
}

@media (min-width: 768px) {
    h1 {
        font-weight: 700;
        font-stretch: 100%;
    }
}

6.4.4 Einsatz von clamp() für adaptive Schriftgrößen

Die CSS-Funktion clamp() erlaubt eine dynamische Schriftgrößenanpassung zwischen einem Mindest- und einem Höchstwert, was besonders für responsive Typografie nützlich ist.

h1 {
    font-size: clamp(1.5rem, 2vw + 1rem, 3rem);
}

In diesem Beispiel wird die Schriftgröße des <h1>-Elements dynamisch innerhalb eines Bereichs angepasst, wobei sie nicht kleiner als 1.5rem und nicht größer als 3rem wird.

6.4.5 Vertikaler Rhythmus und Zeilenhöhe

Der vertikale Rhythmus sorgt für einen gleichmäßigen Zeilenabstand, was die Lesbarkeit und visuelle Struktur verbessert. Durch die konsistente Nutzung der line-height-Eigenschaft und Abstände lassen sich die Textblöcke harmonisch aufeinander abstimmen.

p {
    font-size: 1rem;
    line-height: 1.5rem;
    margin-bottom: 1.5rem;
}

6.4.6 hyphens-Eigenschaft für automatische Silbentrennung

Die hyphens-Eigenschaft erlaubt die automatische Silbentrennung, was insbesondere bei langen Texten für eine gleichmäßige Textverteilung sorgt.

p {
    hyphens: auto;
}

Diese Funktion verbessert die Textverteilung in Blocksatz und sorgt für ein ausgewogenes Textbild.

6.4.7 Ligaturen und stilistische Alternativen

Ligaturen und stilistische Alternativen sind zusätzliche Zeichenformen innerhalb einer Schriftart, die oft aus ästhetischen Gründen verwendet werden. Mit der CSS-Eigenschaft font-feature-settings können solche typografischen Feinheiten gezielt gesteuert werden.

6.4.7.1 Ligaturen

Ligaturen sind spezielle Zeichenkombinationen für häufig vorkommende Buchstabenkombinationen wie “ff”, “fi” oder “fl”.

p {
    font-feature-settings: "liga" 1;
}

6.4.7.2 Stilistische Alternativen

Stilistische Alternativen bieten eine alternative Darstellung bestimmter Buchstaben oder Ziffern in einer Schriftart.

h1 {
    font-feature-settings: "salt" 1;
}

6.4.8 text-rendering-Optimierungen

Die text-rendering-Eigenschaft ermöglicht Feinabstimmungen, die die Lesbarkeit und Darstellungsqualität des Textes verbessern. Diese Eigenschaft ist jedoch spezifisch für SVG und wird von einigen Browsern unterschiedlich unterstützt.

body {
    text-rendering: optimizeLegibility;
}

Werte:

6.4.9 Textüberläufe mit text-overflow

Die text-overflow-Eigenschaft steuert, wie überlaufender Text in einem Container angezeigt wird, z. B. mit Ellipsen am Ende.

p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

In diesem Beispiel wird überlaufender Text mit einer Ellipse (...) angezeigt, was besonders in kleinen Containern nützlich ist.