Moon Society 2019 Branding
Revision as of 08:45, 22 September 2019 by Tycho>Strangelv (→Candidate Typefaces: CSS; tweaks)
This is a branding proposal that harkens back to what we have used historically, while trying all colors to Pantone Coated and providing freely redistributable fonts for all typefaces.
TODO:
- Finalize typeface choices
- Font repository (publicly accessible?)
- Cyan color
- Logo/wordmark revision
- Branding sheet
Contents
Colors
White |
|
||
Cool Gray 2C |
|
||
Cool Gray 5C |
|
||
Cool Gray 8C |
|
||
Cool Gray 11C |
|
||
433C (near-black gray) |
|
||
Black |
|
||
PENDING (cyan?) | PENDING | Cyan to Cerlulean; lighter than MMM Cerulean | |
299C (saturated cerulean) |
|
Closest Pantone match to MMM's historical cerulean | |
7691C (blue) |
|
Between Space Cadet Blue and MMM Cerulean | |
2767C (Space Cadet Blue) |
|
Best Pantone match for Space Cadet Blue; also harkens back to the later WSD (2003-2013) website background | |
113C (light gold) |
|
Harkens back to Coriolis (2013-2018) website details | |
116C (medium gold) |
|
Harkens back to Coriolis (2013-2018) website details | |
7555C (dark gold) |
|
Harkens back to Coriolis (2013-2018) website details | |
7558C (brownish gold) |
|
Harkens back to Coriolis (2013-2018) website details | |
Warm Gray 1C |
|
||
Warm Gray 7C |
|
||
411C (grayish brown) |
|
||
412C (brown) |
|
||
663C (pinkish off-white) |
|
||
435C (chaise mauve) |
|
||
437C (lavender) |
|
||
439C (dark cherry) |
|
Candidate Typefaces
- General purpose serif and possibly logo/title: Palatino/Palladio, with Tex Gyre Pagella as a FOSS and redistributable implementation.
- Headings and Headlines: Spartan, with Spartan MB as a FOSS redistributable implementation. The League Spartan implementation has been used with MMM. This typeface harkens back to Gizmo and should compliment it when we have a font.
- MMM Headlines and decorative headlines: Gizmo. Will be only one font (Infinite Loop Gizmo), whose development is a pending action item.
- Body text and general purpose sans serif: Noto Sans, which harkens to Verdana, which was used both on websites and in MMM.
- Monospace: Inconsolata, which has two FOSS fonts and was used on our 2013-2018 website design (Coriolis).
Font Stacks and CSS
Palatino/Palladio
IN PROGRESS
Noto Sans
PENDING
Spartan
H1, H2, H3, H4, H5, H6 { font-family: Webfont-Spartan, Spartan, "Spartan MB", "League Spartan", "Century Gothic", CenturyGothic, "Tw Cen MT", "Tw Cen", "Twentieth Century", Tw-Cen-MT, Tw-Cen, Twentieth-Century, Futura, Futura-Medium, "Futura Medium", "Futura PT", Avenir, AvenirNext, "Avenir Next", Insignia, "URW Gothic L", "Gothic L", "Avant Garde", AvantGarde, "Tex Gyre Adventor", TexGyreAdvendor, Circular, "GT Walsheim", Walsheim, Brown, "Harmonia Sans", HarmoniaSans, "Plate Gothic", sans-serif; } @font-face { font-family: 'Webfont-Spartan'; src: url('spartan-mb.black-webfont.woff2') format('woff2'), url('spartan-mb.black-webfont.woff') format('woff'), url('spartan-mb.black-webfont.ttf') format('truetype'); font-weight: 900; font-style: normal; } @font-face { font-family: 'Webfont-Spartan'; src: url('spartan-mb.extrabold-webfont.woff2') format('woff2'), url('spartan-mb.extrabold-webfont.woff') format('woff'), url('spartan-mb.extrabold-webfont.ttf') format('truetype'); font-weight: 800; font-style: normal; } @font-face { font-family: 'Webfont-Spartan'; src: url('spartan-mb.bold-webfont.woff2') format('woff2'), url('spartan-mb.bold-webfont.woff') format('woff'), url('spartan-mb.bold-webfont.ttf') format('truetype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Webfont-Spartan'; src: url('spartan-mb.semibold-webfont.woff2') format('woff2'), url('spartan-mb.semibold-webfont.woff') format('woff'), url('spartan-mb.semibold-webfont.ttf') format('truetype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Webfont-Spartan'; src: url('spartan-mb.regular-webfont.woff2') format('woff2'), url('spartan-mb.regular-webfont.woff') format('woff'), url('spartan-mb.regular-webfont.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Webfont-Spartan'; src: url('spartan-mb.light-webfont.woff2') format('woff2'), url('spartan-mb.light-webfont.woff') format('woff'), url('spartan-mb.light-webfont.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Webfont-Spartan'; src: url('spartan-mb.thin-webfont.woff2') format('woff2'), url('spartan-mb.thin-webfont.woff') format('woff'), url('spartan-mb.thin-webfont.ttf') format('truetype'); font-weight: 100; font-style: normal; }
Inconsolata
.inconsolata { font-family: Web_Inconsolata, Inconsolata, InconsolataMedium, Consolas, Menlo, Monaco, monospace; } @font-face { font-family: 'Web_Inconsolata'; src: url('inconsolata.bold-webfont.woff2') format('woff2'), url('inconsolata.bold-webfont.woff') format('woff'), url('inconsolata.bold-webfont.ttf') format('truetype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Web_Inconsolata'; src: url('inconsolata-webfont.woff2') format('woff2'), url('inconsolata-webfont.woff') format('woff'), url('inconsolata-webfont.ttf') format('truetype'); font-weight: 400; font-style: normal; }