Schriftgewicht-Vorschau

• Sofortige Gewichts-Vorschau: Zeige sofort alle verfügbaren Gewichte jeder Google Font nebeneinander. Unsere Schriftgewicht-Vorschau lädt die gewählte Schrift direkt von Google Fonts und rendert alle Gewichte - von Thin (100) bis Black (900) - in einer Ansicht, ohne Neuladen der Seite.
• Sichere Schriftgewicht-Vorschau online: Unsere Schriftgewicht-Vorschau läuft vollständig in deinem Browser. Die Schriften werden direkt vom Google-Fonts-CDN geladen - es werden keine Daten an einen Server gesendet und dein Vorschautext bleibt völlig privat auf deinem Gerät.
• Schriftgewicht-Vorschau ohne Installation: Nutze unsere Schriftgewicht-Vorschau direkt in jedem Browser, ohne Downloads, Plugins oder Konto. Zeige die Gewichte jeder Google Font von jedem Gerät aus, überall, völlig kostenlos.
• Mehrere Anzeigemodi: Wähle zwischen Gestapelt (Zeilen in voller Größe), Kompakt (kleinere Zeilen für den schnellen Vergleich) oder Vergleich. Filtere auf nur verfügbare Gewichte, stelle die Vorschaugröße von 14 px bis 48 px ein und kopiere die CSS-font-weight-Deklaration jedes Gewichts mit einem Klick.

• Das richtige Schriftgewicht für die UI wählen: Nutze unsere Schriftgewicht-Vorschau, um zu vergleichen, wie eine Schrift in verschiedenen Gewichten wirkt, bevor du sie in deinem Designsystem festlegst. Sieh, ob 500 oder 600 besser für deine Überschriften passt oder ob 300 für den Fließtext in der Zielgröße zu leicht ist.
• Typografische Skala entwerfen: Entwirf eine vollständige typografische Skala, indem du das Zusammenspiel der Gewichte vorab siehst. Unsere Schriftgewicht-Vorschau zeigt alle Gewichte nebeneinander, damit du die richtige Kombination für Überschriften, Unterüberschriften, Fließtext und Bildunterschriften wählst.
• Schriftpaarungen recherchieren: Recherchiere Schriftpaarungen, indem du den Gewichtsbereich jeder Kandidatin vorab siehst. Manche Schriften haben begrenzten Gewichtsumfang - unsere Schriftgewicht-Vorschau zeigt klar, welche Gewichte verfügbar sind und welche nicht, sodass du Lücken nicht erst nach der Umsetzung entdeckst.
• Barrierefreiheits- und Lesbarkeitstests: Teste die Lesbarkeit von Schriftgewichten in verschiedenen Größen. Mit unserer Schriftgewicht-Vorschau kannst du die Vorschaugröße von 14 px bis 48 px anpassen und gleichzeitig alle Gewichte vergleichen, um zu prüfen, ob das gewählte Gewicht in kleinen Größen für Fließtext gut lesbar ist.
• CSS-font-weight-Referenz: Nutze unsere Schriftgewicht-Vorschau als schnelle Referenz beim Schreiben von CSS. Jede Gewichtskarte zeigt den numerischen Wert und den Namen (Thin, Light, Regular, Medium, Bold usw.) mit Ein-Klick-Kopieren der CSS-font-weight-Deklaration.
• Kundenpräsentationen und Design-Reviews: Zeige Kunden bei Design-Reviews den gesamten Gewichtsbereich einer vorgeschlagenen Schrift. Unsere Schriftgewicht-Vorschau rendert die Schrift mit dem echten Markentext des Kunden, sodass sich leicht zeigen lässt, wie sie in verschiedenen UI-Kontexten wirkt.

Eine Schriftgewicht-Vorschau zeigt alle verfügbaren Gewichtsvarianten einer Schrift nebeneinander - von Thin (100) bis Black (900) -, damit du sie visuell vergleichen kannst, bevor du entscheidest, welche Gewichte du in dein Projekt aufnimmst. Nicht jede Schrift unterstützt alle neun Gewichte; unsere Schriftgewicht-Vorschau zeigt klar, welche Gewichte bei jeder Google Font verfügbar sind, und graut nicht verfügbare aus. Alle Schriften werden direkt vom Google-Fonts-CDN geladen - es werden keine Daten an einen Server gesendet und dein Vorschautext bleibt privat auf deinem Gerät.

1. Schrift auswählen: Suche im Suchfeld nach einer Google Font. Die Schriftgewicht-Vorschau zeigt alle über 80 verfügbaren Schriften mit Kategorie und Anzahl der Gewichte. Klicke auf eine Schrift, um sie sofort zu laden.
2. Alle Gewichte ansehen: Die Schriftgewicht-Vorschau rendert alle Gewichte (100-900) nebeneinander mit deinem eigenen Vorschautext. Verfügbare Gewichte werden vollständig gezeigt, nicht verfügbare ausgegraut. Aktiviere „Nur verfügbare“, um nicht verfügbare auszublenden.
3. Kopieren und verwenden: Klicke auf das Kopiersymbol einer beliebigen Gewichtskarte, um die CSS-font-weight-Deklaration zu kopieren. Der CSS-Referenzbereich unten liefert die Google-Fonts-@import-URL und alle verfügbaren font-weight-Werte, bereit zum Einfügen in dein Stylesheet.

• 100 - Thin: das leichteste Gewicht. Sparsam einsetzen, nur für große Display-Texte - zu leicht für Fließtext in kleinen Größen.
• 300 - Light: etwas leichter als Regular. Eignet sich für Unterüberschriften und Sekundärtexte, wenn Überschriften ein schwereres Gewicht erhalten.
• 400 - Regular: das Standardgewicht. Die übliche Wahl für Fließtext und die Basis der meisten typografischen Skalen.
• 700 - Bold: das übliche Fettgewicht. Wird für Überschriften, Betonungen und UI-Labels verwendet. Das am häufigsten genutzte Gewicht nach Regular.

Jedes Gewicht, das du von Google Fonts lädst, erhöht die Netzwerkanfragen deiner Seite und die Gesamtgröße der Schriftdateien. Für die meisten Projekte reichen 2-3 Gewichte - typischerweise Regular (400), Medium oder SemiBold (500-600) für UI-Labels und Bold (700) für Überschriften. Vermeide Gewichte, die du nicht nutzt. Unsere Schriftgewicht-Vorschau hilft dir, genau festzustellen, welche Gewichte du brauchst, bevor du sie deiner Google-Fonts-Import-URL hinzufügst, und verhindert so unnötiges Laden von Gewichten, das deine Seite langsamer macht.