Czcionki

Czcionki, których używa monzo.com

monzo.com składa nagłówki w czcionce MonzoSansDisplay, a tekst w czcionce MonzoSansText. MonzoSansDisplay to licencjonowana czcionka, którą strona serwuje sama. Najbliższy darmowy zamiennik z Google Fonts: Inter.

Zmierzono na monzo.com 4 dni temu.

Rodziny czcionek

Czcionki: 2
MonzoSansDisplay
Użycie
h1, h2, h3
Źródło
Własny hosting
Darmowy zamiennik
Inter
MonzoSansText
Użycie
body, label, button
Ź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-heading: "MonzoSansDisplay", "Inter", sans-serif; /* Inter stands in for MonzoSansDisplay */
  --font-body: "MonzoSansText", "Inter", sans-serif; /* Inter stands in for MonzoSansText */
  --font-size-base: 16px;
}

Jak składany jest tekst

headline-displayQuick brown foxMonzoSansDisplay / 48.8288px / 800 / lh 58.5946px
headline-lgQuick brown foxMonzoSansDisplay / 39.0624px / 800 / lh 46.8749px
headline-mdQuick brown foxMonzoSansDisplay / 25px / 700 / lh 35px
body-mdThe quick brown fox jumps over the lazy dogMonzoSansText / 16px / 400 / lh 22.4px
label-mdThe quick brown fox jumps over the lazy dogMonzoSansText / 12.8px / 400 / lh 17.92px
buttonThe quick brown fox jumps over the lazy dogMonzoSansText / 16px / 400 / lh 22.4px
Używane rozmiary czcionek
1316202531394449

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

Pytania

Jakiej czcionki używa monzo.com?

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

Czy czcionka monzo.com jest darmowa?

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

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