To browse this website, you should unconditionally agree to its terms and conditions. If not, please stop and leave now. And, why is this site black? Reading black text on a white background is like staring at a lit bulb at close quarters. This website uses soft light to display the text and turns off the background.

Site Logo

Really Ultimate Font Stack CSS

This 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.

Introduction

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.

Two Stylesheets

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. (So far, I have created only one skin stylesheet.)

Requirements for the universal basic stylesheet

Here are the design goals for this basic stylesheet.

CSS Source

/*
 
   Name: V. Subhash's Really Ultimate CSS Font Stack
Version: 2020.06.21
Website: http://www.vsubhash.com
Purpose: Native font support for HTML in desktop (GNU/Linux,
         Mac, and Windows) and mobile operating systems
*/



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

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


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


body {
	/* Order: Special,
	 *				Android, iOS,
	 *				Linux (Liberation, Free, DejaVu),
	 *				Mac (Cyrillic, Central European, UI),
	 *				Windows Vista UI, Windows XP UI,
	 *				Windows (Non-Microsoft-Core-Web, Non-Microsoft-app-bundled, not
	 *				 found in both Mac and Windows),
	 *				phonetic,
	 *				Mac Unicode fallback, Windows Unicode fallback,
	 *				Adobe Standard Type 1, generic
	 */
	font-family: "CMU Sans Serif",
							 "Roboto", "Droid Sans", "Helvetica Neue",
 
							 "Liberation Sans", FreeSans, "DejaVu Sans",
							 "Helvetica CY", "Helvetica CE", "Lucida Grande",
							 "Segoe UI", Tahoma,
							 "Lucida Sans Unicode",
							 "Doulos SIL", "TITUS Cyberbit Basic",
							 "Last Resort", "Arial Unicode MS",
							 Helvetica, sans-serif;
	line-height: 1.4em;
	
	/* 
		If you would like to make your web pages more readable 
		and usable, uncomment the following comment block.
	*/

		font-size: 10pt;
		margin: 1px 1px 1px 1px;
		padding: 1px 1px 1px 1px;


}

pre { font-family: "Anonymous Pro", monospace; }

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


h1, h2, h3, h4, h5, h6 {
	/* Order: Special,
	 *				Android, iOS,
	 *				Linux (Liberation, Free, DejaVu),
	 *				Mac (Cyrillic, Central European, non-Windows UI),
	 *				Windows Vista Serif, Windows XP Serif, Windows UI,
	 *				Windows (Non-Microsoft-Core-Web, Non-Microsoft-app-bundled, not
	 *					 found in both Mac and Windows),
	 *				phonetic,
	 *				Windows Unicode fallback, Mac Unicode Fallback,
	 *				Adobe Standard Type 1, generic;
	 */
	font-family: "CMU Serif", 
							 "Roboto Slab",
							 "Liberation Serif", "FreeSerif", "DejaVu Serif",
							 "Times CY", "Times CE", "Palatino",
							 "Candara", "Trebuchet MS", "Times New Roman", "Segoe UI", "Tahoma", 
							 "Lucida Sans Unicode", "Doulos SIL", "TITUS Cyberbit Basic",
							 "Arial Unicode MS", "Last Resort", 
							 Roman, serif;
	font-weight: bold;
	line-height: 1.3em;
	margin: 1em auto 0.1em auto;
}

figcaption { text-align: center; }

h1 { font-size: 2.4em; }
h2 { font-size: 2.1em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1em; }


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



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; }
ol ol ol ol ol ol { list-style-type: decimal; }
ol ol ol ol ol ol ol { list-style-type: lower-alpha; }
ol ol ol ol ol ol ol ol { list-style-type: lower-roman; }
ol ol ol ol ol ol ol ol ol { list-style-type: upper-alpha; }
ol ol ol ol ol ol ol ol ol ol { list-style-type: upper-roman; }


ul { list-style-type: disc; }
ul ul { list-style-type: circle; }
ul ul ul { list-style-type: square; }
ul ul ul ul { list-style-type: disc; }
ul ul ul ul ul { list-style-type: circle; }
ul ul ul ul ul ul { list-style-type: square; }
ul ul ul ul ul ul ul { list-style-type: disc; }
ul ul ul ul ul ul ul ul { list-style-type: circle; }
ul ul ul ul ul ul ul ul ul { list-style-type: square; }


p { margin: 0.5em auto 1.5em; }


pre, xmp {
	margin: 1em 5%;
	padding: 1em 2em;
}


th, thead td { font-weight: bold; }


u { border-bottom: 1px solid firebrick; text-decoration: none; }


code, pre, textarea, xmp { 
	-moz-tab-size: 2;
	-o-tab-size: 2;
	tab-size: 2;
}