Typography
Five typeface roles, each with a distinct purpose. They should not be used interchangeably.
- Display — Syne: hero headlines, 32px and above
- Headings — League Spartan: H1–H6, nav, buttons
- Body — Noto Sans: paragraphs, UI, captions
- Serif — Palatino: editorial, print, pull quotes
- Monospace — Inconsolata: code, technical values
Hero headlines, event titles, large promotional/display text (32px and above). Prefer 700–800.
To the Moon
Lunar Development Conference
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
font-family: "Syne", sans-serif;@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&display=swap');Section headings (H1–H6), navigation labels, button text. Prefer 600–700.
A permanent presence
on the surface of the Moon
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
font-family: "League Spartan", Spartan, Century Gothic, Avenir Next, Futura, sans-serif;@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;600;700;800;900&display=swap');Paragraph text, list items, form labels, captions, general reading text. 16–18px, line-height 1.5–1.6.
The quick brown fox jumps over the lazy dog.
Sphinx of black quartz, judge my vow.
A knowledgeable colleague who is genuinely excited about what they do and wants you to be part of it. 0123456789
font-family: "Noto Sans", Verdana, DejaVu Sans, sans-serif;@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600;700&display=swap');Long-form editorial content, pull quotes, formal documents, print publications.
The Moon Society advances the development and settlement of the Moon.
Sphinx of black quartz, judge my vow. 0123456789
font-family: "Palatino", Palatino Linotype, TeX Gyre Pagella, Book Antiqua, Garamond, serif;Code samples, technical specifications, fixed-width data, terminal references. Use sparingly.
--ms-space-cadet: #13294B;
--ms-gold: #FFCD00;
// Technical specifications and code
font-family: "Inconsolata", Consolas, Menlo, Monaco, monospace;@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap');