Direkt zum Inhalt springen

Freie Webtools

Dokumentation

Aufbau, Einbindung und Beispiele für das FWT-System. Verständlich erklärt, sichtbar gezeigt und direkt nutzbar.

CSS-System Dokumentation Datenschutzfreundlich

Inhalt / Typografie

Typografie in FWT

Typografie bestimmt, wie gut Inhalte gelesen und verstanden werden. Gute Schriftgrößen, klare Überschriften, ausreichende Zeilenhöhe und passende Abstände sind wichtiger als viele Effekte.

FWT stellt dafür Grundklassen bereit, die normale Inhalte, längere Texte, kleine Hinweise, Inline-Auszeichnungen und Code-Darstellungen sauber darstellen.

Merksatz: Eine schöne Seite nützt wenig, wenn der Text schlecht lesbar ist.

Überschriften

Überschriftenklassen

Überschriften geben einer Seite Struktur. Sie sollten nicht nur groß sein, sondern eine klare Reihenfolge bilden.

Live-Beispiel

Überschrift H1

Überschrift H2

Überschrift H3

Überschrift H4

Überschrift H5
Überschrift H6
HTML-Code anzeigen 
<h1 class="fwt-h1">Überschrift H1</h1>
<h2 class="fwt-h2">Überschrift H2</h2>
<h3 class="fwt-h3">Überschrift H3</h3>
<h4 class="fwt-h4">Überschrift H4</h4>
<h5 class="fwt-h5">Überschrift H5</h5>
<h6 class="fwt-h6">Überschrift H6</h6>
Eine Seite sollte normalerweise nur eine Hauptüberschrift h1 haben.
Überschriften sollten nicht nur wegen der Optik übersprungen werden.
Wenn nur die Optik geändert werden soll, können Klassen wie fwt-h2 verwendet werden, ohne die HTML-Struktur falsch zu machen.

Absätze

Normale Absatztexte

Normale Texte müssen ruhig und gut lesbar sein. Zu kleine Schrift, zu geringe Zeilenhöhe oder zu breite Textbereiche machen Seiten anstrengend.

Live-Beispiel

Dies ist ein normaler Absatztext. Er sollte gut lesbar sein, genug Zeilenhöhe haben und nicht zu breit laufen.

HTML-Code anzeigen 
<p class="fwt-text">
    Dies ist ein normaler Absatztext. Er sollte gut lesbar sein,
    genug Zeilenhöhe haben und nicht zu breit laufen.
</p>
Für längere Texte ist zusätzlich ein begrenzter Lesebereich sinnvoll, zum Beispiel mit fwt-container-reader oder fwt-prose.

Lead

Lead-Text

Ein Lead-Text steht meist direkt unter einer Überschrift. Er erklärt kurz, worum es geht, und führt den Nutzer in den Inhalt hinein.

Live-Beispiel

Ein Lead-Text fasst den wichtigsten Gedanken einer Seite zusammen und führt in den Inhalt ein.

HTML-Code anzeigen 
<p class="fwt-lead">
    Ein Lead-Text fasst den wichtigsten Gedanken einer Seite zusammen
    und führt in den Inhalt ein.
</p>

Klein / Meta

Kleine Texte und Meta-Informationen

Kleine Texte eignen sich für Zusatzinformationen. Meta-Texte werden oft für Datum, Kategorie, Status oder ergänzende Angaben genutzt.

Live-Beispiel

Kleiner Text für ergänzende Hinweise.

Aktualisiert am 31.05.2026 · Kategorie: Dokumentation

HTML-Code anzeigen 
<p class="fwt-text-small">
    Kleiner Text für ergänzende Hinweise.
</p>

<p class="fwt-text-meta">
    Aktualisiert am 31.05.2026 · Kategorie: Dokumentation
</p>
Kleine Texte dürfen nicht so klein werden, dass sie schwer lesbar sind. Besonders auf Mobilgeräten muss das geprüft werden.

Mehrzeilig

Mehrzeilige Texte und Adressen

Manche Inhalte sollen dichter stehen als normale Absätze. Das gilt zum Beispiel für Adressen, Kontaktdaten, Öffnungszeiten oder kurze mehrzeilige Hinweise.

FWT löst das über Klassen am umgebenden Textblock. Dadurch bleiben normale br-Umbrüche nutzbar, aber die Zeilenhöhe wird sauber gesteuert.

Enge und luftige Zeilen

Erste Zeile mit engem Abstand
Zweite Zeile mit engem Abstand
Dritte Zeile mit engem Abstand

Erste Zeile mit luftigem Abstand
Zweite Zeile mit luftigem Abstand
Dritte Zeile mit luftigem Abstand

HTML-Code anzeigen 
<p class="fwt-text fwt-lines-tight">
    Erste Zeile mit engem Abstand<br>
    Zweite Zeile mit engem Abstand<br>
    Dritte Zeile mit engem Abstand
</p>

<p class="fwt-text fwt-lines-relaxed">
    Erste Zeile mit luftigem Abstand<br>
    Zweite Zeile mit luftigem Abstand<br>
    Dritte Zeile mit luftigem Abstand
</p>
Für vorhandene br-Umbrüche genügt meist fwt-lines-tight am umgebenden Absatz.
Adressblöcke
Chasalla.de / Freie Webtools Adresse später ergänzen Deutschland / Europa
Kontakt: info@example.de 0561 / 000000
HTML-Code anzeigen 
<address class="fwt-address">
<strong>Chasalla.de / Freie Webtools</strong>
Adresse später ergänzen
Deutschland / Europa
</address>

<address class="fwt-address fwt-address-muted fwt-address-compact">
Kontakt:
info@example.de
0561 / 000000
</address>
Für Adressen sollte das echte HTML-Element address genutzt werden. Die Klasse fwt-address sorgt für passende Darstellung.
Enter-Zeilenumbrüche sichtbar machen

Diese Zeilen stehen im Quelltext mit echten Enter-Zeilenumbrüchen und werden durch fwt-preline sichtbar.

HTML-Code anzeigen 
<div class="fwt-frame">
    <p class="fwt-text fwt-preline fwt-lines-tight">Diese Zeilen stehen im Quelltext
mit echten Enter-Zeilenumbrüchen
und werden durch fwt-preline sichtbar.</p>
</div>
fwt-preline macht echte Zeilenumbrüche aus dem Quelltext sichtbar. Das ist praktisch, wenn Inhalte später aus Textfeldern oder einfachen Eingabebereichen kommen.

Inline

Klassische Inline-Elemente

FWT erweitert klassische Inline-Elemente wie fett, kursiv und klein, ohne ihre HTML-Bedeutung kaputtzumachen.

Live-Beispiel

Dies ist fetter Text, dies ist kursiver Text und dies ist kleiner Zusatztext.

Mit FWT-Klassen geht es genauso: wichtig, betont und klein.

HTML-Code anzeigen 
<p class="fwt-text">
    Dies ist <strong>fetter Text</strong>,
    dies ist <em>kursiver Text</em> und
    dies ist <small>kleiner Zusatztext</small>.
</p>

<p class="fwt-text">
    Mit FWT-Klassen geht es genauso:
    <span class="fwt-strong">wichtig</span>,
    <span class="fwt-em">betont</span> und
    <span class="fwt-small">klein</span>.
</p>
strong bedeutet wichtig.
em bedeutet betont.
small ist für Nebeninformationen gedacht, nicht für wichtigen Haupttext.

Markierungen

Highlights, Unterstreichungen und Durchstreichungen

Markierungen helfen, einzelne Textstellen sichtbar hervorzuheben. FWT bietet neben der Standardmarkierung auch semantische Farbvarianten.

Markierungen

Standard-Markierung mit HTML mark
Standard-Markierung mit FWT
Primary-Markierung
Success-Markierung
Info-Markierung
Warning-Markierung
Danger-Markierung
Creative-Markierung

HTML-Code anzeigen 
<p class="fwt-text">
    <mark>Standard-Markierung mit HTML mark</mark><br>
    <span class="fwt-mark">Standard-Markierung mit FWT</span><br>
    <span class="fwt-mark-primary">Primary-Markierung</span><br>
    <span class="fwt-mark-success">Success-Markierung</span><br>
    <span class="fwt-mark-info">Info-Markierung</span><br>
    <span class="fwt-mark-warning">Warning-Markierung</span><br>
    <span class="fwt-mark-danger">Danger-Markierung</span><br>
    <span class="fwt-mark-creative">Creative-Markierung</span>
</p>
Markierungen sollten sparsam eingesetzt werden. Wenn alles markiert ist, ist am Ende nichts mehr wirklich wichtig.
Unterstreichen und Durchstreichen

Normale Unterstreichung
Wichtige Unterstreichung
Bitte prüfen
Kritisch unterstrichen
Nicht mehr aktuell
Sollte überprüft werden
Falsche Angabe

HTML-Code anzeigen 
<p class="fwt-text">
    <span class="fwt-underline">Normale Unterstreichung</span><br>
    <span class="fwt-underline-primary">Wichtige Unterstreichung</span><br>
    <span class="fwt-underline-warning">Bitte prüfen</span><br>
    <span class="fwt-underline-danger">Kritisch unterstrichen</span><br>
    <span class="fwt-strike-muted">Nicht mehr aktuell</span><br>
    <span class="fwt-strike-warning">Sollte überprüft werden</span><br>
    <span class="fwt-strike-danger">Falsche Angabe</span>
</p>
Unterstreichungen bitte vorsichtig nutzen, weil Nutzer sie schnell mit Links verwechseln können.

Code / Tastatur

Inline-Code, Tastaturhinweise und Codezeilen

Für Dokumentationen, Anleitungen und technische Hinweise braucht FWT einfache Code- und Tastaturdarstellungen. Die Codezeile mit Nummer ist bewusst als kleiner FWT-Mehrwert angelegt.

Live-Beispiel

Inline-Code sieht so aus: fwt-frame.

Tastaturhinweis: Strg + F5

01 <div class="fwt-frame">Inhalt</div>
02 Cache nach CSS-Änderungen hart neu laden.
HTML-Code anzeigen 
<p class="fwt-text">
    Inline-Code sieht so aus:
    <code class="fwt-code-inline">fwt-frame</code>.
</p>

<p class="fwt-text">
    Tastaturhinweis:
    <kbd class="fwt-kbd">Strg</kbd> + <kbd class="fwt-kbd">F5</kbd>
</p>

<div class="fwt-code-line fwt-code-line-primary">
    <span class="fwt-code-number">01</span>
    <code>&lt;div class="fwt-frame"&gt;Inhalt&lt;/div&gt;</code>
</div>

<div class="fwt-code-line fwt-code-line-warning">
    <span class="fwt-code-number">02</span>
    <code>Cache nach CSS-Änderungen hart neu laden.</code>
</div>
fwt-code-inline eignet sich für kurze Klassen- oder Dateinamen im Text.
fwt-kbd eignet sich für Tastaturbefehle.
fwt-code-line eignet sich für einzelne Codezeilen mit Nummer.

Textfarben

Textfarben sinnvoll einsetzen

Textfarben gehören zum Farbsystem, wirken aber direkt in der Typografie. Sie sollten Bedeutung unterstützen, aber nie allein die Bedeutung tragen.

Live-Beispiel

Primary: wichtige Hervorhebung.

Muted: dezente Nebeninformation.

Success: positive Rückmeldung.

Info: sachlicher Hinweis.

Warning: Hinweis zur Prüfung.

Danger: Fehler oder kritischer Hinweis.

Creative: besonderer kreativer Hinweis.

HTML-Code anzeigen 
<p class="fwt-text-primary">Primary: wichtige Hervorhebung.</p>
<p class="fwt-text-muted">Muted: dezente Nebeninformation.</p>
<p class="fwt-text-success">Success: positive Rückmeldung.</p>
<p class="fwt-text-info">Info: sachlicher Hinweis.</p>
<p class="fwt-text-warning">Warning: Hinweis zur Prüfung.</p>
<p class="fwt-text-danger">Danger: Fehler oder kritischer Hinweis.</p>
<p class="fwt-text-creative">Creative: besonderer kreativer Hinweis.</p>
Ein Fehler braucht nicht nur roten Text, sondern auch eine klare Erklärung.

Prose

Prose für längere Inhalte

fwt-prose ist für längere Lesetexte gedacht. Innerhalb dieses Bereichs sollen Überschriften, Absätze, Listen, Zitate und Links automatisch sauber wirken.

Live-Beispiel

Lesetext mit Prose

Prose ist für längere Inhaltsbereiche gedacht. Innerhalb eines solchen Bereichs sollen Überschriften, Absätze, Listen und Links automatisch gut lesbar wirken.

Das ist besonders sinnvoll für Blogartikel, Dokumentationen, rechtliche Hinweise oder erklärende Seiten.

  • angenehme Zeilenhöhe
  • saubere Abstände
  • lesbare Textbreite

Ein guter Lesetext braucht Ruhe, klare Struktur und genug Abstand.

HTML-Code anzeigen 
<article class="fwt-prose">
    <h2>Lesetext mit Prose</h2>

    <p>
        Prose ist für längere Inhaltsbereiche gedacht. Innerhalb eines solchen
        Bereichs sollen Überschriften, Absätze, Listen und Links automatisch
        gut lesbar wirken.
    </p>

    <p>
        Das ist besonders sinnvoll für Blogartikel, Dokumentationen,
        rechtliche Hinweise oder erklärende Seiten.
    </p>

    <ul>
        <li>angenehme Zeilenhöhe</li>
        <li>saubere Abstände</li>
        <li>lesbare Textbreite</li>
    </ul>

    <blockquote>
        <p>
            Ein guter Lesetext braucht Ruhe, klare Struktur und genug Abstand.
        </p>
    </blockquote>
</article>
fwt-prose ist sinnvoll für Blogartikel, Doku-Seiten und Rechtstexte.
fwt-prose-narrow kann für besonders ruhige Lesebreite genutzt werden.
fwt-prose-wide eignet sich für längere Inhalte mit mehr Platz.

Fehler vermeiden

Typische Typografie-Fehler

Zu breite Texte

Lange Zeilen sind schwer zu lesen. Für Lesetexte besser fwt-container-reader oder fwt-prose nutzen.

<article class="fwt-prose">...</article>

Falsche Überschriftenfolge

Überschriften sollten logisch aufgebaut sein. Nicht nur wegen der Optik von H2 direkt auf H5 springen.

<h2 class="fwt-h2">Abschnitt</h2>

Farbe als einzige Bedeutung

Rot allein erklärt keinen Fehler. Nutzer brauchen zusätzlich eine verständliche Aussage.

<p class="fwt-text-danger">Diese Eingabe ist fehlerhaft.</p>

Zu viel Markierung

Wenn alles markiert, fett oder unterstrichen ist, verliert die Auszeichnung ihre Wirkung.

<span class="fwt-mark-warning">Bitte sparsam nutzen</span>

Unterstreichung mit Links verwechseln

Unterstrichener Text kann wie ein Link wirken. Deshalb nur gezielt und verständlich einsetzen.

<span class="fwt-underline-warning">Bitte prüfen</span>

Code nicht lesbar darstellen

Code, Dateinamen und Klassen sollten klar abgesetzt werden, damit sie nicht im normalen Text untergehen.

<code class="fwt-code-inline">fwt-frame</code>