H1 – Typografie macht Inhalte lesbar

Diese Testseite zeigt die üblichen Textelemente und WordPress-Textblöcke. Prüfe Schriftfamilie, Schriftgrösse, Gewicht, Farbe, Zeilenhöhe und Abstände in der Vorschau deines Themes – auf einem breiten Bildschirm und auf dem Smartphone.

H2 – Eine klare Hierarchie gibt Orientierung

Dieser Absatz steht unmittelbar nach einer Überschrift zweiter Ordnung. Er zeigt den Abstand zwischen Titel und Fliesstext sowie das Verhältnis ihrer Schriftgrössen.

H3 – Gute Texte brauchen einen Rhythmus

Ein Abschnitt dritter Ordnung gliedert längere Inhalte. Die Überschrift soll sich vom Absatz abheben und zugleich zur übrigen Typografie passen.

H4 – Auch kleinere Abschnitte bleiben erkennbar

Hier beginnt ein Unterabschnitt. Achte darauf, ob die Schrift noch als Überschrift erkennbar ist und genügend Abstand zum folgenden Text hat.

H5 – Eine weitere Ebene für Details

Diese Ebene kommt seltener vor, gehört aber zu einem vollständigen Test der HTML-Überschriften.

H6 – Die kleinste Überschriftenebene

Auch die kleinste Überschrift sollte lesbar sein. Vergleiche Schriftgewicht, Zeilenhöhe und Abstand mit einem gewöhnlichen Absatz.

01 – Fliesstext, Absätze und Zeilenumbrüche

An einem freien Nachmittag bleibt Zeit für die kleinen Entdeckungen: ein Buch, das schon lange auf dem Tisch liegt, ein Gespräch vor der Haustür oder ein Spaziergang durch das Dorf. Gute Texte führen ebenso selbstverständlich von einem Gedanken zum nächsten. Dieser längere Absatz hilft dabei, die Lesbarkeit über mehrere Zeilen hinweg zu beurteilen. Achte auf die Zeilenlänge, den Durchschuss und das Zusammenspiel von Buchstaben, Wörtern und Leerzeichen.

Ein zweiter Absatz macht die vertikalen Abstände sichtbar. Der Wechsel zwischen kurzen und langen Sätzen bringt Bewegung in den Text. Auf einem schmalen Bildschirm entstehen zusätzliche Zeilen; dabei sollen Lesefluss und Gliederung erhalten bleiben. Besonders gut erkennst du hier, ob Absätze genügend Raum bekommen und sich dennoch zu einem zusammenhängenden Text verbinden.

Ein kurzer Absatz als Gegenprobe.

Erste Zeile mit einem manuellen Zeilenumbruch.
Zweite Zeile innerhalb desselben Absatzes.
Dritte Zeile – der Absatz endet erst hier.

Zwei Überschriften unmittelbar hintereinander

Hier folgt direkt eine Unterüberschrift

Dieser Absatz zeigt die Abstände nach zwei direkt aufeinanderfolgenden Überschriften.

02 – Textauszeichnungen im Satz

Normaler Text mit wichtiger Hervorhebung, betonter Passage und kombinierter Hervorhebung. Dazu kommt ein Link im Fliesstext, damit sich Farbe, Unterstreichung und Schriftgewicht vergleichen lassen.

Fett mit b · Kursiv mit i · Unterstrichen mit u · Nicht mehr zutreffend mit s

Gelöschter Text und neu eingefügter Text in einem redaktionell überarbeiteten Satz.

Eine markierte Textstelle hebt sich vom restlichen Absatz ab. Dieser Zusatz verwendet das small-Element für Kleingedrucktes.

Tiefgestellt: H₂O und CO₂. Hochgestellt: m², x³ und 10⁶.

Abkürzungen: HTML und CSS. Ein definierter Begriff: Typografie.

Ein kurzes Zitat im Satz: Der richtige Abstand macht den Unterschied. Ein fiktiver Werktitel: Notizen zur Typografie.

Inline-Code: font-family. Tastenkombination: Strg + S. Programmausgabe: Datei gespeichert. Variable: x + y = 12.

03 – Zeichensatz, Zahlen und Sprachen

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Ä Ö Ü ä ö ü ß ẞ · À Â Ç É È Ê Ë Î Ï Ô Œ Ù Û Ÿ · à â ç é è ê ë î ï ô œ ù û ÿ

0123456789 · 111111 · 888888 · 1’234.50 · 12,75 · −18 · +24 · 50 % · 20 °C

CHF 150.00 · € 99,90 · $ 125.00 · £ 80.00 · ½ ¼ ¾ · © ® ™ · & @ # §

«Schweizer Anführungszeichen» · „Deutsche Anführungszeichen“ · “English quotation marks” · ‹einfach› · ‚einfach‘

Bindestrich – · Gedankenstrich – · langer Gedankenstrich — · Auslassungspunkte … · Punkt, Komma; Doppelpunkt: Fragezeichen? Ausrufezeichen!

Verwechslungsprobe: I l 1 | O 0 o · rn m · cl d · fi fl ffi ffl

Deutsch: Zwölf flinke Vögel hüpfen über den grünen Gartenzaun.

Français : À l’entrée du théâtre, les visiteurs découvrent une nouvelle exposition.

Italiano: La qualità della lettura dipende anche dalla chiarezza e dall’equilibrio del testo.

English: The quick brown fox jumps over the lazy dog.

04 – Links und ihre Zustände

Ein gewöhnlicher Textlink zum Umbruchtest, ein fett hervorgehobener Link und ein kursiver Link innerhalb eines Absatzes.

Bewege den Mauszeiger über die Links, springe mit der Tabulatortaste zwischen ihnen und aktiviere einen Link. So lassen sich Hover, Tastaturfokus und – falls das Theme einen eigenen Stil vorsieht – besuchte Links vergleichen.

Beispiel einer E-Mail-Adresse: typografie@example.invalid

05 – Aufzählungen und nummerierte Listen

• Erster Punkt einer ungeordneten Liste.
• Ein längerer Listenpunkt, der auf schmalen Bildschirmen über mehrere Zeilen läuft. Die Folgezeilen sollen sich sinnvoll unter dem Text einordnen.
• Ein Listenpunkt mit verschachtelter Aufzählung.
  • Zweite Ebene mit hervorgehobenem Text.
  • Zweite Ebene mit weiteren Unterpunkten.
    • Dritte Ebene mit einem kurzen Eintrag.
    • Dritte Ebene mit einer längeren Zeile, damit Einzüge und Umbrüche sichtbar werden.
• Letzter Punkt mit einem Link zum Anfang.

1. Erster Schritt: Inhalte sammeln.
2. Zweiter Schritt: Texte gliedern.
   1. Überschriften prüfen.
   2. Absätze und Listen vergleichen.
3. Dritter Schritt: Darstellung kontrollieren.

Eine fortgesetzte nummerierte Liste beginnt bei 4:

4. Vierter Schritt.
5. Fünfter Schritt.
6. Sechster Schritt.

Dieser Absatz direkt nach der Liste prüft den Abstand zum nachfolgenden Fliesstext.

06 – Definitionslisten

Schriftfamilie

Die zusammengehörenden Formen einer Schrift, beispielsweise mit normalem, kursivem und fettem Schnitt.

Zeilenhöhe

Der vertikale Raum, den eine Textzeile einnimmt.

Ein zweiter Beschreibungseintrag zeigt den Abstand zwischen mehreren Erläuterungen zu demselben Begriff.

Zeilenlänge

Satzbreite

Zwei verwandte Begriffe mit einer gemeinsamen Erläuterung. Ein längerer Beschreibungstext zeigt, wie mehrzeilige Definitionen eingerückt und voneinander getrennt werden.

07 – Zitate und Pullquote

Klassisches HTML-Zitat

Ein Gedanke braucht Worte. Gute Typografie gibt ihnen Raum.

Dieser zweite Absatz zeigt die Abstände innerhalb eines mehrteiligen Zitats.

Fiktives Zitat aus «Notizen zur Typografie»

WordPress-Zitatblock

Ein Zitat darf auffallen und soll sich dennoch in den Lesefluss einfügen.

Hier lassen sich Einrückung, Schriftgrösse, mögliche Schmucklinien und der Abstand zur Quellenangabe vergleichen.

Fiktives Zitat für den WordPress-Block

WordPress-Pullquote

Dieser Absatz folgt auf das Zitat und zeigt den Übergang zurück zum normalen Fliesstext.

08 – Code, vorformatierter Text und Verse

Ein Codebeispiel im Satz: echo esc_html( $titel );. Es bleibt Teil der Zeile.

<?php
$titel = 'Grüezi & willkommen';

echo esc_html( $titel );
?>

Vorformatierter Text erhält Leerzeichen und Zeilenumbrüche.

Normaler Beginn
    Vier Leerzeichen Einzug
        Acht Leerzeichen Einzug

SehrLangeCodezeileOhneLeerzeichen_ABCDEFGHIJKLMNOPQRSTUVWXYZ_abcdefghijklmnopqrstuvwxyz_0123456789_ABCDEFGHIJKLMNOPQRSTUVWXYZ_abcdefghijklmnopqrstuvwxyz_0123456789

Ein Wort.
    Ein Zwischenraum.
Eine Zeile, die noch bleibt.

Und dann beginnt
ein neuer Gedanke.

09 – Tabellen, Beschriftungen und Zahlen

10 – Figure und Bildunterschrift

11 – WordPress-Schriftgrössen und Initiale

Die folgenden Absätze verwenden benannte WordPress-Presets. Ihre tatsächlichen Grössen ergeben sich aus den verfügbaren Vorgaben von WordPress und deinem Theme; ein Theme kann weitere oder andere Presets bereitstellen.

Klein (small) – Gute Typografie macht Texte lesbar.

Mittel (medium) – Gute Typografie macht Texte lesbar.

Gross (large) – Gute Typografie macht Texte lesbar.

Sehr gross (x-large) – Gute Typografie macht Texte lesbar.

Mit einer Initiale beginnt dieser Absatz. Der erste Buchstabe soll sich vom restlichen Text abheben, während die folgenden Zeilen einen zusammenhängenden Absatz bilden. Mehrere Sätze machen sichtbar, wie der vergrösserte Anfangsbuchstabe in den Textfluss eingebunden wird. Prüfe besonders den Abstand zur ersten Zeile sowie die Darstellung auf einem schmalen Bildschirm.

12 – Textausrichtung

Linksbündiger Text. Dieser Absatz ist etwas länger, damit seine Ausrichtung auch beim Umbruch auf mehrere Zeilen erkennbar bleibt.

Zentrierter Text. Dieser Absatz ist etwas länger, damit seine Ausrichtung auch beim Umbruch auf mehrere Zeilen erkennbar bleibt.

Rechtsbündiger Text. Dieser Absatz ist etwas länger, damit seine Ausrichtung auch beim Umbruch auf mehrere Zeilen erkennbar bleibt.

13 – WordPress-Buttons und Buttontexte

Vergleiche die Beschriftungen mit dem normalen Fliesstext und prüfe auch Hover und Tastaturfokus.

14 – Formulartexte und Bedienelemente

15 – Aufklappbarer Text

16 – Kontaktangaben, Datum und Metatext

Beispielbeitrag von Mara Muster · 22. September 2026 · 5 Minuten Lesezeit

17 – Lange Wörter und Umbruch

18 – Fussnote und Trennlinie

Dieser Beispielsatz besitzt einen manuell gesetzten Fussnotenverweis.¹ Prüfe dessen Grösse, Grundlinie und Abstand zum umgebenden Text.

1. Dies ist die zugehörige Fussnote mit etwas längerem Erläuterungstext. Sie zeigt Kleingedrucktes innerhalb einer Liste. Zurück zum Verweis ↑

Abschliessender Absatz nach einer Trennlinie. Vergleiche den Abstand nach oben mit den übrigen Abschnitten.

Zurück zum Anfang ↑

Wer das möglich macht

Sponsoren und Gönner 2026/27

Öffentliche Hand, Stiftungen und Betriebe aus dem Dorf — ohne sie gäbe es kein Programm.

Herzlichen Dank für die wertvolle Förderung unserer Kulturarbeit! Danke für den Rückhalt und die Unterstützung der Kultur im Dorf! Herzlichen Dank für euren Beitrag zu einem lebendigen Kulturprogramm! Danke, dass ihr kulturelle Begegnungen im Kaff möglich macht! Herzlichen Dank für die Unterstützung – und dafür, dass ihr dem Theater eine Bühne gebt! Danke für euer Engagement und eure Unterstützung für Kultur im Kaff!

Wir freuen uns über neue Partnerschaften. Partner werden