CSS fonts for universal use

Submitted by peter on Wed, 11/01/2017 - 09:12

CSS fonts for universal use

Web sites feature a wide range of fonts and many fail because the font is not installed on the visitor's machine. You can download fonts with a Web page but that is just another roadblock to a happy visitor, along with monstrous Javascript frameworks and an overload of advertising. Here is an easier, more reliable approach.

Advertising slows down Web page loading and kills off visitors. Advertisers spend billions on research. All the research shows one small relevant advertisement is far more effective than all the garbage displayed on most sites but people still display garbage on their Web site and advertisers still pay big money to display irrelevant trash. Visitors leave your Web site before the garbage finishes the download.

The big Javascript frameworks leave your visitors looking at a blank or distorted screen. They leave before your Web page is readable.

Downloading fonts is just another roadblock. Your visitors start reading your Web page then everything distorts while the downloaded font is applied. If the visitor sits through the font distortion, the Javascript distortion, and the endless advertising downloads, the rarely read any faster than a good choice of standard fonts. Why waste their time on special fonts?

There are really only three types of fonts in regular use. We use serif fonts for readability at small sizes, sans-serif fonts for readability when there is more space, and mono fonts as a type of emphasis that does not depend on colour.

Monospace

Monospace fonts are used to represent old typed content, code, and example text where it is important to enter everything in an exact format. The monospace content can be bold and in a different colour. The different colour might not work on every screen. Bold is not always distinct. Using a font with different shaped letters and different spacing is another way to make the text look different.

The following line represents text with a word highlighted as "code" using HTML.

You can decode a URL using the <code>parse_url</code> function.

The following line displays the text in your Web browser using the fonts defined for code in CSS.

You can decode a URL using the parse_url function.

Large examples of programming code use the HTML pre element. The following line has the whole line enclosed in a HTML pre element.

<pre>$parts = parse_url('https://petermoulding.com/test');</pre>

The following line has the line displayed in your browser using the same font from CSS.

$parts = parse_url('https://petermoulding.com/test');

The following CSS font definition is a common default choice for monospace fonts. Often this arrives from some sort of "reset" file. When you find a CSS reset file, it is time to fix your CSS.

code, kbd, pre, samp { font-family: monospace, monospace; }

The following CSS font definition is a common step up from a reset for monospace fonts.

code, kbd, pre, samp
    {
    font-family: "Courier 10 Pitch", "Nimbus Mono L", Monaco, "Courier New", Courier, "Lucida Console", monospace;
    }

The following CSS font definition is a better choice for monospace fonts, a choice including default fronts from all operating systems.

/* monospace */
code, kbd, pre, samp
    {
    font-family: "Bitstream Vera Sans Mono", "Courier 10 Pitch", "Nimbus Mono L", Monaco, "Courier New", Courier, "DejaVu Sans Mono", "Lucida Console", monospace;
    }

What does each font look like in your Web browser? Here are some examples. The first example uses serif. The remainder use a monospace font. If they do not look different to the first example, the monospace font does not exist.

font-family: serif 0123456789 iIlL1 oO0

font-family: Bitstream Vera Sans Mono 0123456789 iIlL1 oO0

font-family: Courier 10 Pitch 0123456789 iIlL1 oO0

font-family: Nimbus Mono L 0123456789 iIlL1 oO0

font-family: Monaco 0123456789 iIlL1 oO0

font-family: Courier New 0123456789 iIlL1 oO0

font-family: Courier 0123456789 iIlL1 oO0

font-family: DejaVu Sans Mono 0123456789 iIlL1 oO0

font-family: Lucida Console 0123456789 iIlL1 oO0

font-family: monospace 0123456789 iIlL1 oO0