Stylepack

Schriften

Die Schriften von teenage.engineering

teenage.engineering setzt Überschriften und Fließtext in te-20. te-20 ist eine lizenzierte Schrift, die die Seite selbst ausliefert. Die nächste freie Alternative auf Google Fonts: Inter.

vor 4 Tagen auf teenage.engineering gemessen.

Ganzes Designpaket öffnenPaket herunterladen

Schriftfamilien

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

So ist der Text gesetzt

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
Verwendete Schriftgrößen
161940

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

Fragen

Welche Schrift benutzt teenage.engineering?

teenage.engineering nutzt te-20. Überschriften sind in te-20 gesetzt, Fließtext in te-20, gemessen an der gerenderten Seite, nicht aus dem Stylesheet gelesen.

Ist die Schrift von teenage.engineering frei nutzbar?

Nein. te-20 ist eine lizenzierte Schrift, die teenage.engineering selbst ausliefert. Die nächste freie Alternative ist 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 teenage.engineering in mein Projekt?

Lade das Designpaket von teenage.engineering 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.