Moral Volcano’s Universal CSS Font Stack - Native font support for Linux, Mac and Windows Users

Moral Volcano's
Universal CSS Font Stack

Moral Volcano's Universal CSS Font Stack is a basic stylesheet for Web designers to provide native font support for their web pages in almost all popular operating systems including Linux, Mac, and Windows.

In 2009, I switched from Windows XP to Ubuntu Linux. Until then, I was a Mandrake/Mandriva fan but never used Mandriva past the installation. With Ubuntu, sound worked and the modem worked plus a lot other important things - things that I thought only Windows could handle well. After the switch over to Ubuntu Linux, I realized that the text on my website did not look as good in Ubuntu as it did in Windows.

A few days into Ubuntu, I realized that most websites were made for Windows. Linux users were never given a thought.

So, when I redesigned my website, I went for two stylesheets. One was a basic stylesheet that had a font stack to support most modern operating systems including Linux, Mac and Windows. The other stylesheet was a "skin" stylesheet that I could dynamically alter to suit user preferences. (As of October 2009, I have created only one skin stylesheet.)

Here are the design goals of the basic stylesheet.

A font stack to override the font stack used by the browser - browsers unwisely choose serif fonts.
The font stack can be used in a web page, e-mail, or in a custom default style sheet for a browser. In Opera, it should be usable as a "user mode" style sheet. In Mozilla-based browsers such as Firefox of Seamonkey, it should be used as the userContent.css file.
The stylesheet should be very basic, that is, only address basic HTML elements (no IDs or classes). The stylesheet should be easily inheritable and overridable in a "skin" stylesheet, which can cover IDs and classes as required.
Header tags (h1, h2, h3, h4, h5, and h6 tags) can use serif fonts, which are quite readable in the bigger sizes used by header tags.
Non-bold heading tags for a softer look.
An overriding font stack for code listings and pre-formatted text (code, xmp, and pre tags) using monospace fonts
Each font stack uses the following order
1. Special fonts - to indulge personal fancy
2. Linux fonts
  1. CMU fonts
  2. Liberation fonts
  3. Free GNU fonts
  4. Deja Vu fonts
3. Mac fonts
  1. Mac's Cyrillic fonts
  2. Mac's Central European fonts
  3. Default Mac UI font - User Interface fonts are pretty sans-serif fonts; are not licensed with other operating systems and have good readability
4. Windows fonts
  1. Windows font that is not part of the "Microsoft Web safe font pack" or is not bundled with any Microsoft application
  2. Default Windows Vista or Windows 7 UI font
  3. Default Windows XP UI font
5. Phonetic fonts
6. Unicode fonts
  1. Mac Unicode font
  2. Windows Unicode font
7. Adobe Standard Type-1 font
8. generic font
Same order for the font families in the three font stacks to maintain the same font size.
Use a bottom border, instead of an underline text decoration, for text links

/*
  (c) V. Subhash, 2009.
  www.vsubhash.com

  Created:
    19 May 2009
    
  Updated:       
    26 December 2009
    
 Description:   
    Basic "screen" stylesheet with "Moral Volcano Universal CSS Font Stack"
    
 License:       
    Lesser General Public License
    http://www.gnu.org/copyleft/lesser.html
*/


a {
  color: navy;
  border-bottom: 1px dotted navy;
  font-weight: normal;
  text-decoration: none;
}


a:visited {
  border-bottom-color: purple;
}


blockquote {
  border-left: 5px solid whitesmoke;
  margin: 1em 10%;
  padding: 1em 2em;
}


body {
  /* Order: Special,
   *        Linux (CMU, Liberation, Free, DejaVu),
   *        Mac (Cyrillic, Central European, UI),
   *        Windows Vista UI, 
   *        Windows (Non-Microsoft-Core-Web, Non-Microsoft-app-bundled, not
   *                 found in both Mac and Windows),
   *        Windows XP UI, 
   *        phonetic,
   *        Mac Unicode, Windows Unicode,
   *        Adobe Standard Type 1, generic
   */
  font: normal 1em "CMU Sans Serif", "Liberation Sans", FreeSans, "DejaVu Sans",
                   "Helvetica CY", "Helvetica CE", "Lucida Grande",                   
                   "Segoe UI", 
                   "Lucida Sans Unicode",
                   Tahoma,                   
                   "Doulos SIL", "TITUS Cyberbit Basic",
                   "Last Resort", "Arial Unicode MS",
                   Helvetica, sans-serif;
  padding: 1em;
  max-width: 9in;
}


code, pre, xmp {
  /* Order: Special,
   *        Linux (CMU, Liberation, Free, DejaVu),
   *        Mac, Vista, XP,
   *        Adobe Standard Type 1, generic
   */
  font: Lighter 1em "Anonymous Pro", Anonymous,
                    "CMU Typewriter Text", "Liberation Mono", FreeMono, 
                      "DejaVu Sans Mono",
                    Monaco, Consolas, "Lucida Console",
                    Courier, monospace;
}


h1, h2, h3, h4, h5, h6 {
  /* Order: Special,
   *        Linux (CMU, Liberation, Free, DejaVu),
   *        Mac (Cyrillic, Central European, non-Windows, UI),
   *        Windows Vista UI,  
   *        Windows (Non-Microsoft-Core-Web, Non-Microsoft-app-bundled, not 
   *          found in both Mac and Windows),
   *        Windows XP UI,
   *        phonetic,
   *        Mac Unicode, Windows Unicode,
   *        Adobe Standard Type 1, generic
   */
  font-family: "CMU Serif", "Liberation Serif", FreeSerif, "DejaVu Serif",
               "Times CY", "Times CE", Palatino, "Lucida Grande",
               "Segoe UI", 
               "Palatino Linotype",
               Tahoma,                
               "Doulos SIL", "TITUS Cyberbit Basic",
               "Last Resort", "Arial Unicode MS",
               Roman, serif;
  font-weight: normal;
  letter-spacing: 2;
  margin: 1em auto 0.2em auto;
}


h1 { font-size: 2.8em; }
h2 { font-size: 2.5em; }
h3 { font-size: 2.2em; }
h4 { font-size: 1.8em; }
h5 { font-size: 1.5em; }
h6 { font-size: 1.2em; }


h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  border-bottom-style: none;
}

li {
  font-size: 1em;
  line-height: 2em;
  margin: 0.2em auto 1.2em auto;
}


ol { list-style-type: decimal; }
ol ol { list-style-type: lower-alpha; }
ol ol ol { list-style-type: lower-roman; }
ol ol ol ol { list-style-type: upper-alpha; }
ol ol ol ol ol { list-style-type: upper-roman; }


p {
  font-size: 1em;
  line-height: 2em;
  margin: 0.2em auto 1.2em auto;
}


pre {
  background-color: #EFEFEF;
  border: 1px dashed lightgrey;
  margin: 1em 5%;
  padding: 1em 2em;
  overflow-x: auto;
}

Moral Volcano is the work of an Indian, thinker, astrologer, software programmer, GNU/Linux user, web designer, technical writer, lexicographer, hacker, gamer, pioneer IE Blocker, amateur photographer, and somewhat podcast transcriptionist. named V. Subhash (Me). I have written a fake American Policy for Dummies book. My e-book How To Invest In Stocks PDF eBook is free but not fake. So, I my PDF eBook version of Ambrose Bierce's Devil's Dictionary, which was created using the all-text original provided by the Guttenberg project and a free software HTMLDoc.

I do not have any time for social notworking sites such as Facebook. They cause a huge loss of productivity in offices where employees have access to Internet. I had a Johnny Bravo fan site but that was gone when Yahoo closed Geocities. Sites such as Facebook, Linked-In, MySpace, Orkut, and Twitter thrive only because spies and marketers feel there is a great need for easy access to demographic and personal information. "Free" pretends to be free for a reason. Otherwise, everything comes with a price tag.

Finally, this website blocks Internet Explorer - all versions, not just IE6. This is the first website on the Internet to do so. If you have a website, I welcome you to do so.