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- 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
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.mdQuestions
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.