Stylepack

Schriften

Die Schriften von headspace.com

headspace.com setzt Überschriften und Fließtext in Headspace Apercu. Headspace Apercu ist eine lizenzierte Schrift, die die Seite selbst ausliefert. Die nächste freie Alternative auf Google Fonts: Figtree.

vor 4 Tagen auf headspace.com gemessen.

Ganzes Designpaket öffnenPaket herunterladen

Schriftfamilien

1 Schriftfamilie
Headspace Apercu
Verwendet für
h2, h3, body, label, button
Quelle
Selbst gehostet
Freie Alternative
Figtree

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: "Headspace Apercu", "Figtree", sans-serif; /* Figtree stands in for Headspace Apercu */
  --font-body: "Headspace Apercu", "Figtree", sans-serif; /* Figtree stands in for Headspace Apercu */
  --font-size-base: 20px;
}

So ist der Text gesetzt

headline-displayQuick brown foxHeadspace Apercu / 52px / 700 / lh 57.2px / -1.56px
headline-lgQuick brown foxHeadspace Apercu / 64px / 700 / lh 64px / -1.92px
headline-mdQuick brown foxHeadspace Apercu / 40px / 700 / lh 46px / -1.2px
body-mdThe quick brown fox jumps over the lazy dogHeadspace Apercu / 20px / 400 / lh 30px / -0.2px
label-mdThe quick brown fox jumps over the lazy dogHeadspace Apercu / 14px / 500 / lh 18px / -0.14px
buttonThe quick brown fox jumps over the lazy dogHeadspace Apercu / 18px / 700 / lh 21.6px / -0.54px
Verwendete Schriftgrößen
12141618202432406472

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/headspace.com/DESIGN.md

Fragen

Welche Schrift benutzt headspace.com?

headspace.com nutzt Headspace Apercu. Überschriften sind in Headspace Apercu gesetzt, Fließtext in Headspace Apercu, gemessen an der gerenderten Seite, nicht aus dem Stylesheet gelesen.

Ist die Schrift von headspace.com frei nutzbar?

Nein. Headspace Apercu ist eine lizenzierte Schrift, die headspace.com selbst ausliefert. Die nächste freie Alternative ist Figtree, verfügbar auf Google Fonts. Das CSS auf dieser Seite setzt sie als Ersatz in den Font-Stack.

Wie bekomme ich dieselbe Typografie wie headspace.com in mein Projekt?

Lade das Designpaket von headspace.com 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.