Typografie

Dies ist ein normaler Fließtext. Er dient dazu, Zeilenhöhe, Schriftgröße, Textfarbe und maximale Textbreite
zu prüfen. Gute Lesbarkeit entsteht durch ausreichenden Kontrast, angenehme Zeilenlängen und klare visuelle
Hierarchien.

Innerhalb eines Absatzes können verschiedene Inline-Elemente vorkommen:
fetter Text, kursiver Text, markierter Text,
kleiner Hinweistext, SEO,
inline-code und ein normaler Textlink.

Überschrift Ebene 1

Eine H1 sollte pro Seite in der Regel nur einmal als Hauptüberschrift verwendet werden.

Überschrift Ebene 2

H2-Überschriften strukturieren große Inhaltsbereiche.

Überschrift Ebene 3

H3-Überschriften eignen sich für Unterabschnitte innerhalb eines größeren Bereichs.

Überschrift Ebene 4

H4 kann für kleinere Gruppen, Karten oder Detailbereiche genutzt werden.

Überschrift Ebene 5

H5 wird seltener verwendet, kann aber für stark verschachtelte Inhalte sinnvoll sein.

Überschrift Ebene 6

H6 ist die kleinste semantische Überschrift.

Textvarianten

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non sapien vitae magna consequat dignissim.
Curabitur feugiat, purus sed faucibus commodo, justo erat luctus erat, sed gravida mi lorem eget lectus.

Dies ist ein größerer Absatz, der beispielsweise für Einleitungen, Teaser oder hervorgehobene Aussagen genutzt werden kann.

Dies ist ein zurückhaltender Hinweistext. Er eignet sich für Metainformationen, Nebenbemerkungen oder ergänzende Hinweise.

Ein längerer Fließtext kann außerdem mehrere Sätze enthalten, um reale Content-Situationen besser abzubilden.
Dabei zeigt sich, ob Absätze ausreichend voneinander getrennt sind und ob Links, Hervorhebungen sowie Zeilenumbrüche
harmonisch wirken.

Listen

Ungeordnete Liste

• Erster Listenpunkt mit kurzem Text
• Zweiter Listenpunkt mit etwas längerem Text zur Prüfung des Zeilenumbruchs
• Dritter Listenpunkt mit hervorgehobenem Inhalt
• Vierter Listenpunkt mit einem Link

Geordnete Liste

1. Analyse der Ausgangssituation
2. Definition der Anforderungen
3. Gestaltung der Inhaltsstruktur
4. Technische Umsetzung
5. Prüfung und Optimierung

Verschachtelte Liste

• Website-Struktur
  • Startseite
  • Leistungsseiten
  • Kontaktseite
• Inhalte
  • Texte
  • Bilder
  • Downloads

Definitionsliste

HTML

Struktursprache zur semantischen Auszeichnung von Inhalten.

CSS

Stylesheet-Sprache zur Gestaltung von Layout, Farben, Abständen und Typografie.

WordPress

Content-Management-System zur Verwaltung und Veröffentlichung von Websites.

Buttons und Links

Buttons sollten visuell eindeutig sein und eine klare Handlung auslösen. Textlinks sollten sich gut vom Fließtext unterscheiden.

Dies ist ein Absatz mit einem einfachen Textlink. Außerdem gibt es externe Links,
Downloads oder Sprungmarken innerhalb einer Seite.

Karten und Grid

Zitat und Hervorhebung

Gute Gestaltung ist nicht nur eine Frage der Optik. Sie macht Inhalte verständlicher, Prozesse einfacher
und Entscheidungen klarer.

Beispielzitat aus einer Demo-Seite

Bilder und Medien

Tabelle

Tabellen eignen sich für vergleichbare, strukturierte Informationen. Sie sollten nicht für Layout-Zwecke verwendet werden.

Akkordeon mit Details und Summary

Code und Preformatted Text

Inline-Code sieht zum Beispiel so aus: display: flex;

.demo-section {
  padding-block: 4rem;
}

.card-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

Adressdaten und Kontaktinformationen

Telefon: 0351 1234567

Formular-Elemente

Statusmeldungen

Content mit mehreren Spalten

Teaser mit Bild und Text

Feature-Bereich

Ein Inhaltsblock mit Bild, Überschrift und Text

Dieser Bereich eignet sich für Leistungen, Projekte, Referenzen oder redaktionelle Inhalte.
Er hilft dabei, Zusammenspiel von Bildformaten, Textlängen und Abständen zu testen.

Mehr lesen

Call to Action

Trennlinien und Metainformationen

Trennlinien können Inhalte visuell gliedern, sollten aber sparsam eingesetzt werden.

Veröffentlicht am 1. Mai 2026 von Redaktion.