Stylepack

Schriften

Die Schriften von duolingo.com

duolingo.com setzt Überschriften und Fließtext in duolingo-sans. duolingo-sans wird von der Seite selbst geladen. Die nächste freie Alternative auf Google Fonts: Inter.

vor 4 Tagen auf duolingo.com gemessen.

Ganzes Designpaket öffnenPaket herunterladen

Schriftfamilien

2 Schriftfamilien
duolingo-sans
Verwendet für
h1, body, button
Quelle
Ersatz Inter
Freie Alternative
Inter
feather
Verwendet für
h2
Quelle
Ersatz Inter
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-heading: "duolingo-sans", "Inter", sans-serif; /* Inter stands in for duolingo-sans */
  --font-body: "duolingo-sans", "Inter", sans-serif; /* Inter stands in for duolingo-sans */
  --font-size-base: 17px;
}

So ist der Text gesetzt

headline-displayQuick brown foxduolingo-sans / 32px / 700 / lh 1.4
headline-lgQuick brown foxfeather / 48px / 700 / lh 1.4
headline-mdQuick brown foxduolingo-sans / 24px / 400 / lh 1.4
body-mdThe quick brown fox jumps over the lazy dogduolingo-sans / 17px / 400 / lh 24px
label-mdThe quick brown fox jumps over the lazy dogduolingo-sans / 13px / 400 / lh 1.4
buttonThe quick brown fox jumps over the lazy dogduolingo-sans / 15px / 700 / lh 1.4 / 0.8px
Verwendete Schriftgrößen
15173248

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/duolingo.com/DESIGN.md

Fragen

Welche Schrift benutzt duolingo.com?

duolingo.com nutzt duolingo-sans, feather. Überschriften sind in duolingo-sans gesetzt, Fließtext in duolingo-sans, gemessen an der gerenderten Seite, nicht aus dem Stylesheet gelesen.

Ist die Schrift von duolingo.com frei nutzbar?

Nein. duolingo-sans ist eine lizenzierte Schrift, die duolingo.com 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 duolingo.com in mein Projekt?

Lade das Designpaket von duolingo.com 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.