Was ist Schriftgrößen-Tester?

Geben Sie beliebigen Text ein und sehen Sie ihn in allen Größen von 8px bis 96px. Wechseln Sie zwischen px, rem und pt, und passen Sie Zeilenhöhe und Zeichenabstand an, um Ihre Typografie zu perfektionieren.

Füge irgendeinen Satz ein und sieh ihn gleichzeitig in 14 Größen, von winzigen 8 px bis hin zu 96 px im Hero-Bereich. Wechsle die Einheit zwischen px, rem und pt; passe Zeilenhöhe und Buchstabenabstand in Echtzeit an. Praktisch, um genau zu sehen, ab wann Text unbequem wird, oder wie ein Button bei 14 px gegen 16 px aussieht, bevor das CSS angefasst wird.

Anleitung

1. Schritt 1 — Geben Sie den Text ein oder fügen Sie ihn ein, den Sie testen möchten.
2. Schritt 2 — Passen Sie den Größenbereich und die Einheit (px, rem oder pt) für die Vorschau an.
3. Schritt 3 — Vergleichen Sie alle Größen nebeneinander und wählen Sie die beste Option für Ihr Design.

Wann verwenden

• Schriftgröße für Navigationsbeschriftungen festlegen — lesbar, ohne die Leiste zu überladen.
• Fließtext bei 14 px und 16 px vergleichen, um eine Designteam-Debatte zu beenden.
• Pixel-Werte aus dem Design in rem umrechnen, damit die Seite die Schriftvorgaben des Nutzers respektiert.

Ergebnis

Test eines Navigationseintrags: „Dashboard" eingeben und bei 12px, 14px und 16px vergleichen, um die am besten lesbare Größe ohne Platzverschwendung zu finden.

Häufige Fragen

px, rem oder pt für Webschriften?

Für Fließtext und Komponenten ist rem die richtige Wahl: Es skaliert mit der vom Nutzer eingestellten Grundgröße, wichtig für Barrierefreiheit. Px bleibt sinnvoll für Rahmen oder sehr kleine Icons, die exakt bleiben sollen. Pt stammt aus dem Druck und gehört nicht auf den Bildschirm.

Welche Fließtextgröße ist sinnvoll?

16 px (1 rem) ist der De-facto-Standard für Absätze im Web. Auf 14 px nur für sekundären Text wie Bildunterschriften und Labels. Seiten, die ihren Haupttext unter 14 px ansetzen, fallen meist bei Accessibility-Audits durch und frustrieren Leser auf kleinen Displays.

Wie stark beeinflusst die Zeilenhöhe die Lesbarkeit?

Für Fließtext sind 1.4 bis 1.6 gute Werte. Enger wirkt es bedrängt, lockerer reißt der Rhythmus zwischen Absätzen. Überschriften vertragen engere Werte (rund 1.1 bis 1.2), da die Zeilen ohnehin kurz sind.

Wann passt man den Buchstabenabstand (Tracking) an?

Bei Versalien-Labels den Tracking leicht öffnen (ungefähr 0.05 em), weil das Standard-Kerning dort zu eng wirkt. Sehr große Display-Schlagzeilen leicht zusammenziehen (–0.01 bis –0.02 em). Fließtext bleibt unangetastet — der Schriftgestalter hat das schon erledigt.

Schreibt WCAG wirklich 16 px Mindestgröße vor?

WCAG legt keinen harten Mindestwert fest, verlangt aber, dass Text bis 200 % vergrößert werden kann, ohne dass das Layout bricht. In der Praxis genügt es, mit 16 px zu starten und relative Einheiten zu nutzen. Kleinere Voreinstellungen zwingen Nutzer zu zoomen, was die meisten nicht tun.

Ähnliche Tools