Stylepack

Fonts

The fonts apple.com uses

apple.com sets its headlines and body text in SF Pro Text. SF Pro Text is a system font: it ships with the operating system, nothing to load.

Measured from apple.com 4 days ago.

Open the full design packDownload the pack

Font families

2 families
SF Pro Text
Used for
h1, h3, label, button, body
Source
system
Free alternative
Already free
SF Pro Display
Used for
h2, body
Source
system
Free alternative
Already free

CSS to reproduce it

Font variables with the free stand-in in the stack, so the same CSS works with or without the licensed font.

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

How the type is set

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
Font sizes in use
1214172128344056

For AI agents

The pack is plain text, no key: fetch DESIGN.md, or hand the whole pack to Claude Code, Cursor or Copilot with the MCP server.

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

Questions

What font does apple.com use?

apple.com uses SF Pro Text, SF Pro Display. Headlines are set in SF Pro Text and body text in SF Pro Text, measured from the site as it renders, not read from its stylesheet.

Is the apple.com font free to use?

Yes. SF Pro Text, SF Pro Display can be used in your own site without buying a license: load it from Google Fonts, or rely on the system font where that is what apple.com uses.

How do I get the same typography as apple.com in my project?

Download the apple.com design pack from Stylepack: it holds the font stack, the type scale, every text style and the screenshots, in a form an AI coding agent such as Claude Code or Cursor can build from.