Was ist Typografie-Tester?

Der Typografie-Tester lässt dich Schrifteigenschaften in Echtzeit anpassen und das Ergebnis sofort sehen. Wähle eine Schriftfamilie, stelle Größe, Stärke, Zeilenhöhe und Abstände ein und kopiere das CSS direkt in dein Projekt.

Mit dem Tester stellst du Schriftfamilie, Größe, Gewicht (100 bis 900), Zeilenhöhe, Buchstaben- und Wortabstand, Ausrichtung, Texttransformation und Farbe ein. Der Beispieltext lässt sich frei bearbeiten, sodass du echte Überschriften oder Absätze testest, und das CSS-Panel landet per Klick in einer Stylesheet-Datei oder einer styled component.

Anleitung

1. Gib deinen Beispieltext in den Vorschaubereich ein oder füge ihn ein.
2. Passe die Typografie-Einstellungen an: Schriftfamilie, Größe, Stärke, Zeilenhöhe, Buchstaben- und Wortabstand.
3. Kopiere die CSS-Ausgabe, um die Typografieeinstellungen direkt in deinem Projekt zu verwenden.

Wann verwenden

• Den Bloglauftext feinjustieren, bis Inter 18 px mit Zeilenhöhe 1,6 sich auf dem Handy gemütlich liest.
• Einen langen Artikel in 16, 17 und 18 px durchgehen, um die Größe zu finden, die Leser dranbleiben lässt.
• Prüfen, ob mehr Buchstabenabstand das gedrängte Aussehen eines Buttons in Großbuchstaben behebt.

Ergebnis

Ein Webdesigner testet Inter mit 18px, Zeilenhöhe 1,6 und Buchstabenabstand 0,02em und kopiert anschließend das CSS für sein Blog-Stylesheet.

Häufige Fragen

Welche Zeilenhöhe passt zu Fließtext?

Bei langen Absätzen in 16 bis 18 px liest sich eine Zeilenhöhe zwischen 1,5 und 1,7 angenehm am Bildschirm. Überschriften wirken mit engeren Werten zwischen 1,1 und 1,3 besser. Tippe Überschrift und Absatz ins Beispielfeld, um beides direkt zu vergleichen.

Warum nutzt der Buchstabenabstand em statt px?

Em skaliert mit der Schriftgröße, also wirkt 0,02 em bei 14 px wie bei 48 px proportional gleich. Ein Pixelwert passt nur in einer Größe und kippt in den anderen aus der Proportion.

Welche Schriftgewichte sind im Web sicher?

Moderne Google Fonts und variable Schriften decken 100 bis 900 ab, viele selbst gehostete Schriften liefern aber nur 400 und 700. Bewegt sich die Vorschau beim Gewichtswechsel nicht, fehlt der Schrift dieser Schnitt und der Browser ersetzt ihn durch eine synthetische Variante.

Kann ich Schriften testen, die die Seite nicht vorab geladen hat?

Wähl aus dem eingebauten Schriftmenü — es hat ein Suchfeld und Filter für Serifenlos / Serif / Monospace / System, und jede gewählte Google Font lädt von selbst. Wechsel zur Galerie-Ansicht, um deinen Beispieltext in allen Schriften auf einmal zu sehen, oder schalte Vergleichen ein, um zwei Schnitte nebeneinanderzustellen. Eine eigene Schriftdatei hochladen geht hier nicht; dafür brauchst du @font-face in deiner Site.

Wie bringe ich das CSS in ein React- oder Tailwind-Projekt?

Mit CSS kopieren erhältst du jede Eigenschaft als reguläre Deklaration. In React fügst du sie in ein styled-components Template Literal ein oder wandelst jede Zeile in einen camelCase-Schlüssel. In Tailwind mappst du Größe und Gewicht auf Utility-Klassen und behältst eigene Letter- und Line-Heights über die Arbitrary-Value-Syntax.

Ähnliche Tools