Stylepack

Fonts

The fonts headspace.com uses

headspace.com sets its headlines and body text in Headspace Apercu. Headspace Apercu is a licensed font the site serves itself. The closest free match on Google Fonts: Figtree.

Measured from headspace.com 4 days ago.

Open the full design packDownload the pack

Font families

1 family
Headspace Apercu
Used for
h2, h3, body, label, button
Source
Self-hosted
Free alternative
Figtree

CSS to reproduce it

Font variables with the free stand-in in the stack, so the same CSS works with or without the licensed font.

: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;
}

How the type is set

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
Font sizes in use
12141618202432406472

For AI agents

The pack is plain text, no key: fetch DESIGN.md, or hand the whole pack to Claude Code, Cursor or Copilot with the MCP server.

curl -s https://stylepack.ai/packs/headspace.com/DESIGN.md

Questions

What font does headspace.com use?

headspace.com uses Headspace Apercu. Headlines are set in Headspace Apercu and body text in Headspace Apercu, measured from the site as it renders, not read from its stylesheet.

Is the headspace.com font free to use?

No. Headspace Apercu is a licensed font that headspace.com serves itself. The closest free match is Figtree, available on Google Fonts. The CSS on this page puts it in the font stack as the stand-in.

How do I get the same typography as headspace.com in my project?

Download the headspace.com design pack from Stylepack: it holds the font stack, the type scale, every text style and the screenshots, in a form an AI coding agent such as Claude Code or Cursor can build from.