Typography: Difference between revisions

From Droid Reference Library
Jump to navigation Jump to search
Browse history interactively
Drl-admin (talk | contribs)
Bureaucrats, Administrators
692 edits
Created page with "==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. <div style="background-color:#0A1628; border:1px solid #003468; colo..."
 
mNo edit summary
 
Line 1: Line 1:
==Typography==
==Typography==
 
Typography communicates personality before a single word is read. The
===Overview===
DroidBuilders type system balances technical precision with warmth -- structured
 
enough to signal craft and expertise, but readable for every audience from
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.
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.
All typefaces are available from Google Fonts at no cost and are compatible
 
with WordPress, Avada, and standard design software.
<div style="background-color:#0A1628; border:1px solid #003468; color:#BABCBE; padding:12px 16px; margin:12px 0;">
'''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.
</div>
===Primary Typefaces===
===Primary Typefaces===
 
====Display and Headlines: Exo 2====
====Display / Hero: Exo 2====
 
{| class="wikitable" style="width:100%"
'''Character:''' Technical, forward-looking, structured -- perfect for headlines and hero statements.
! style="background-color:#003468; color:#FFFFFF;" | Attribute
 
! style="background-color:#003468; color:#FFFFFF;" | Detail
'''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.
|-
 
| '''Character'''
'''Google Fonts:''' [https://fonts.google.com/specimen/Exo+2 fonts.google.com/specimen/Exo+2]
| Technical, forward-looking, structured. Signals the DroidBuilders spirit
 
in hero statements and major headlines.
====Body / Primary Text: Source Sans 3====
|-
 
| '''Weights in Use'''
'''Character:''' Clean, neutral, highly legible at any size -- built for screen and print.
| ExtraBold (800) -- Hero headlines, page titles; Bold (700) -- Section
 
headers, event titles; SemiBold (600) -- Subheadings, callouts
'''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'''
'''Google Fonts:''' [https://fonts.google.com/specimen/Source+Sans+3 fonts.google.com/specimen/Source+Sans+3]
| https://fonts.google.com/specimen/Exo+2
 
|-
====Accent / Technical: Rajdhani====
| '''Primary Use'''
 
| Homepage hero text, event banners, large-format print, page section headers
'''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.
====Body and Primary Text: Source Sans 3====
 
'''Google Fonts:''' [https://fonts.google.com/specimen/Rajdhani fonts.google.com/specimen/Rajdhani]
{| class="wikitable" style="width:100%"
 
! style="background-color:#003468; color:#FFFFFF;" | Attribute
! style="background-color:#003468; color:#FFFFFF;" | 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====
{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Attribute
! style="background-color:#003468; color:#FFFFFF;" | 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===
===Type Hierarchy===
 
The following scale applies to digital (web) applications. Print scaling
Applies to digital (web) applications. Scale print proportionally to output format and viewing distance.
should be adjusted proportionally.
 
{| class="wikitable" style="width:100%"
{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Level
! style="background-color:#003468; color:#FFFFFF;" | Level
! style="background-color:#003468; color:#FFFFFF;" | Typeface
! style="background-color:#003468; color:#FFFFFF;" | Typeface
! style="background-color:#003468; color:#FFFFFF;" | Weight
! style="background-color:#003468; color:#FFFFFF;" | Weight
! style="background-color:#003468; color:#FFFFFF;" | Desktop Size
! style="background-color:#003468; color:#FFFFFF;" | Desktop
! style="background-color:#003468; color:#FFFFFF;" | Mobile Size
! style="background-color:#003468; color:#FFFFFF;" | Mobile
! style="background-color:#003468; color:#FFFFFF;" | Color (Dark Theme)
! style="background-color:#003468; color:#FFFFFF;" | Color (Dark Theme)
|-
|-
Line 101: Line 50:
| 56-72px
| 56-72px
| 36-48px
| 36-48px
| White #FFFFFF
| White <code>#FFFFFF</code>
|-
|-
| H1 Page Title
| H1 -- Page Title
| Exo 2
| Exo 2
| Bold 700
| Bold 700
| 40-48px
| 40-48px
| 28-36px
| 28-36px
| White #FFFFFF
| White <code>#FFFFFF</code>
|-
|-
| H2 Section Header
| H2 -- Section Header
| Exo 2
| Exo 2
| Bold 700
| Bold 700
| 28-32px
| 28-32px
| 22-26px
| 22-26px
| White #FFFFFF
| White <code>#FFFFFF</code>
|-
|-
| H3 Subsection
| H3 -- Subsection
| Exo 2
| Exo 2
| SemiBold 600
| SemiBold 600
Line 124: Line 73:
| White or Cool Gray
| White or Cool Gray
|-
|-
| H4 Component Title
| H4 -- Component Title
| Source Sans 3
| Source Sans 3
| SemiBold 600
| SemiBold 600
Line 131: Line 80:
| White or Cool Gray
| White or Cool Gray
|-
|-
| Body Standard
| Body -- Standard
| Source Sans 3
| Source Sans 3
| Regular 400
| Regular 400
| 16px
| 16px
| 15px
| 15px
| Cool Gray #BABCBE
| Cool Gray <code>#BABCBE</code>
|-
|-
| Body Large
| Body -- Large
| Source Sans 3
| Source Sans 3
| Regular 400
| Regular 400
| 18px
| 18px
| 16px
| 16px
| Cool Gray #BABCBE
| Cool Gray <code>#BABCBE</code>
|-
|-
| Caption
| Caption
Line 150: Line 99:
| 13px
| 13px
| 12px
| 12px
| Muted #7B8A9A
| Muted <code>#7B8A9A</code>
|-
|-
| Label / Badge
| Label / Badge
Line 157: Line 106:
| 12-14px
| 12-14px
| 12px
| 12px
| Gold #FFC20E
| Gold <code>#FFC20E</code>
|-
|-
| Button / CTA
| Button / CTA
Line 164: Line 113:
| 15-16px
| 15-16px
| 14-15px
| 14-15px
| Deep Navy on Gold background
| Deep Navy on Gold
|}
|}
 
===Typography Rules===
===Typography Rules===
 
{| class="wikitable" style="width:100%"
* '''Line height:''' 1.5-1.6 for body; 1.1-1.2 for headlines
! style="background-color:#003468; color:#FFFFFF;" | Property
* '''Maximum line length:''' 65-75 characters for body copy
! style="background-color:#003468; color:#FFFFFF;" | Rule
* '''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
| Line height (body text)
* '''Do not use italic for body copy''' -- reserve Source Sans 3 italic for citations or special emphasis
| 1.5 to 1.6 times the font size
* '''Do not set body paragraphs in all-caps''' -- all-caps is for labels, short callouts, and navigation only
|-
 
| Line height (headlines)
===Fallback Stack (Web / CSS)===
| 1.1 to 1.2 times the font size
 
|-
<syntaxhighlight lang="css">
| 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:
<pre>
/* Display / Headings */
/* Display / Headings */
font-family: 'Exo 2', 'Trebuchet MS', 'Segoe UI', sans-serif;
font-family: 'Exo 2', 'Trebuchet MS', 'Segoe UI', sans-serif;
 
/* Body */
/* Body */
font-family: 'Source Sans 3', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
font-family: 'Source Sans 3', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
 
/* Labels / Technical */
/* Labels / Technical */
font-family: 'Rajdhani', 'Tahoma', 'Geneva', sans-serif;
font-family: 'Rajdhani', 'Tahoma', 'Geneva', sans-serif;
</pre>
</syntaxhighlight>
[[Category:Branding]]

Latest revision as of 19:09, 16 June 2026

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;
Retrieved from "https://drl.droidbuilders.net/index.php?title=Typography&oldid=5538"