Stylepack

Czcionki

Czcionki, których używa apple.com

apple.com składa nagłówki i tekst w czcionce SF Pro Text. SF Pro Text to czcionka systemowa: jest w systemie operacyjnym, nie trzeba jej ładować.

Zmierzono na apple.com 4 dni temu.

Otwórz pełny pakiet designuPobierz pakiet

Rodziny czcionek

Czcionki: 2
SF Pro Text
Użycie
h1, h3, label, button, body
Źródło
systemowa
Darmowy zamiennik
Już darmowa
SF Pro Display
Użycie
h2, body
Źródło
systemowa
Darmowy zamiennik
Już darmowa

CSS do odtworzenia

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

fonts.css
:root {
  --font-heading: "SF Pro Text", sans-serif;
  --font-body: "SF Pro Text", sans-serif;
  --font-size-base: 12px;
}

Jak składany jest tekst

headline-displayQuick brown foxSF Pro Text / 34px / 600 / lh 50px / -0.374px
headline-lgQuick brown foxSF Pro Display / 56px / 600 / lh 60px / -0.28px
headline-mdQuick brown foxSF Pro Text / 12px / 600 / lh 16.0005px / -0.12px
body-mdThe quick brown fox jumps over the lazy dogSF Pro Text / 12px / 400 / lh 16.0005px / -0.12px
label-mdThe quick brown fox jumps over the lazy dogSF Pro Text / 12px / 400 / lh 1.33 / -0.12px
buttonThe quick brown fox jumps over the lazy dogSF Pro Text / 14px / 400 / lh 1.29 / -0.224px
Używane rozmiary czcionek
1214172128344056

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

Pytania

Jakiej czcionki używa apple.com?

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

Czy czcionka apple.com jest darmowa?

Tak. SF Pro Text, SF Pro Display możesz użyć na własnej stronie bez kupowania licencji: załaduj ją z Google Fonts albo oprzyj się na czcionce systemowej tam, gdzie tak robi apple.com.

Jak uzyskać w projekcie taką samą typografię jak apple.com?

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