Typography
Typography
Overview
Typography communicates personality before a single word is read. The DroidBuilders type system balances technical precision with warmth -- sharp enough to signal craft and expertise, readable enough for every audience from children to convention crowds.
All typefaces in this system are available from Google Fonts at no cost and are compatible with WordPress, Avada, print production, and common design software.
Primary Typefaces
Display / Hero: Exo 2
Character: Technical, forward-looking, structured -- perfect for headlines and hero statements.
Weights in use: ExtraBold (800) for hero headlines and section titles; Bold (700) for primary headlines and event titles; SemiBold (600) for subheadings and callouts.
Google Fonts: fonts.google.com/specimen/Exo+2
Body / Primary Text: Source Sans 3
Character: Clean, neutral, highly legible at any size -- built for screen and print.
Weights in use: Regular (400) for body copy; SemiBold (600) for inline emphasis, UI labels, and buttons; Light (300) for captions in spacious layouts.
Google Fonts: fonts.google.com/specimen/Source+Sans+3
Accent / Technical: Rajdhani
Character: Condensed, geometric, slightly futuristic -- ideal for labels, badges, metadata, and technical callouts.
Weights in use: SemiBold (600) for labels and callouts; Bold (700) for badges, event codes, and sector identifiers.
Google Fonts: fonts.google.com/specimen/Rajdhani
Type Hierarchy
Applies to digital (web) applications. Scale print proportionally to output format and viewing distance.
| Level | Typeface | Weight | Desktop | Mobile | Color (Dark Theme) |
|---|---|---|---|---|---|
| Hero Headline | Exo 2 | ExtraBold 800 | 56-72px | 36-48px | White #FFFFFF
|
| H1 -- Page Title | Exo 2 | Bold 700 | 40-48px | 28-36px | White #FFFFFF
|
| H2 -- Section Header | Exo 2 | Bold 700 | 28-32px | 22-26px | White #FFFFFF
|
| H3 -- Subsection | Exo 2 | SemiBold 600 | 20-24px | 18-20px | White or Cool Gray |
| H4 -- Component Title | Source Sans 3 | SemiBold 600 | 18px | 16px | White or Cool Gray |
| Body -- Standard | Source Sans 3 | Regular 400 | 16px | 15px | Cool Gray #BABCBE
|
| Body -- Large | Source Sans 3 | Regular 400 | 18px | 16px | Cool Gray #BABCBE
|
| Caption | Source Sans 3 | Light 300 | 13px | 12px | Muted #7B8A9A
|
| Label / Badge | Rajdhani | SemiBold 600 | 12-14px | 12px | Gold #FFC20E
|
| Button / CTA | Source Sans 3 | SemiBold 600 | 15-16px | 14-15px | Deep Navy on Gold |
Typography Rules
- Line height: 1.5-1.6 for body; 1.1-1.2 for headlines
- Maximum line length: 65-75 characters for body copy
- Alignment: Left-aligned by default; centered only for short display text
- Letter spacing: Slightly increased (0.05-0.1em) for Rajdhani labels and all-caps text; default elsewhere
- Do not use italic for body copy -- reserve Source Sans 3 italic for citations or special emphasis
- Do not set body paragraphs in all-caps -- all-caps is for labels, short callouts, and navigation only
Fallback Stack (Web / CSS)
/* Display / Headings */
font-family: 'Exo 2', 'Trebuchet MS', 'Segoe UI', sans-serif;
/* Body */
font-family: 'Source Sans 3', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
/* Labels / Technical */
font-family: 'Rajdhani', 'Tahoma', 'Geneva', sans-serif;