📐 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
Read More
COMMUNITY
People