Czcionki

Czcionki, których używa dropbox.com

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

Zmierzono na dropbox.com 4 dni temu.

Rodziny czcionek

Czcionki: 3
Sharp Grotesk
Użycie
h1, h3
Źródło
Własny hosting
Darmowy zamiennik
Inter
Sharp Grotesk 23
Użycie
h2
Źródło
Własny hosting
Darmowy zamiennik
Inter
Atlas Grotesk Web
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: "Sharp Grotesk", "Inter", sans-serif; /* Inter stands in for Sharp Grotesk */
  --font-body: "Atlas Grotesk Web", "Inter", sans-serif; /* Inter stands in for Atlas Grotesk Web */
  --font-size-base: 16px;
}

Jak składany jest tekst

headline-displayQuick brown foxSharp Grotesk / 40px / 500 / lh 48px
headline-lgQuick brown foxSharp Grotesk 23 / 32px / 400 / lh 38.4px
headline-mdQuick brown foxSharp Grotesk / 18px / 500 / lh 21.6px
body-mdThe quick brown fox jumps over the lazy dogAtlas Grotesk Web / 16px / 400 / lh 24px
label-mdThe quick brown fox jumps over the lazy dogAtlas Grotesk Web / 12px / 700 / lh 1.2
buttonThe quick brown fox jumps over the lazy dogAtlas Grotesk Web / 16px / 500 / lh 19.2px
Używane rozmiary czcionek
1214161820263240

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

Pytania

Jakiej czcionki używa dropbox.com?

dropbox.com używa Sharp Grotesk, Sharp Grotesk 23, Atlas Grotesk Web. Nagłówki są złożone w czcionce Sharp Grotesk, a tekst w czcionce Atlas Grotesk Web; zmierzono to na stronie tak, jak się renderuje, a nie odczytano z jej arkusza stylów.

Czy czcionka dropbox.com jest darmowa?

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

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