Moon Society 2019 Branding

From Lunarpedia
Revision as of 13:45, 28 December 2020 by Strangelv (talk | contribs) (→‎Spartan: Adding Trebuchet to font stack)
Jump to: navigation, search

This is a branding standard that hearkens 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.


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
 
310C (proposed) #6AD1E3
 
 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 hearkens back to the later WSD (2003-2013) website background
113C (light gold)
  1. FAE053
 250 244 83
 
 hearkens back to Coriolis (2013-2018) website details
116C (medium gold)
  1. FFCD00
 255 205 0
 
 hearkens back to Coriolis (2013-2018) website details
7555C (dark gold)
  1. D29F13
 210 159 19
 
 hearkens back to Coriolis (2013-2018) website details
7558C (brownish gold)
  1. 967126
 150 113 38
 
 hearkens back to Coriolis (2013-2018) website details
Warm Gray 1C
  1. D7D2CB
 215 210 203
 
Warm Gray 7C
  1. 968C83
 150 140 131
 
411C (grayish brown)
  1. 5E514D
 94 81 77
 
412C (brown)
  1. 382F2D
 56 47 45
 
663C (pinkish off-white)
  1. E5E1E6
 229 225 230
 
435C (chaise mauve)
  1. C1B2B6
 193 178 182
 
437C (lavender)
  1. 7B6469
 123 100 105
 
439C (dark cherry)
  1. 453536
 69 53 54
 

Typefaces

  • General purpose serif and possibly logo/title: Palatino/Palladio, with Tex Gyre Pagella as a FOSS and redistributable implementation. It hearkens back to 1990s ASI and Artemis Project branding.
  • Headings and Headlines: Spartan, with Spartan MB as a FOSS redistributable implementation. The League Spartan implementation has been used with MMM. This typeface hearkens back to Gizmo and should compliment it when we have a font.
  • MMM Headlines and decorative headlines: Gizmo. Will probably be only one font (Lunar Gizmo?), whose development is a pending action item. The proprietary original font appears to be impossible to legitimately acquire, unfortunately.
  • Body text and general purpose sans serif: Noto Sans, which hearkens 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 Possibilities

  • 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 2014, 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 in the ballpark or at least 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

Removed

  • Droid Sans
Will get hijacked by Android devices and replaced with the type of bad match this stack exists to try to prevent

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, Trebuchet, "Trebuchet MS", "GT Walsheim", Walsheim, Circular, "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
This is the @font-face name and could be named differently in an actual stylesheet.
  • Spartan
  • Spartan MB
This is a FOSS implementation with seven different weights.
  • League Spartan
Only one weight is FOSS. Fortunately, it's probably the weight we're wanting. The other weights in this family are proprietary and very low probability.

Substantially Similar Geometrics

  • Century Gothic
  • CenturyGothic
Best hope for most MS Windows users
  • Avenir
  • AvenirNext
  • Avenir Next
Best hope on Apple products

Futura/Twentieth Century
Not as good match as the previous category, but not too bad, and not too uncommon

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

Avant Garde
Maybe almost as close as Futura, and possibly the best hope for Linux distributions

  • URW Gothic L
  • Gothic L
  • Avant Garde
  • AvantGarde
  • Tex Gyre Adventor
  • TexGyreAdvendor

Other Geometric Typefaces
There is no fallback to a default geometric typeface, so it's extra-important to try find any available match that is one.

  • Trebuchet MS
For some MS Windows systems, this is the best hope fallback
  • GT Walsheim
  • Walsheim
  • Harmonia Sans
  • HarmoniaSans
  • Circular
lowercase Alpha is two-story
  • Insignia
Charlies look great, but capital Foxtrot is a problem

Desperate Approximations
Better than Roboto, Arial, Helvetica, DejaVu Sans, et c. This part of the list needs expansion. This is the last ditch. The sans-serif fallback is accepting that the city is going to be ravaged. Q: should we try fantasy instead and risk an even worse choice than sans serif?

  • Plate Gothic
Almost looks like a geometric and the Charlies look about right; small caps instead of lowercase.

Removed

  • Brown
There's either a name collision or this isn't what it was believed to be. Maybe put it at the bottom of the last ditch?

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;
    }
Inconsolata Font Stack Notes

Typeface Implementations There's at least one rare alternate font of this typeface running around. Maybe add it here sometime.

  • Web_Inconsolata
  • Inconsolata
  • InconsolataMedium

Best Known Approximations

  • Consolas
Inconsolata was heavily inspired by this typeface and they're quite similar as a result. Best hope on MS Windows machines.
  • Menlo
Maybe rare, but it's closer than Monaco
  • Monaco
Not too far off, and the best hope for Apple machines.

TODO

  • Determine primary and secondary, and other specified colors from palette
  • Wordpress theme for MMM
  • Font repository (publicly accessible?)
  • Revise branding for wikis and other websites
  • Branding sheet
Retrieved from "https://lunarpedia.org/index.php?title=Moon_Society_2019_Branding&oldid=116193"