Fonts

The fonts teenage.engineering uses

teenage.engineering sets its headlines and body text in te-20. te-20 is a licensed font the site serves itself. The closest free match on Google Fonts: Inter.

Measured from teenage.engineering 4 days ago.

Font families

1 family
te-20
Used for
body, button, label
Source
Self-hosted
Free alternative
Inter

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

How the type is set

headline-displayQuick brown foxte-20 / 48px / 100 / lh 1.4
headline-lgQuick brown foxte-20 / 32px / 100 / lh 1.4
headline-mdQuick brown foxte-20 / 24px / 100 / lh 1.4
body-mdThe quick brown fox jumps over the lazy dogte-20 / 19.102px / 100 / lh 22.0408px
label-mdThe quick brown fox jumps over the lazy dogte-20 / 16px / 300 / lh 24px
buttonThe quick brown fox jumps over the lazy dogte-20 / 16px / 100 / lh 1.5
Font sizes in use
161940

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/teenage.engineering/DESIGN.md

Questions

What font does teenage.engineering use?

teenage.engineering uses te-20. Headlines are set in te-20 and body text in te-20, measured from the site as it renders, not read from its stylesheet.

Is the teenage.engineering font free to use?

No. te-20 is a licensed font that teenage.engineering serves itself. The closest free match is Inter, 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 teenage.engineering in my project?

Download the teenage.engineering 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.