Stylepack

Czcionki

Czcionki, których używa teenage.engineering

teenage.engineering składa nagłówki i tekst w czcionce te-20. te-20 to licencjonowana czcionka, którą strona serwuje sama. Najbliższy darmowy zamiennik z Google Fonts: Inter.

Zmierzono na teenage.engineering 4 dni temu.

Otwórz pełny pakiet designuPobierz pakiet

Rodziny czcionek

Czcionki: 1
te-20
Użycie
body, button, label
Źródło
Własny hosting
Darmowy zamiennik
Inter

CSS do odtworzenia

Zmienne czcionek z darmowym zamiennikiem w stosie, więc ten sam CSS działa z licencjonowaną czcionką i bez niej.

:root {
  --font-body: "te-20", "Inter", sans-serif; /* Inter stands in for te-20 */
  --font-size-base: 19.102px;
}

Jak składany jest tekst

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
Używane rozmiary czcionek
161940

Dla agentów AI

Pakiet to zwykły tekst, bez klucza: pobierz DESIGN.md albo przekaż cały pakiet do Claude Code, Cursor lub Copilot przez serwer MCP.

curl -s https://stylepack.ai/packs/teenage.engineering/DESIGN.md

Pytania

Jakiej czcionki używa teenage.engineering?

teenage.engineering używa te-20. Nagłówki są złożone w czcionce te-20, a tekst w czcionce te-20; zmierzono to na stronie tak, jak się renderuje, a nie odczytano z jej arkusza stylów.

Czy czcionka teenage.engineering jest darmowa?

Nie. te-20 to licencjonowana czcionka, którą teenage.engineering serwuje sam. Najbliższy darmowy zamiennik to Inter, dostępny w Google Fonts. CSS na tej stronie wstawia go do stosu czcionek jako zastępstwo.

Jak uzyskać w projekcie taką samą typografię jak teenage.engineering?

Pobierz pakiet designu teenage.engineering ze Stylepack: zawiera stos czcionek, skalę typograficzną, każdy styl tekstu i zrzuty ekranu w formie, z której agent AI do kodowania, taki jak Claude Code czy Cursor, może budować.