Text mit CSS-Schrift-Eigenschaften gestalten

Einführung

In diesem Lab lernen die Schüler, wie man mithilfe von CSS-Schrift-Eigenschaften den Text gestaltet und dabei grundlegende Typografie-Techniken im Webdesign erkundet. Der umfassende Leitfaden führt die Lernenden durch das Erstellen einer HTML-Dokument und das Anwenden verschiedener Schriftgestaltungsmethoden, darunter Schriftfamilie, Größe, Zeilenhöhe, Stil und Gewicht.

Die Teilnehmer beginnen mit dem Aufbau einer grundlegenden HTML-Struktur und verbessern dann sukzessive ihre Typografie-Fähigkeiten, indem sie CSS-Eigenschaften implementieren, die das Aussehen des Texts steuern. Durch praktische Übungen werden die Schüler entdecken, wie man mit unterschiedlichen Schrifttechniken visuell ansprechendes und lesbares Web-Inhalte erstellt und praktische Erfahrungen im Bereich der Webdesign-Typografie gewinnt.

Erstellen einer HTML-Datei und Einrichten der grundlegenden Struktur

In diesem Schritt lernst du, wie du eine HTML-Datei erstellst und ihre grundlegende Struktur für die Gestaltung von Text mit CSS einrichtest. Wir werden die WebIDE verwenden, um eine neue HTML-Dokument zu erstellen, das als Grundlage für unsere Typografie-Gestaltungsübung dienen wird.

Navigiere zunächst zum Verzeichnis ~/project in der WebIDE. Erstelle eine neue Datei namens typografie.html, indem du im Dateiexplorer rechtsklickst und "Neue Datei" wählst.

Hier ist die grundlegende HTML-Struktur, die du erstellen wirst:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Typography Styling</title>
    <style>
      /* Wir werden unsere CSS-Stile in späteren Schritten hier hinzufügen */
    </style>
  </head>
  <body>
    <h1>Willkommen zur CSS-Typografie</h1>
    <p>
      Dieser Absatz wird verschiedene Textgestaltungstechniken demonstrieren.
    </p>
  </body>
</html>

Zergliedern wir die wichtigsten Komponenten dieser HTML-Struktur:

<!DOCTYPE html> deklariert dies als ein HTML5-Dokument
<html lang="en"> setzt die Sprache des Dokuments
<head> enthält Metadaten über das Dokument
<meta charset="UTF-8"> gewährleistet eine korrekte Zeichensatzkodierung
<meta name="viewport"> hilft bei der responsive Gestaltung
<title> setzt den Seitentitel
Das <style>-Tag ist der Ort, an dem wir unsere CSS hinzufügen werden (wir werden dies in späteren Schritten erweitern)
<body> enthält den sichtbaren Inhalt der Seite

Beispielausgabe, wenn du diese Datei in einem Browser öffnest:

[Eine einfache Seite mit einem Titel "Willkommen zur CSS-Typografie"
und einem darunter liegenden Absatz]

Schriftfamilie auf Überschriften anwenden

In diesem Schritt lernst du, wie du mit CSS verschiedene Schriftfamilien auf Überschriften anwendest. Die Schriftfamilie ist eine entscheidende Eigenschaft, die die Schriftart des Texts bestimmt und dir ermöglicht, visuell ansprechende und lesbare Typografie zu erstellen.

Öffne die Datei typografie.html in der WebIDE und modifiziere den <style>-Abschnitt, um Schriftfamilie-Eigenschaften hinzuzufügen:

<style>
  h1 {
    font-family: Arial, sans-serif;
  }

  h2 {
    font-family: "Times New Roman", serif;
  }

  p {
    font-family: Verdana, sans-serif;
  }
</style>

Lassen wir die wichtigsten Konzepte der Schriftfamilie erkunden:

Web-sichere Schriftarten: Dies sind Schriftarten, die auf verschiedenen Geräten und Browsern allgemein verfügbar sind.
- Serifenlose Schriftarten (wie Arial): Sauberer, moderner Look
- Serifenschriftarten (wie Times New Roman): Traditioneller, formeller Anschein
Fallback-Schriftarten: Stelle immer eine generische Schriftfamilie als Backup zur Verfügung
- sans-serif
- serif
- monospace
Mehrere Schriftoptionen: Liste Schriftarten in der Reihenfolge deiner Präferenz
- Die erste Schriftart ist die primäre Wahl
- Spätere Schriftarten sind Fallbacks, wenn die vorherigen Schriftarten nicht verfügbar sind

Erweitere dein HTML, um verschiedene Überschriften zu demonstrieren:

<body>
  <h1>Hauptüberschrift (Arial)</h1>
  <h2>Untertitel (Times New Roman)</h2>
  <p>Absatztext in Verdana</p>
</body>

Beispielausgabe in einem Browser:

[Eine Seite, die zeigt:
- Hauptüberschrift in Arial
- Untertitel in Times New Roman
- Absatz in Verdana]

Schriftgröße und Zeilenhöhe einstellen

In diesem Schritt lernst du, wie du die Lesbarkeit und das Aussehen von Text durch die Einstellung der Schriftgröße und Zeilenhöhe mit CSS steuern kannst. Diese Eigenschaften sind entscheidend für die Erstellung von visuell ansprechender und leicht lesbarer Typografie.

Öffne die Datei typografie.html und aktualisiere den <style>-Abschnitt mit der folgenden CSS:

<style>
  h1 {
    font-family: Arial, sans-serif;
    font-size: 36px;
    line-height: 1.5;
  }

  h2 {
    font-family: "Times New Roman", serif;
    font-size: 24px;
    line-height: 1.4;
  }

  p {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.6;
  }
</style>

Zergliedern wir die wichtigsten Konzepte:

Schriftgröße:
- In Pixeln (px), em oder rem gemessen
- Steuert die Textgröße
- Typische Größen:
  - Überschriften: 24 - 36px
  - Körpertext: 14 - 16px
Zeilenhöhe:
- Steuert den vertikalen Abstand zwischen Textzeilen
- Verbessert die Lesbarkeit
- Typischerweise zwischen 1.4 und 1.6 eingestellt
- Kann einheitlos (empfohlen) oder in Pixeln sein

Erweitere dein HTML, um verschiedene Textgrößen zu demonstrieren:

<body>
  <h1>Hauptüberschrift (36px)</h1>
  <h2>Untertitel (24px)</h2>
  <p>Absatztext mit erhöhter Zeilenhöhe für bessere Lesbarkeit.</p>
</body>

Beispielausgabe in einem Browser:

[Eine Seite, die zeigt:
- Große Hauptüberschrift
- Kleinere Unterüberschrift
- Absatz mit angenehmer Zeilenabstände]

Schriftstil und -gewicht hinzufügen

In diesem Schritt lernst du, wie du Schriftstil und -gewicht verwenden, um deinem Text mit CSS Betonung und Vielfalt hinzuzufügen. Diese Eigenschaften helfen, eine visuelle Hierarchie zu schaffen und die Gesamtgestaltung deiner Typografie zu verbessern.

Öffne die Datei typografie.html und aktualisiere den <style>-Abschnitt mit der folgenden CSS:

<style>
  h1 {
    font-family: Arial, sans-serif;
    font-size: 36px;
    font-style: italic;
    font-weight: bold;
  }

  h2 {
    font-family: "Times New Roman", serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
  }

  p {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
  }

  .highlight {
    font-style: italic;
    font-weight: bold;
  }
</style>

Lassen wir die wichtigsten Konzepte erkunden:

Schriftstil:
- normal: Standard-Textaussehen
- italic: Geneigte Schrift
- oblique: Ähnlich wie italic, aber weniger üblich
Schriftgewicht:
- normal: Normaler Text (400)
- bold: Dicker, auffälligerer Text (700)
- Numerische Werte: 100 - 900 (in 100er-Schritten)
  - 400: Normal
  - 600: Halbfett
  - 700: Fett

Ändere dein HTML, um diese Eigenschaften zu demonstrieren:

<body>
  <h1>Hauptüberschrift (Kursiv und Fett)</h1>
  <h2>Untertitel (Halbfett)</h2>
  <p>
    Normaler Absatztext.
    <span class="highlight">Dieser Text ist hervorgehoben</span>.
  </p>
</body>

Beispielausgabe in einem Browser:

[Eine Seite, die zeigt:
- Hauptüberschrift in Kursiv und Fett
- Untertitel in Halbfett
- Absatz mit einem hervorgehobenen Span]

Kombinieren von Schrift-Eigenschaften mit Kurzschreibweisen

In diesem Schritt lernst du, wie du die CSS-Kurzschreibweise font verwendest, um mehrere Schrift-Eigenschaften in eine einzelne, prägnante Deklaration zu kombinieren. Dieser Ansatz macht deinen CSS lesbarer und effizienter.

Öffne die Datei typografie.html und aktualisiere den <style>-Abschnitt mit der folgenden CSS:

<style>
  h1 {
    font:
      bold italic 36px Arial,
      sans-serif;
  }

  h2 {
    font:
      600 24px "Times New Roman",
      serif;
  }

  p {
    font:
      normal 16px/1.6 Verdana,
      sans-serif;
  }

  .highlight {
    font:
      bold italic 16px Verdana,
      sans-serif;
  }
</style>

Zergliedern wir die Syntax der Kurzschreibweise font:

Grundlegende Syntax: font: [Schriftstil] [Schriftgewicht] [Schriftgröße] [Zeilenhöhe] [Schriftfamilie]
- Die Reihenfolge zählt!
- Nicht alle Werte sind erforderlich
Häufige Kurzschreibweisenmuster:
- font: Stil Gewicht Größe Familie
- font: Größe/Zeilenhöhe Familie
- font: Gewicht Größe Familie

Ändere dein HTML, um die Kurzschreib-Eigenschaften zu demonstrieren:

<body>
  <h1>Hauptüberschrift (Kurzschreibweise)</h1>
  <h2>Untertitel (Kompakte Syntax)</h2>
  <p>
    Absatz mit Zeilenhöhe. <span class="highlight">Hervorgehobener Text</span>.
  </p>
</body>

Beispielausgabe in einem Browser:

[Eine Seite, die zeigt:
- Hauptüberschrift mit fettem, kursivem Stil
- Untertitel mit kompakter Schriftdeklaration
- Absatz mit integrierter Zeilenhöhe]

Zusammenfassung

In diesem Lab lernen die Teilnehmer die Grundlagen der Textgestaltung mit CSS-Schrift-Eigenschaften in einem schrittweisen Ansatz. Die Anfangsphase beinhaltet das Erstellen einer HTML-Datei mit einer grundlegenden Struktur, das Einrichten von essentiellen Metadaten und das Vorbereiten einer Leinwand für die Typografie-Experimente. Die Teilnehmer lernen die wichtigsten HTML-Elemente und -Attribute kennen, einschließlich der DOCTYPE-Deklaration, der Sprach-Einstellungen und der Viewport-Konfiguration.

Das Lab geht zu praktischen CSS-Stiltechniken über, wobei der Fokus auf der Schriftmanipulation liegt. Die Teilnehmer erkunden Methoden, um Schriftfamilien auf Überschriften anzuwenden, die Schriftgröße und Zeilenhöhe anzupassen und die Schriftstile und -gewichte zu modifizieren. Indem die Teilnehmer direkt in der WebIDE arbeiten und ihr HTML- und CSS-Code sukzessive aufbauen, gewinnen sie praktische Erfahrungen bei der Veränderung des Textaussehens und verstehen, wie verschiedene Schrift-Eigenschaften zum effektiven Web-Typografie beitragen.