Typography

Typography

Typography communicates personality before a single word is read. The DroidBuilders type system balances technical precision with warmth -- structured enough to signal craft and expertise, but readable for every audience from children to convention crowds.

All typefaces are available from Google Fonts at no cost and are compatible with WordPress, Avada, and standard design software.

Wiki Note: MediaWiki does not load Google Fonts by default. The specifications below define the brand standard. Fonts render correctly on droidbuilders.info and in print. For wiki documentation purposes, this page displays in standard system fonts.

Primary Typefaces

Display and Headlines: Exo 2

Attribute	Detail
Character	Technical, forward-looking, structured. Signals the DroidBuilders spirit in hero statements and major headlines.
Weights in Use	ExtraBold (800) -- Hero headlines, page titles; Bold (700) -- Section headers, event titles; SemiBold (600) -- Subheadings, callouts
Google Fonts	https://fonts.google.com/specimen/Exo+2
Primary Use	Homepage hero text, event banners, large-format print, page section headers

Body and Primary Text: Source Sans 3

Attribute	Detail
Character	Clean, neutral, highly legible at any size. Designed for screen and print. Reads naturally across age groups.
Weights in Use	Regular (400) -- Body copy, descriptions; SemiBold (600) -- Emphasis, UI labels, button text; Light (300) -- Supporting captions in spacious layouts
Google Fonts	https://fonts.google.com/specimen/Source+Sans+3
Primary Use	All paragraph text, UI elements, form labels, captions, emails, wiki content

Accent and Labels: Rajdhani

Attribute	Detail
Character	Condensed, geometric, slightly futuristic. Ideal for labels and technical callouts. Draws the eye without competing with body text.
Weights in Use	SemiBold (600) -- Primary labels and callouts; Bold (700) -- Badges, event codes, sector identifiers
Google Fonts	https://fonts.google.com/specimen/Rajdhani
Primary Use	Event type labels, badge text, navigation items, data labels, tags, technical markers

Type Hierarchy

The following scale applies to digital (web) applications. Print scaling should be adjusted proportionally.

Level	Typeface	Weight	Desktop Size	Mobile Size	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 background

Typography Rules

Property	Rule
Line height (body text)	1.5 to 1.6 times the font size
Line height (headlines)	1.1 to 1.2 times the font size
Maximum line length	65-75 characters (improves readability)
Alignment	Left-aligned by default; centered only for short display text
Letter spacing (labels)	+0.05 to +0.1em for Rajdhani and all-caps text
Italic use	Reserved for citations and special emphasis only -- not body paragraphs
All-caps use	Appropriate for labels, short callouts, navigation -- never body paragraphs

Web Fallback Stack

If Google Fonts are unavailable or fail to load, use the following:

/* 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;