Stylepack

Czcionki

Czcionki, których używa duolingo.com

duolingo.com składa nagłówki i tekst w czcionce duolingo-sans. duolingo-sans jest ładowana przez samą stronę. Najbliższy darmowy zamiennik z Google Fonts: Inter.

Zmierzono na duolingo.com 4 dni temu.

Otwórz pełny pakiet designuPobierz pakiet

Rodziny czcionek

Czcionki: 2
duolingo-sans
Użycie
h1, body, button
Źródło
zamiennik Inter
Darmowy zamiennik
Inter
feather
Użycie
h2
Źródło
zamiennik Inter
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-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;
}

Jak składany jest tekst

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

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

Pytania

Jakiej czcionki używa duolingo.com?

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

Czy czcionka duolingo.com jest darmowa?

Nie. duolingo-sans to licencjonowana czcionka, którą duolingo.com 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 duolingo.com?

Pobierz pakiet designu duolingo.com 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ć.