Stylepack

Schriften

Die Schriften von chatbase.co

chatbase.co setzt Überschriften und Fließtext in Geist. Geist ist eine lizenzierte Schrift, die die Seite selbst ausliefert. Die nächste freie Alternative auf Google Fonts: Geist, Inter.

vor 4 Tagen auf chatbase.co gemessen.

Ganzes Designpaket öffnenPaket herunterladen

Schriftfamilien

2 Schriftfamilien
Geist
Verwendet für
h1, h2, h3, body, button
Quelle
Selbst gehostet
Freie Alternative
Geist
Inter
Verwendet für
label
Quelle
Selbst gehostet
Freie Alternative
Inter

CSS zum Nachbauen

Schrift-Variablen mit der freien Alternative im Font-Stack, damit dasselbe CSS mit und ohne die lizenzierte Schrift funktioniert.

:root {
  --font-heading: "Geist", "Geist", sans-serif; /* Geist stands in for Geist */
  --font-body: "Geist", "Geist", sans-serif; /* Geist stands in for Geist */
  --font-size-base: 16px;
}

So ist der Text gesetzt

headline-displayQuick brown foxGeist / 64px / 500 / lh 70.4px / -2.56px
headline-lgQuick brown foxGeist / 48px / 500 / lh 52.8px / -0.96px
headline-mdQuick brown foxGeist / 32px / 500 / lh 41.6px / -0.64px
body-mdThe quick brown fox jumps over the lazy dogGeist / 16px / 500 / lh 24px / -0.32px
label-mdThe quick brown fox jumps over the lazy dogInter / 12px / 500 / lh 1.3 / -0.12px
buttonThe quick brown fox jumps over the lazy dogGeist / 16px / 500 / lh 24px / -0.32px
Verwendete Schriftgrößen
12141620324864

Für KI-Agenten

Das Paket ist reiner Text, ohne Key: hol dir DESIGN.md oder gib das ganze Paket per MCP-Server an Claude Code, Cursor oder Copilot.

curl -s https://stylepack.ai/packs/chatbase.co/DESIGN.md

Fragen

Welche Schrift benutzt chatbase.co?

chatbase.co nutzt Geist, Inter. Überschriften sind in Geist gesetzt, Fließtext in Geist, gemessen an der gerenderten Seite, nicht aus dem Stylesheet gelesen.

Ist die Schrift von chatbase.co frei nutzbar?

Nein. Geist ist eine lizenzierte Schrift, die chatbase.co selbst ausliefert. Die nächste freie Alternative ist Geist, Inter, verfügbar auf Google Fonts. Das CSS auf dieser Seite setzt sie als Ersatz in den Font-Stack.

Wie bekomme ich dieselbe Typografie wie chatbase.co in mein Projekt?

Lade das Designpaket von chatbase.co bei Stylepack herunter: Es enthält den Font-Stack, die Schriftskala, jeden Textstil und die Screenshots, in einer Form, aus der ein KI-Coding-Agent wie Claude Code oder Cursor bauen kann.