Stylepack

Czcionki

Czcionki, których używa mercury.com

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

Zmierzono na mercury.com 4 dni temu.

Otwórz pełny pakiet designuPobierz pakiet

Rodziny czcionek

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

Jak składany jest tekst

headline-displayQuick brown foxarcadiaDisplay / 49.3472px / 480 / lh 54.2819px
headline-lgQuick brown foxarcadiaDisplay / 28px / 480 / lh 33.6px / 0.42px
headline-mdQuick brown foxarcadia / 24px / 400 / lh 1.4
body-mdThe quick brown fox jumps over the lazy dogarcadia / 12px / 400 / lh 16.8px / 0.24px
label-mdThe quick brown fox jumps over the lazy dogarcadia / 16px / 400 / lh 24px
buttonThe quick brown fox jumps over the lazy dogarcadia / 16px / 480 / lh 21.6px
Używane rozmiary czcionek
121618284249

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

Pytania

Jakiej czcionki używa mercury.com?

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

Czy czcionka mercury.com jest darmowa?

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

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