Jakiej czcionki używa github.com?

github.com używa Mona Sans, Mona Sans VF, Mona Sans Mono. Nagłówki są złożone w czcionce Mona Sans, a tekst w czcionce Mona Sans; zmierzono to na stronie tak, jak się renderuje, a nie odczytano z jej arkusza stylów.

Czy czcionka github.com jest darmowa?

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

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

Czcionki github.com

Rodziny czcionek

Czcionki: 3

CSS do odtworzenia

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

1:root {
2  --font-heading: "Mona Sans", "Inter", sans-serif; /* Inter stands in for Mona Sans */
3  --font-body: "Mona Sans", "Inter", sans-serif; /* Inter stands in for Mona Sans */
4  --font-button: "Mona Sans VF", "Inter", sans-serif; /* Inter stands in for Mona Sans VF */
5  --font-mono: "Mona Sans Mono", "Inter", monospace; /* Inter stands in for Mona Sans Mono */
6  --font-size-base: 18px;
7}

Jak składany jest tekst

headline-displayQuick brown foxMona Sans / 64px / 425 / lh 69.12px / -2.24px

headline-lgQuick brown foxMona Sans / 40px / 460 / lh 48px

headline-mdQuick brown foxMona Sans / 22px / 480 / lh 30.8px

body-mdThe quick brown fox jumps over the lazy dogMona Sans / 18px / 400 / lh 27px / 0.18px

label-mdThe quick brown fox jumps over the lazy dogMona Sans / 16px / 400 / lh 24px / 0.24px

buttonThe quick brown fox jumps over the lazy dogMona Sans / 16px / 500 / lh 24px / 0.24px

codeconst pack = extract(url)Mona Sans Mono / 11px / 400 / lh 10px / 0.21px

Używane rozmiary czcionek

111214161822244064

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

Czcionki, których używa github.com