Font

Font yang dipakai apple.com

apple.com memakai SF Pro Text untuk judul dan teks isinya. SF Pro Text adalah font sistem: sudah ada di sistem operasi, tidak perlu dimuat.

Diukur dari apple.com 4 hari yang lalu.

Font family

2 font family
SF Pro Text
Dipakai untuk
h1, h3, label, button, body
Sumber
sistem
Alternatif gratis
Sudah gratis
SF Pro Display
Dipakai untuk
h2, body
Sumber
sistem
Alternatif gratis
Sudah gratis

CSS untuk menirunya

Variabel font dengan pengganti gratis di dalam stack, jadi CSS yang sama tetap bekerja dengan atau tanpa font berlisensinya.

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

Cara teksnya ditata

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
Ukuran font yang dipakai
1214172128344056

Untuk agen AI

Paket berupa teks biasa, tanpa kunci: ambil DESIGN.md, atau serahkan seluruh paket ke Claude Code, Cursor, atau Copilot lewat server MCP.

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

Pertanyaan

Font apa yang dipakai apple.com?

apple.com memakai SF Pro Text, SF Pro Display. Judul ditata dengan SF Pro Text dan teks isi dengan SF Pro Text, diukur dari situs saat dirender, bukan dibaca dari stylesheet-nya.

Apakah font apple.com gratis dipakai?

Ya. SF Pro Text, SF Pro Display bisa dipakai di situs Anda sendiri tanpa membeli lisensi: muat dari Google Fonts, atau andalkan font sistem bila itu yang dipakai apple.com.

Bagaimana cara mendapatkan tipografi yang sama seperti apple.com di proyek saya?

Unduh paket desain apple.com dari Stylepack: isinya font stack, skala tipografi, setiap gaya teks, dan screenshot, dalam bentuk yang bisa dijadikan acuan AI coding agent seperti Claude Code atau Cursor.