|

Our Philosophy: Type That Speaks

In Play+, typography is not just a utilitarian necessity — it is a performance. Our type system expresses both our Distinct and Intuitive pillars. It speaks with clarity, rhythm, and character, enabling content to feel as natural as a conversation.

Typography in Play+ doesn't just organize content — it performs. With intention, rhythm, and voice, our type choices transform interfaces into fluent, brand-native conversations.

Core Principles of Typography

Principle	Design Guideline	Developer Implementation
Hierarchical	Use a consistent type scale to guide the user through content.	Use semantic HTML tags (h1-h6). Map to $font-heading-* tokens. Never skip heading levels.
Readable	Body text must be legible in long-form, with optimal font size, line height, and line length.	Use $font-body-1. Limit width using $content-line-measure (~75ch).
Expressive	Typography must reflect brand personality while staying clean and confident.	Use web fonts with font-display: swap; to avoid render-blocking.
Adaptive	Type scale should adapt fluidly across breakpoints and screens.	Use rem units and clamp() for scalable text.

Our Typeface System: The Trio of Roles

Aa

PP Neue MachinaFamily : DisplayRole : Hero titles, marketing headlinesCharacter : Technical, futuristic, bold

Why

It has the soul of our belief system — mechanical yet human, confident yet clean. Great for expressive, attention-grabbing design moments.

Alternatives

• Whyte Inktrap
• Monument Extended
• Scto Grotesk A Extended

Rules

• Sizes > 48px only
• Do not use for body or functional text
• Use sparingly to maintain impact

Aa

MulishFamily : HeadingRole : Interface headings (H1-H6), subtitlesCharacter : Geometric, soft-rounded, friendly

Why

Mulish is approachable yet structured. It allows scalable hierarchies without being overly stylized, balancing professional clarity with personality.

Alternatives

• IBM Plex Sans
• Satoshi
• Outfit

Rules

• Use for all headings (mapped via $font-heading-*)
• Scales well for both desktop and mobile

Aa

InterFamily : BodyRole : Paragraphs, buttons, forms, captions, body textCharacter : Neutral, legible, modern UI-native

Why

Inter is the invisible backbone — designed for legibility at small sizes with excellent language support and hinting. It excels on digital screens.

Alternatives

• Roboto
• Manrope
• Source Sans Pro

Rules

• Default font for anything that isn't a heading
• Optimized for 14px-16px sizes and clear spacing

The Typographic Scale

All based on a root font size of 16px

Token Name / Role	Font Family	Weight	Size	Line Height
Hero Title	PP Neue Machina	Bold	3.75rem / 60px	1.2
Heading 1	Mulish	Bold	3rem / 48px	1.2
Heading 2	Mulish	Bold	2.25rem / 36px	1.25
Heading 3	Mulish	Semibold	1.875rem / 30px	1.3
Subtitle	Mulish	Regular	1.5rem / 24px	1.4
Body Text	Inter	Regular	1rem / 16px	1.5
Small Body	Inter	Regular	0.875rem / 14px	1.5
Label / Button	Inter	Medium	0.875rem / 14px	1.2
Caption	Inter	Regular	0.75rem / 12px	1.3

[Illustration placeholder: Typographic Scale Ladder — Live visual of each level from Hero to Caption]

## Platform-Specific Implementation

WebUse "rem"

iOSUse "pt"

AndroidUse "sp"

Spacing Rules:

• Vertical spacing should derive from the element's line-height.

• Use $space tokens for consistent inter-block rhythm.

Hierarchy Enforcement:

• Never use a heading token on non-heading semantic elements (e.g., don't use $font-heading-h3 in a <p>).
• Create utility styles when needed for similar looks without breaking semantics.

Customizing the Typography

We believe in metamorphic design. Swap tokens, keep structure.

// Define custom fonts
$my-brand-serif: "Georgia", serif;
$my-brand-sans: "Helvetica Neue", sans-serif;

// Override Play+ tokens
$font-family-heading: $my-brand-serif;
$font-family-body: $my-brand-sans;

Guidelines for Customization:

• Choose fonts with full weight families (Regular, Medium, Semibold, Bold)
• Test across breakpoints to ensure legibility and tonal match

[Illustration placeholder: Token Mapping Diagram — Show how $font-family-body, etc., connect to fallback chains]

Typography in Motion

Typography should feel alive, not static.

Recommendations:

• Fade-in or upward rise on heading reveal
• Labels animate upward on input focus
• Smooth resizing on screen transitions using clamp()

[Illustration placeholder: Typography Motion in UI (e.g., form label rise, header transition)]

Component-Level Typography Map

Component	Role	Token Used	Font
Button	Label	$font-label	Inter
Modal Title	Heading 2	$font-heading-h2	Mulish
Input Label	Caption	$font-caption	Inter
Card Title	Heading 3	$font-heading-h3	Mulish
Card Body	Body Text	$font-body-1	Inter
Toast Message	Small Body	$font-body-2	Inter
Hero Section	Hero Title	$font-display	PP Neue Machina

Typography Quick Guide

Do's :

• Use heading tags correctly and in order
• Keep line length to ~75 characters
• Use semantic tokens, not raw styles
• Choose expressive fonts for brand, neutral for function

Don't :

• Skip heading levels (h1 → h3)
• Apply heading tokens to non-headings
• Use more than 2-3 fonts per interface
• Rely on pixel values over tokens

---

This is the voice of your product. Let it be bold, legible, and beautifully yours.