Typografie-Vorschau
Passen Sie Font-Size, Line-Height und Letter-Spacing live an.
Kopieren Sie das CSS mit einem Klick.
↑ Klicken Sie auf den Text, um ihn direkt zu bearbeiten
Über
Mit dem Typografie-Vorschau-Tool können Sie Schriftgröße, Zeilenhöhe, Buchstabenabstand und Schriftstärke mit Schiebereglern anpassen und das Ergebnis sofort in einer Live-Vorschau sehen.
Unterstützt Google Fonts (einschließlich japanischer Schriften). Sobald Sie mit den Einstellungen zufrieden sind, können Sie den generierten CSS-Code mit einem Klick kopieren. Lediglich das Laden der Google Fonts erfordert eine externe Netzwerkanfrage – Ihre Texteingaben und Einstellungen werden niemals übertragen.
Anleitung
Regler anpassen
Ziehen Sie die Schieberegler für Schriftgröße, Zeilenhöhe, Zeichenabstand und Schriftstärke. Oder beginnen Sie mit einer Vorlage für gängige Anwendungsfälle.
Vorschau prüfen
Sehen Sie Änderungen sofort im Vorschaubereich. Klicken Sie auf den Text, um ihn durch Ihren eigenen Inhalt zu ersetzen.
CSS kopieren
Klicken Sie auf "CSS kopieren", um den generierten Code in Ihre Zwischenablage zu kopieren und in Ihr Stylesheet einzufügen.
Glossar
- font-size
- Legt die Schriftgröße fest. Kann in px, em, rem, % usw. angegeben werden. Der Browser-Standardwert ist 16px.
- line-height
- Legt die Zeilenhöhe fest. Ein einheitloser Wert (z.B. 1.75) ist empfehlenswert. Für Fließtext ist 1.5–1.8 üblich.
- letter-spacing
- Legt den Abstand zwischen den Buchstaben fest. Für ein skalierbares Design werden em-Einheiten empfohlen.
- font-weight
- Legt die Schriftstärke (Dicke) fest. Werte reichen von 100 (sehr dünn) bis 900 (sehr fett).
- font-family
- Gibt die Schriftfamilie an. Es können mehrere Fallbacks durch Kommas getrennt aufgelistet werden.
- Typografie
- Die Kunst der Textgestaltung, um geschriebene Sprache lesbar, gut entzifferbar und ansprechend zu machen.
- Google Fonts
- Ein kostenloser Webfont-Dienst von Google. Schriften werden per CSS-Link geladen und via font-family zugewiesen.
- Web Font
- Eine Schriftart, die mit @font-face von einem Server geladen wird. Web-Fonts sorgen geräteübergreifend für eine einheitliche Darstellung.
FAQ
- Q.Wird mein Text an einen Server gesendet?
- Nein. Der Vorschautext und alle Einstellungen werden lokal in Ihrem Browser verarbeitet.
- Q.Warum erfordert das Laden von Google Fonts externe Anfragen?
- Lediglich die Schriftartendatei selbst wird von den Google-Servern heruntergeladen. Ihr Text und Ihre Einstellungen werden niemals übertragen.
- Q.Kann ich Schriftarten verwenden, die nicht in der Liste stehen?
- Sie können jeden Google Font in Ihre eigene Webseite einbinden, indem Sie seinen Namen bei font-family eintragen. Die in diesem Tool integrierte Liste deckt die beliebtesten Optionen für eine Vorschau ab.
- Q.Funktioniert es auf Mobilgeräten?
- Ja. Die Schieberegler unterstützen Touch-Eingaben stufenlos.
- Q.Kann ich genaue Werte eingeben, anstatt Regler zu verwenden?
- Nicht direkt. Nutzen Sie die Vorlagen für gängige Werte und nehmen Sie dann eine Feinabstimmung über die Regler vor.
Anwendungsfälle
Webdesign Typografie
Finden Sie visuell die richtige Kombination aus Schriftgröße und Zeilenhöhe für Überschriften, Fließtexte und Bildunterschriften.
Blog-Lesbarkeit optimieren
Stellen Sie die optimale Zeilenhöhe und den Zeichenabstand für lange Lese-Artikel ein.
Schriftkontrolle für Präsentationen
Überprüfen Sie vor der finalen Foliengestaltung, ob die Typografie bezüglich ihrer Größe stimmig ist.
CSS leicht lernen
Verstehen Sie durch visuelles Experimentieren sofort, wie sich jede einzelne CSS-Größeneigenschaft auswirkt.