Stylepack

Schriften

Die Schriften von apple.com

apple.com setzt Überschriften und Fließtext in SF Pro Text. SF Pro Text ist eine Systemschrift: Sie kommt mit dem Betriebssystem, nichts zu laden.

vor 4 Tagen auf apple.com gemessen.

Ganzes Designpaket öffnenPaket herunterladen

Schriftfamilien

2 Schriftfamilien
SF Pro Text
Verwendet für
h1, h3, label, button, body
Quelle
System
Freie Alternative
Bereits frei
SF Pro Display
Verwendet für
h2, body
Quelle
System
Freie Alternative
Bereits frei

CSS zum Nachbauen

Schrift-Variablen mit der freien Alternative im Font-Stack, damit dasselbe CSS mit und ohne die lizenzierte Schrift funktioniert.

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

So ist der Text gesetzt

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
Verwendete Schriftgrößen
1214172128344056

Für KI-Agenten

Das Paket ist reiner Text, ohne Key: hol dir DESIGN.md oder gib das ganze Paket per MCP-Server an Claude Code, Cursor oder Copilot.

curl -s https://stylepack.ai/packs/apple.com/DESIGN.md

Fragen

Welche Schrift benutzt apple.com?

apple.com nutzt SF Pro Text, SF Pro Display. Überschriften sind in SF Pro Text gesetzt, Fließtext in SF Pro Text, gemessen an der gerenderten Seite, nicht aus dem Stylesheet gelesen.

Ist die Schrift von apple.com frei nutzbar?

Ja. SF Pro Text, SF Pro Display kannst du auf deiner eigenen Seite ohne Lizenzkauf verwenden: Lade sie von Google Fonts oder nutze die Systemschrift, wo apple.com das tut.

Wie bekomme ich dieselbe Typografie wie apple.com in mein Projekt?

Lade das Designpaket von apple.com bei Stylepack herunter: Es enthält den Font-Stack, die Schriftskala, jeden Textstil und die Screenshots, in einer Form, aus der ein KI-Coding-Agent wie Claude Code oder Cursor bauen kann.