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.
- A font stack to override the font stack used by the browser - browsers unwisely choose serif fonts for everything.
- The font stack can be used in a web page, e-mail, or in a custom default style sheet for a browser. In Opera 12x, it should be usable as a "user mode" style sheet. In Mozilla-based browsers such as Firefox or Seamonkey, it should be usable 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. Hence, no "!important" attributes.
- 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.
- A font stack for code listings (CODE tag) using monospaced fonts
- Each font stack uses the following order
- Special fonts - personal fancy of the web designer
- Mobile fonts (Android, Mac)
- Linux fonts
- CMU fonts
- Liberation fonts
- Free GNU fonts
- Deja Vu fonts
- Mac fonts
- Mac's Cyrillic fonts
- Mac's Central European fonts
- Default Mac UI font - User Interface fonts are pretty sans-serif fonts; are not licensed with other operating systems and have good readability
- Windows fonts
- Default Windows Vista or Windows 7 UI font
- Default Windows XP UI font
- Older Windows UI font that is not part of the "Microsoft Web safe font pack" and is not bundled with any other Microsoft software
- Phonetic fonts
- Unicode fallback fonts
- Mac Unicode font
- Windows Unicode font
- Adobe Standard Type-1 font
- generic font
- Same order for the font families in the three font stacks to maintain the same line height.
- Use a bottom border, instead of an underline text decoration, for text links.
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; }