Moon Society 2019 Branding

This is a branding proposal that harkens back to what we have used historically, while tying all colors to official Pantone Coated sRGB values and providing freely redistributable fonts for all typefaces.

TODO:

• Finalize typeface choices
• Working font stacks
• Font repository (publicly accessible?)
• Finalize Cyan color
• Logo/wordmark revision
• Determine primary and secondary, and other specified colors from palette
• Revise branding for wikis and other websites
• Branding sheet

Colors

White

1. FFFFFF

 

Cool Gray 2C

1. D0D0CE

 

Cool Gray 5C

1. B1B3B3

 

Cool Gray 8C

1. 888B8D

 

Cool Gray 11C

1. 53565A

 

433C (near-black gray)

1. 1D252D

 

Black

1. 000000

 

PENDING (cyan?) PENDING

 

Cyan to Cerlulean; lighter than MMM Cerulean 299C (saturated cerulean)

1. 00A3E0

 

Closest Pantone match to MMM's historical cerulean 7691C (blue)

1. 006298

 

Between Space Cadet Blue and MMM Cerulean 2767C (Space Cadet Blue)

1. 13294B

 

Best Pantone match for Space Cadet Blue; also harkens back to the later WSD (2003-2013) website background 113C (light gold)

1. FAE053

 

Harkens back to Coriolis (2013-2018) website details 116C (medium gold)

1. FFCD00

 

Harkens back to Coriolis (2013-2018) website details 7555C (dark gold)

1. D29F13

 

Harkens back to Coriolis (2013-2018) website details 7558C (brownish gold)

1. 967126

 

Harkens back to Coriolis (2013-2018) website details Warm Gray 1C

1. D7D2CB

 

Warm Gray 7C

1. 968C83

 

411C (grayish brown)

1. 5E514D

 

412C (brown)

1. 382F2D

 

663C (pinkish off-white)

1. E5E1E6

 

435C (chaise mauve)

1. C1B2B6

 

437C (lavender)

1. 7B6469

 

439C (dark cherry)

1. 453536

 

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

.pagella
   {
    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", Palladio, "URW Palladio L", "Palatino Novo", "TeX Gyre Pagella", "Palazzo Original", "Marathon Serial", "Book Antiqua", "FPL Neu", Perpetua, Tinos, Libertine, "Linux Libertine", Garamond, serif
    }

Present plan is to use just a font stack for web implementation.

Palatino/Palladio Font Stack Notes

Palatino/Palladio Typeface Implementations

• Palatino
• Palatino Linotype
• Palatino LT STD
• Palladio
• URW Palladio L
• Palatino Novo
• TeX Gyre Pagella

A completely FOSS implementation that might be the basis for in-house custobmization. Is often included with systems that include software that uses TeX as a dependency or just users and distros using the TeX Gyre fonts as a handy base.

• Palazzo Original
• Marathon Serial
• Book Antiqua
• FPL Neu

Misc

• Perpetua

This is another typeface that appears to have been used historically, including the ARTEMIS logo. It's arguably close enough to Palatino/Palladio.

Better than Most Possiblities

• Libertine
• Linux Libertine

Libertine/Linux Libertine is often bundled with Linux distros

• Tinos

A variant of Libertine that is often found on Chromebooks

• Garamond

A typeface with a lot of variants, some of which are closer to Palatino than others. This is basically a Hail Mary pass before subjecting the visitor with whatever their serif default is.

Noto Sans

.noto-sans
   {
    font-family: "Noto Sans", Verdana, "DejaVu Sans", "Bitstream Vera Sans", OpenSans, "Open Sans", SourceSans, SourceSansPro, "Source Sans", "Source Sans Pro", Carlito, sans-serif
    }

Present plan is to use just a font stack for web implementation.

Noto Sans Font Stack Notes

Typeface Implementation

• Noto Sans

The brand reference font family. While Droid Sans appears to be the same typeface, most Android devices will automatically substitute either Roboto 2012 or Roboto 1014, which are not desired at all.

Similar Typefaces

• Verdana
• Carlito

This appears to actually be a variant of Noto Sans, but it crops the capital India, making it indistinguishable from lowercase Lima. Not only does it lose an important a11y feature, it loses one of the more distinguishing features of Noto Sans and Verdana. Carlito is mainly found on Chromebooks.

Better than Most Possibilities
At this level, a proper capital India is a lost cause, but the terminals of these are less far off than we'll get with most users' default sans-serif typefaces.

• DejaVu Sans
• Bitstream Vera Sans
• OpenSans
• Open Sans
• SourceSans
• SourceSansPro
• Source Sans
• Source Sans Pro

Spartan

H1, H2, H3, H4, H5, H6
   {
    font-family: Webfont-Spartan, Spartan, "Spartan MB", "League Spartan", "Century Gothic", CenturyGothic, Avenir, AvenirNext, "Avenir Next", "Tw Cen MT", "Tw Cen", "Twentieth Century", Tw-Cen-MT, Tw-Cen, Twentieth-Century, Futura, Futura-Medium, "Futura Medium", "Futura PT", 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; 
    }

Spartan Font Stack Notes

Typeface Implementations

• Webfont-Spartan

Spartan Spartan MB League Spartan

Substantially Similar Geometrics Century Gothic CenturyGothic Avenir AvenirNext Avenir Next

Futura Tw Cen MT Tw Cen Twentieth Century Tw-Cen-MT Tw-Cen Twentieth-Century Futura Futura-Medium Futura Medium Futura PT

URW Gothic L Gothic L Avant Garde AvantGarde Tex Gyre Adventor TexGyreAdvendorCircular

Other Geometric Typefaces GT Walsheim Walsheim Brown Harmonia Sans HarmoniaSans Plate Gothic

• Insignia

Charlies look good, but capital Foxtrot is a problem

Removed

• Brown

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;
    }