|
|
| (8 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| | <DIV style="float:right">__TOC__</DIV> | | <DIV style="float:right">__TOC__</DIV> |
| | 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. | | 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. |
| | + | |
| | + | The intended audience for this page is normal people and graphic artists who will be creating simple web pages, print ads, and other rendered art. If you are a CSS developer, you may find Moon Society 2019 Branding Font Stacks of interest. Do not use fonts from low in the stacks for "normal" branding work. |
| | | | |
| | <BR clear="all" /> | | <BR clear="all" /> |
| | ==Colors== | | ==Colors== |
| | {| role="presentation" | | {| role="presentation" |
| − | | White | + | | '''White''' |
| | |{{White}} | | |{{White}} |
| | + | | |
| | | <DIV style="background:{{White}}; height:2em; width:2em; height:calc(2em-2px); width:calc(2em-2px); border:1px solid {{CG2C}}"> </DIV> | | | <DIV style="background:{{White}}; height:2em; width:2em; height:calc(2em-2px); width:calc(2em-2px); border:1px solid {{CG2C}}"> </DIV> |
| | | | | | |
| Line 47: |
Line 50: |
| | |- | | |- |
| | | '''310C''' (proposed) | | | '''310C''' (proposed) |
| − | | #6AD1E3 | + | | {{310C}} |
| | | | | | |
| − | | <DIV style="background:#6AD1E3; height:2em; width:2em"> </DIV> | + | | <DIV style="background: {{310C}}; height:2em; width:2em"> </DIV> |
| | | Cyan to Cerlulean; lighter than MMM Cerulean | | | Cyan to Cerlulean; lighter than MMM Cerulean |
| | |- | | |- |
| Line 150: |
Line 153: |
| | *Monospace: '''Inconsolata''', which has two FOSS fonts and was used on our 2013-2018 website design (Coriolis). | | *Monospace: '''Inconsolata''', which has two FOSS fonts and was used on our 2013-2018 website design (Coriolis). |
| | | | |
| − | ===Font Stacks and CSS=== | + | ==Logos== |
| − | ====<BIG>Palatino/Palladio</BIG>====
| + | All logos are in [http://strabo.moonsociety.org/images/moonsoc-logo/ this directory]. |
| − | <TT><PRE>
| |
| − | .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
| |
| − | }
| |
| − | </PRE></TT>
| |
| − | | |
| − | 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.
| |
| − | | |
| − | ====<BIG>Noto Sans</BIG>====
| |
| − | <TT><PRE>
| |
| − | .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
| |
| − | }
| |
| − | </PRE></TT>
| |
| − | | |
| − | 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'''<BR />
| |
| − | 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 | |
| − | | |
| − | ====<BIG>Spartan</BIG>====
| |
| − | <TT><PRE>
| |
| − | 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;
| |
| − | }
| |
| − | </PRE></TT>
| |
| − | | |
| − | =====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'''<BR />
| |
| − | 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'''<BR />
| |
| − | 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'''<BR />
| |
| − | 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'''<BR />
| |
| − | 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?
| |
| − | | |
| − | ====<BIG>Inconsolata</BIG>====
| |
| − | <TT><PRE>
| |
| − | .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;
| |
| − | }
| |
| − | </PRE></TT>
| |
| − | | |
| − | =====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'''
| + | ==Resources== |
| − | *'''Consolas'''
| + | [https://sproutsocial.com/insights/social-media-image-sizes-guide/ Image Sizes for Social Media] |
| − | :: 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== | | ==TODO== |
