📐 Assets: Standards: Typography


Steve Jobs–Like Typography


---

🎯 Purpose

•Consistent typography across all platforms
•Mobile-first design
•Readability first
•Minimal font scale
•Consistent hierarchy
•Accessible by default

---

📱 Platforms


Mobile

•Single-column layout
•Minimum body text: 20px
•Large body: 30px
•Feature text: 40px
•H1/H2 defined separately

Desktop

•Small text: 12px
•Body text: 17px
•Large body: 30px
•H1/H2 defined separately

TV

•Dedicated typography scale
•Increased text size for viewing distance
•Same typography roles as Mobile/Desktop
•H1/H2 defined separately
•Conforming to Desktop font-sizing adaptive screen

---

📖 Typography Roles

•H1
•H2
•Section Title
•Body
•Large Body
•Feature Text
•Caption
•Metadata
•Label
•Button
•Navigation
•Form Label
•Helper Text
•Error Text

---

⚖️ Font Weight

•Regular — Body
•Medium — Emphasis
•Semibold — Labels & Actions
•Bold — Critical Information

---

📏 Line Height


Define for every text role.

Objectives:
•Readability
•Consistency
•Vertical rhythm
•Accessibility

---

↔️ Letter Spacing


Apply only where required.

Typical use:
•Headings
•Feature text
•Uppercase labels
•Buttons

Avoid modifying body text.

---

📐 Alignment


Default:
•Left aligned

Exceptions:
•Hero content
•Empty states
•Short feature statements

Do not centre long-form content.

---

🧩 Component Alignment


Typography aligns with:
•Grid
•Cards
•Buttons
•Forms
•Lists
•Tables
•Images
•Icons
•Navigation

---

📦 Spacing


Maintain consistent spacing between:
•Heading → Body
•Paragraph → Paragraph
•Text → Button
•Text → Image
•Label → Input
•Input → Helper Text
•Helper → Error
•Section → Section

---

📱 Mobile-First Principles

•Single-column layout
•Vertical reading flow
•Readability before density
•Larger minimum body text
•Consistent scrolling experience

---

🔄 Cross-Platform Continuity


Maintain:
•Reading order
•Typography roles
•Section hierarchy
•Navigation structure
•Content relationships

Adapt:
•Font size
•Spacing
•Layout width
•Component dimensions

---

📖 Reading Width


Mobile

•Single-column
•Natural line length

Desktop

•Flexible layout
•Controlled content width

TV

•Larger text
•Shorter lines
•Greater spacing

---

🎨 Text Colours

•Primary
•Secondary
•Muted
•Disabled
•Interactive
•Success
•Warning
•Error

---

♿ Accessibility

•Minimum font sizes
•Contrast compliance
•Consistent hierarchy
•Readable line lengths
•Keyboard/focus visibility
•TV viewing distance support

---

🍎 Steve Jobs–Like Principles

•Simplicity over complexity
•Every size has a purpose
•Every role has a definition
•Reduce unnecessary variation
•Maintain consistency
•Preserve continuity across devices
•Let content lead design